原型部分
簡單創(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ù)
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é)中,我們?cè)?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