2020-4-16 seo達人
在這篇文章中,我們將討論原型以及如何在 JS 中使用它們進行繼承。我們還將會看到原型方法與基于類的繼承有何不同。
繼承
繼承是編程語言的一個顯著特征,隨著面向?qū)ο缶幊陶Z言的引入而出現(xiàn)。這些語言大多是基于類的語言。在這里,類就像一個藍圖,對象是它的展現(xiàn)形式。就是說,要創(chuàng)建一個對象,首先我們必須創(chuàng)建一個類,然后我們可以從一個類創(chuàng)建任意數(shù)量的對象。
想象一下,我們有一個表示智能手機的類。這個類具有像其他智能手機一樣的可以拍照、有GPS定位等功能。下面是使用 c++ 來描述這樣的一個類:
class SmartPhone {
public:
void captureImages() {}
}
SmartPhone x;
x.captureImages()
我們創(chuàng)建了一個名為SmartPhone的類,它有一個名為capturePictures的方法用來拍照。
如果我們需要一個iPhone類,它可以捕捉圖像和一些特殊的功能,比如面部ID掃描。下面是兩種可能的解決方案:
1.將捕獲圖像功能與其他常見的智能手機功能,以及iPhone的特定功能一起重寫到一個新類中。但是這種方法需要更多的時間和精力,并且會引入更多的bug。
重用SmartPhone類中的功能,這就是繼承的作用,繼承也是重用其他類/對象中功能的一種方式。
這里是我們?nèi)绾螐腟martPhone類中繼承capturePictures方法,使用 c++ 實現(xiàn)如下:
class Iphone: public SmartPhone {
public:
void faceIDScan() {}
}
Iphone x
x.faceIDScan()
x.captureImages()
上面是一個簡單的繼承示例。 但是,它表明繼承可以使我們以某種方式重用代碼,從而使所生成的程序更不易出錯,并且花費更少的時間進行開發(fā)。
以下是關(guān)于類的一些重要信息:
繼承該功能的類稱為子類
被繼承的類稱為父類
一個類可以同時從多個類中繼承
我們可以具有多個繼承級別。 例如,類C繼承自類B,而類B繼承自類A
值得注意的是,類本身并沒有做任何事情。在從類創(chuàng)建對象之前,實際上沒有完成任何工作。我們將看到它為什么不同于JavaScript。
大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。
原型是什么?
在 JS 中,所有對象都有一個特殊的內(nèi)部屬性,該屬性基本上是對另一個對象的引用。 此引用取決于對象的創(chuàng)建方式。 在 ECMAScript/JavaScript規(guī)范中,它表示為[[Prototype]]。
由于[[Prototype]]鏈接到一個對象,所以該對象有自己的[[Prototype]]引用。這就是建立原型鏈的方式。
這個[[Prototype]]鏈?zhǔn)?JS 中繼承的構(gòu)建塊。
__proto__ 對象
為了訪問對象的[[Prototype]],大多數(shù)瀏覽器都提供__proto__屬性。訪問方式如下:
obj.__proto__
需要注意的是,這個屬性不是 ECMAScript 標(biāo)準(zhǔn)的一部分,它實際上是由瀏覽器實現(xiàn)的。
獲取和設(shè)置原型方法
除了__proto__屬性外,還有一種訪問[[Prototype]]的標(biāo)準(zhǔn)方法:
Object.getPrototypeOf(obj);
對應(yīng)的有個類似的方法來設(shè)置對象的[[Prototype]]:
Object.setPrototypeOf(obj, prototype);
[[Prototype]]和.prototype屬性
[[Prototype]] 只不過是一種用來表示物體原型的標(biāo)準(zhǔn)符號。 許多開發(fā)人員將其與.prototype屬性混淆,這是完全不同的事情,接著我們來研究一下.prototype屬性。
在 JS 中,有許多創(chuàng)建對象的方法。一種方法是使用構(gòu)造函數(shù),像這樣使用new關(guān)鍵字來調(diào)用它:
function SmartPhone(os) {
this.os = os
}
let phone = new SmartPhone('Android')
在控制臺打印 phone 對象:
{
os: "IPhone"
__proto__{
constructor: ? SmartPhone(os)
__proto__: Object
}
}
現(xiàn)在,如果我們希望在phone對象上有一些方法,我們可以在函數(shù)上使用.prototype屬性,如下所示:
SmartPhone.prototype.isAndroid = function () {
return this.os === 'Android' || 'android'
}
再次創(chuàng)建phone對象時,打印 phone 對象如下:
{
os: "Android"
__proto__{
isAndroid: ?()
constructor: ? SmartPhone(os)
__proto__: Object
}
}
我們可以在對象的[[Prototype]]中看到isAndroid()方法。
簡而言之,.prototype屬性基本上就像由給定的構(gòu)造函數(shù)創(chuàng)建的[[Prototype]]對象的藍圖。 在.prototype屬性/對象中聲明的所有內(nèi)容都會在對象的[[Prototype]]中彈出。
實上,如果將 SmartPhone.prototype 與phone 的[[Prototype]]進行比較,就會發(fā)現(xiàn)它們是相同的:
console.log(Object.getPrototypeOf(phone) === SmartPhone.prototype);
// true
值得注意的是,我們還可以在構(gòu)造函數(shù)中創(chuàng)建方法:
function ObjectA() {
this.methodA = function () {}
}
let firstObj = new ObjectA()
console.log(firstObj)
這種方法的問題是當(dāng)我們初始化一個新對象時。所有實例都有自己methodA的副本。相反,當(dāng)我們在函數(shù)的原型上創(chuàng)建它時,對象的所有實例只共享方法的一個副本,顯然使用原型的方式效率會過高。
大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。
當(dāng)我們訪問屬性時這里發(fā)生了什么?
當(dāng)我們訪問一個屬性以獲取它時,會發(fā)生以下情況:
JS 引擎查找對象上的屬性,如果找到了該屬性,然后返回它。否則,JS 引擎將通過查看[[Prototype]]來檢查對象的繼承屬性,如果找到該屬性,則返回它,否則,它會查找 [[Prototype]]的[[Prototype]]。 找到屬性或沒有[[Prototype]]時,該鏈結(jié)束,這意味著我們已經(jīng)到達原型鏈的末端。
當(dāng)我們設(shè)置/創(chuàng)建屬性時,JS 總是在對象本身上進行設(shè)置。 即使[[Prototype]]鏈上存在相同的屬性,下面是一個例子:
function MyObject() {}
MyObject.prototype.propA = 10; // 在原型上創(chuàng)建屬性
let myObject = new MyObject();
console.log(myObject.propA); // [[Prototype]]上的屬性
// 10
myObject.propA = 20; // 對象的屬性
console.log(myObject.propA);
// 20
在上面的示例中,我們創(chuàng)建了一個構(gòu)造函數(shù),該函數(shù)的[[Prototype]]上具有屬性propA。 當(dāng)我們嘗試對其進行讀取操作時,會在控制臺中看到該值。 但是,當(dāng)我們嘗試在對象本身上設(shè)置相同的屬性時;JS 使用給定值在對象上創(chuàng)建一個新屬性。 現(xiàn)在,如果我們不能直接訪問[[Prototype]]上的屬性。
值得注意的是,普通對象的[[Prototype]]鏈的末尾是內(nèi)置的Object.prototype。 這就是為什么大多數(shù)對象共享許多方法(例如toString())的原因。 因為它們實際上是在Object.prototype上定義的。
使用原型繼承的各種方法
在 JS 中,無論我們?nèi)绾蝿?chuàng)建對象,只有原型繼承,但這些方式還有一些區(qū)別,來看看:
對象字面量
在JavaScript中創(chuàng)建對象的最簡單方法是使用對象字面量:
let obj = {}
如果在瀏覽器的控制臺中打印obj,我們將看到以下內(nèi)容:
clipboard.png
基本上,所有用文字面量創(chuàng)建的對象都繼承了Object.prototype的屬性。
需要注意的是__proto__對象引用了創(chuàng)建它的構(gòu)造函數(shù)。 在這種情況下,constructor屬性指向Object構(gòu)造函數(shù)。
使用對象構(gòu)造函數(shù)
另一種不太常見的創(chuàng)建對象的方法是使用對象構(gòu)造函數(shù)。JS 提供了一個名為Object的內(nèi)置構(gòu)造函數(shù)方法來創(chuàng)建對象。
let obj = new Object();
這種方法的結(jié)果與對象字面量的方式相同。它從Object.prototype繼承屬性。因為我們使用Object作為構(gòu)造函數(shù)。
Object.create 方法
使用此輔助方法,我們可以創(chuàng)建一個帶有[[Prototype]]的對象,如下所示:
let SmartPhone = {
captureImages: function() {}
}
let Iphone = Object.create(SmartPhone)
Iphone.captureImages()
這是在 JS 中使用繼承的最簡單方法之一。猜猜我們?nèi)绾卧跊]有任何[[Prototype]]引用的情況下創(chuàng)建對象?
構(gòu)造方法
與 JS 運行時提供的對象構(gòu)造函數(shù)相似。 我們還可以創(chuàng)建自己的構(gòu)造函數(shù),以創(chuàng)建適合我們需求的對象,如下所示:
function SmartPhone(os) {
this.os = os;
}
SmartPhone.prototype.isAndroid = function() {
return this.os === 'Android';
};
SmartPhone.prototype.isIOS = function() {
return this.os === 'iOS';
};
現(xiàn)在,我們想創(chuàng)建一個iPhone類,它應(yīng)該有'iOS'作為它 os 屬性的值。它還應(yīng)該有faceIDScan方法。
首先,我們必須創(chuàng)建一個Iphone構(gòu)造函數(shù),在其中,我們應(yīng)該調(diào)用SmartPhone構(gòu)造函數(shù),如下所示:
function Iphone() {
SmartPhone.call(this, 'iOS');
}
這會將Iphone構(gòu)造函數(shù)中的this.os屬性設(shè)置為’iOS‘。
之所以調(diào)用SmartPhone.call方法,是因為我們需要更改 this 值以引用Iphone。 這類似于在面向?qū)ο蟮氖澜缰姓{(diào)用父級的構(gòu)造函數(shù)。
接下來的事情是,我們必須從SmartPhone構(gòu)造函數(shù)繼承方法。 我們可以在此處使用Object.create朋友,如下所示:
Iphone.prototype = Object.create(SmartPhone.prototype);
現(xiàn)在,我們可以使用.prototype為Iphone添加方法,如下所示:
Iphone.prototype.faceIDScan = function() {};
最后,我們可以使用Iphone創(chuàng)建一個對象,如下所示:
let x = new Iphone();
// calling inherited method
console.log(x.isIOS()):
// true
ES6 class
使用ES6,整個過程非常簡單。 我們可以創(chuàng)建類(它們與C ++或其他任何基于類的語言中的類不同,只是在原型繼承之上的語法糖),然后從其他類派生新的類。
下面是我們?nèi)绾卧贓S6中創(chuàng)建類:
class SmartPhone {
constructor(os) {
this.os = os;
}
isAndroid() {
return this.os === 'Android';
}
isIos() {
return this.os === 'iOS';
}
};
現(xiàn)在,我們可以創(chuàng)建一個派生自SmartPhone的新類,如下所示:
class Iphone extends SmartPhone {
constructor() {
super.call('iOS');
}
faceIDScan() {}
}
我們不是調(diào)用SmartPhone.call,而是調(diào)用super.call。 在內(nèi)部,JavaScript引擎會自動為我們執(zhí)行此操作。
最后,我們可以使用Iphone創(chuàng)建一個對象,如下所示
let x = new Iphone();
x.faceIDScan();
// calling inherited method
console.log(x.isIos()):
// true
該ES6示例與先前的構(gòu)造方法示例相同。 但是閱讀和理解起來要干凈得多。
原文:https://javascript.info/proto...
代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行l(wèi)og 調(diào)試,這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。
藍藍設(shè)計的小編 http://paul-jarrel.com