原型和繼承

原型部分

簡單創(chuàng)建一個(gè)構(gòu)造函數(shù)與實(shí)例：

function Person() {

}
Person.prototype.name = 'Zhar';
Person.prototype.age = 30;
Person.prototype.say = function(){
  console.log(this.name);
}
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Zhar
console.log(person2.name) // Zhar

Person 為構(gòu)造函數(shù)
person是Person 的一個(gè)實(shí)例對(duì)象

1、instanceof

instanceof 用于判斷一個(gè)對(duì)象是否是另一個(gè)對(duì)象的實(shí)例（該方法在原型鏈中依然有效）

注：instance 為例子，實(shí)例的意思

console.log(person1 instanceof Person);//true
console.log(person2 instanceof Person);//true
var arr = new Array();
console.log(arr instanceof Array);//true

2、prototype

每個(gè)函數(shù)都有一個(gè)prototype屬性（只有函數(shù)才有）
　　函數(shù)的 prototype屬性指向了該構(gòu)造函數(shù)創(chuàng)建的實(shí)例的原型（是實(shí)例的原型，而不是函數(shù)的原型）。

3、constructor

默認(rèn)情況下，所以原型對(duì)象都會(huì)自動(dòng)獲得一個(gè)constructor（構(gòu)造器）屬性，這個(gè)屬性指向構(gòu)造函數(shù)。

原型是什么？
每一個(gè)對(duì)象都有一個(gè)與之關(guān)聯(lián)的'原型’對(duì)象，每一個(gè)對(duì)象都會(huì)從原型繼承屬性

如何訪問對(duì)象的原型？
在ECMA中，并沒有規(guī)定直接訪問對(duì)象原型的方法，但 Firefox/Chrome/safari 在每一個(gè)對(duì)象上都有一個(gè)proto屬性來訪問原型對(duì)象。

4、_proto__

console.log(Person.prototype);
console.log(person);
console.log(person.__proto__);

__proto__存在于實(shí)例與構(gòu)造函數(shù)的原型對(duì)象之間，而不是存在于實(shí)例與構(gòu)造函數(shù)之間

  • 小結(jié)
  • 構(gòu)造函數(shù)的prototype屬性和實(shí)例的proto指向構(gòu)造函數(shù)的原型
  • 構(gòu)造函數(shù)原型的constructor（構(gòu)造器）指向該構(gòu)造函數(shù)
原型.PNG

5、isPrototypeOf

可通過object1.isPrototypeOf(object2)來判斷一個(gè)對(duì)象是否存在于另一個(gè)對(duì)象的原型鏈中，即 object1 是否存在于 object2的原型鏈中。換句話講：判斷 object2是否有一個(gè)指針指向 object1。

Person.prototype.isPrototypeOf(person1);//true
Person.prototype.isPrototypeOf(person2);//true

6、getPrototypeOf（ES5）

返回一個(gè)對(duì)象的原型

一些判斷：

person.__proto__ === Person.prototype;//true
person.__proto__.constructor === Person.prototype.constructor;//true
person1.__proto__ === person2.__proto__;//true
person1.say === person2.say;//true
Object.getPrototypeOf(person1) === Object.getPrototypeOf(person2);//true
Object.getPrototypeOf(person1) === Person.prototype;//true

7、hasOwnProperty

通過hasOwnProperty(propertyName)來檢測一個(gè)屬性是存在于實(shí)例還是原型中

console.log(person1.hasOwnProperty("name"));//false;
person1.name = "newName";
console.log(person1.hasOwnProperty("name"));//true

8、in

通過in關(guān)鍵字可以判斷某個(gè)對(duì)象是否包含某個(gè)屬性，而不管這個(gè)屬性是屬于實(shí)例還是原型

console.log("name" in person1);//true;
person1.name = "newName";
console.log("name" in person1);//true

通過 hasOwnProperty() 與 in 相結(jié)合，可精確定位一個(gè)屬性是屬于原型還是實(shí)例

8、keys(obj) ES5

keys(object)方法可返回對(duì)象所有可枚舉屬性的字符串?dāng)?shù)組

console.log(Object.keys(person1));//[]
person1.name = "newName";
console.log(Object.keys(person1));//["name"]
console.log(Object.keys(Person.prototype));//[ 'name', 'age', 'say' ]

keys()返回的是該對(duì)象的屬性數(shù)組，并不包含其構(gòu)造函數(shù)上的屬性

繼承部分

1、原型鏈?zhǔn)嚼^承

讓一個(gè)函數(shù)的原型對(duì)象(funtion.prototype)指向另一個(gè)原型的指針(實(shí)例.__ proto__)，而另一個(gè)原型中也包含指向另外一個(gè)構(gòu)造函數(shù)的指針，依此層層嵌套，形成原型鏈

function Animal() {
    this.topType = "脊椎動(dòng)物";
}
Animal.prototype.getTopType = function(){
    return this.topType;
}
function Person() {
    this.secondType = "人類";
}

Person.prototype = new Animal();
Person.prototype.getSecondType = function(){
    return this.secondType;
}
var person = new Person();
console.log(person.topType+"--"+person.secondType);//脊椎動(dòng)物--人類

在上面的例子中，Person.prototype=new Animal() 即是將 Animal 實(shí)例賦給了 Person.prototype

結(jié)合前面原型中的講解，new Animal 產(chǎn)生一個(gè) Animal 實(shí)例，該實(shí)例對(duì)象有一個(gè)_proto_指向其構(gòu)造函數(shù)的prototype，將該實(shí)例賦值給 Person 的原型，意味著Person的原型 既擁有了 Animal 的所有實(shí)例屬性或方法，還包含了一個(gè)指向 Animal的原型的指針。

缺點(diǎn)

1.引用數(shù)據(jù)類型問題

在JS面向?qū)ο笠还?jié)中，我們曾經(jīng)嘗試將引用數(shù)據(jù)類型賦值給原型的屬性（參見創(chuàng)建對(duì)象一節(jié)的原型模式），結(jié)果出現(xiàn)實(shí)例間相互影響，在原型繼承時(shí)，也會(huì)出現(xiàn)此問題，觀察下例：

function Person(){
  this.desc = ["北京"];
}
function Student(){}
Student.prototype = new Person();
var s1 = new Student();
var s2 = new Student();
s1.desc.push("昌平");
console.log(s1.desc);//[ '北京', '昌平' ]
console.log(s2.desc);//[ '北京', '昌平' ]

Person 函數(shù)含有一個(gè)desc 屬性，則 Person的實(shí)例會(huì)包含各自的一個(gè) desc 屬性。但此時(shí)的 Student 通過原型鏈繼承了 Person，Student 的 prototype 則變成了 Person 的一個(gè)實(shí)例，則 Student 就擁有了一個(gè) desc 屬性，相當(dāng)于使用 Student.prototype.desc=[…]為 Student 添加了這樣一個(gè)原型屬性，結(jié)果顯而易見。

2.傳參問題

通過前面的代碼，會(huì)發(fā)現(xiàn)，在使用原型鏈繼承時(shí)，無法向父級(jí)構(gòu)造函數(shù)傳遞參數(shù)

2、借用構(gòu)造函數(shù)式繼承

通過使用 call 或 apply 來實(shí)現(xiàn)借用式繼承

call 或 apply ：更改函數(shù)執(zhí)行的上下文環(huán)境

function Person(name){
  this.name = name;
}
function Student(name){
  Person.call(this,name);
}
var student = new Student("zhar");
console.log(student.name);//zhar

上面的代碼中，使用了 call，在 Student 的實(shí)例環(huán)境中調(diào)用了 Person 構(gòu)造函數(shù)，更改了 Person 的 this 指向?yàn)楫?dāng)前實(shí)例環(huán)境，最終 Student的實(shí)例就擁有了 name 屬性

優(yōu)勢

可以在調(diào)用構(gòu)造函數(shù)時(shí)，向'父級(jí)'傳遞參數(shù)，如上例中一樣，在調(diào)用 Person 時(shí)傳入了 name 值

劣勢

無法繼承原型屬性或方法

function Person(name){
  this.name = name;
}
Person.prototype.say = function(){
  console.log(this.name);
}
function Student(name){
  Person.call(this,name);
}
var student = new Student("zhar");
console.log(student.name);//zhar
student.say();//報(bào)錯(cuò)  student.say is not a function

3、組合繼承

將原型鏈?zhǔn)嚼^承與借用構(gòu)造函數(shù)式繼承組合在一起，結(jié)合二者的優(yōu)勢。通過原型鏈實(shí)現(xiàn)對(duì)原型屬性或方法的繼承，通過借用構(gòu)造函數(shù)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。

function Person(name){
  this.name = name;
}
Person.prototype.say = function(){
  console.log(this.name);
}
function Student(name){
  Person.call(this,name);
}
Student.prototype = new Person();
var student = new Student("zhar");
console.log(student.name);//zhar
student.say();//zhar
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容