最近在學(xué)習(xí)JavaScript的面向?qū)ο?,被constructor,prototype和_proto_搞到頭大,但還好,磕磕絆碰碰,終于了解了一點原型繼承。接下來我們來看看這個原型繼承是怎么回事
一、關(guān)于原型的幾個概念
- prototype屬性
- _proto_屬性
- constructor屬性
他們直觀的關(guān)系是:
function/
|——prototype/
|—— constructor
|—— __proto__
prototype屬性
任何一個函數(shù)都存在著這樣的一個prototype屬性,這個屬性是一個對象,稱為原型對象。這個原型對象里有自函數(shù)一創(chuàng)建就生成的兩個屬性一個是constructor和 _proto_,除此之外我們可以給這個對象添加屬性和方法,就像給一個普通對象動態(tài)添加屬性和方法那樣
example:
//創(chuàng)建基類(或叫超類或叫父類)
function Person(){};
Person.prototype.name = 'kuohao';
Person.prototype.age = 21;
Person.prototype.method = function (){
return this.name +':'+ this.age;
}
//給Person構(gòu)造函數(shù)的原型對象添加一些屬性和方法
//(為什么說它是構(gòu)造函數(shù)呢,因為需要用來構(gòu)造對象,實際上跟普通函數(shù)一樣)
現(xiàn)在原型對象就多了兩個屬性和一個方法
Person/
|——prototype/
|—— constructor
|—— __proto__
|——name:'kuhao'
|——age:21
|——method:function(){
return……
?。?
這個原型對象有啥用???
請看——
//實例化
var guy1 = new Person();
var guy2 = new Person();
console.log(guy1.name); //'kuohao'
console.log(guy2.name); //'kuohao'
guy1.method() //'kuohao':21
guy2.method() //'kuohao':21
我們沒有給他們定義屬性和方法,他們繼承了Person構(gòu)造函數(shù)原型對象里面的屬性和方法,注意我們也沒給Person構(gòu)造函數(shù)定義屬性和方法噢
咋一看,跟構(gòu)造函數(shù)和工廠模式差不多,他們都生成擁有相同屬性和方法的對象。但是原型對象生成的對象有一個很重要的特點就是他們共用一個原型對象的屬性和方法。
為什么這么說呢?
使用布爾運算來驗證一下就知道了
guy1.method()===guy2.method; //true
如果是構(gòu)造函數(shù)生成的對象,他們的方法都不相等,原因就是構(gòu)造函數(shù)生成的對象有不同的引用的地址,而構(gòu)造函數(shù)的原型繼承方法生成的對象指向了同一個引用地址,他們的對象都使用這個引用地址的屬性和方法,所以他們的方法是相等的,對于生成的對象的new方法,在另外一篇文章會講到。
_proto_屬性
這是相當(dāng)重要的一個屬性,但是它不是標(biāo)準(zhǔn)屬性,在標(biāo)準(zhǔn)中,它是不對外開放的,當(dāng)時chrome和Firefox的私有屬性中對外暴露了它,使得我們可以比較清楚了了解原型繼承的過程。
_proto_這個屬性可以讓我們訪問創(chuàng)建當(dāng)前對象的構(gòu)造函數(shù)的prototype原型對象。那么當(dāng)我們調(diào)用guy1.method()方法的時候,其實是這樣的:
- 當(dāng)js解析器解析guy1.method()的時候,先看看guy1對象實例里有沒有method這個方法
js解析器問:"喂,哥們,你的method方法呢?"
guy1說:"這個方法是我老爸的,不在我這里"
js解析器問:“怎么找到你老爸?”
guy1指著_proto_說:“這里有道門,你進去就可以找到他了”
2.然后js解析器就又跑去找他老豆,找到他老豆后
問:“喂喂,你兒子叫我來找method方法,在哪?”
guy1的老豆Person就拿出一個箱子(prototype),說:“method方法就在里面,你拿去吧!”
如果Person父類還是沒找到method方法的話,實際上它的prototype對象也有一個_proto_屬性,可以訪問guy1的爺爺類的prototype對象,找到method方法。
所以,這個查找是一環(huán)接一環(huán)的,就像遞歸一樣。
![原型鏈,圖片來自慕課網(wǎng)].PNG](http://upload-images.jianshu.io/upload_images/1577855-21c757167154f75a.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
constructor屬性
constructor屬性指向的是創(chuàng)建此對象的構(gòu)造函數(shù)的引用,這個屬性存在prototype原型對象中,構(gòu)造函數(shù)的對象實例也可以通過constructor屬性來訪問構(gòu)造它的那個函數(shù)。
這個屬性對于原型繼承的實現(xiàn)來說,不是很重要。
二、原型繼承的實現(xiàn)
//父類
function Person(){};
Person.prototype.method = function (){
return 'hello';
}
//子類
function Child(){};
Child.prototype = Object.create(Person.prototype);
Child.prototype.constructor = Child;
Child.prototype.say = function (){
return 'hello world';
}
var c1 = new Child();
c1.method(); //'hello'
c1.say(); //'hello world'
//由此可見子類繼承了父類的方法,也擁有自己的方法
Object.create()方法
Object.create()方法是ES5的一個用來創(chuàng)建一個指定原型和若干指定屬性的對象的方法。
定義來自 Mozilla開發(fā)者文檔
Child.prototype = Object.create(Person.prototye);
這句話的含義就是創(chuàng)建一個以Person原型對象為原型的空對象,賦值給Child的prototype原型對象.
Object.create(Person.prototye),相當(dāng)與創(chuàng)建了這樣一個對象:
{
constructor
//指向Person構(gòu)造函數(shù),這就是為什么上面要把這個屬性指回Child的原因
__proto__
//指向Person.prototype,上面說到原型鏈繼承正是通過這個屬性層層查找實現(xiàn)的
}
將這個對象去覆蓋Child子類的prototype,這就成功與Person父類搭上了關(guān)系再此之前,Person與Child沒任何關(guān)系。
但是Object.create()這個方法是新方法,低級的瀏覽器,如IE9以下不支持,需要做一下兼容處理
examle:
function createObejct(o){
if(!Object.create){
//新建一個構(gòu)造函數(shù),用來做臨時對象
function a(){};
//把原型對象參數(shù)賦給這個空對象的原型對象
a.prototype = o;
return new a();
//實例化一個出來一個原型對象指向原型對象參數(shù)的空對象,返回給上下文
}else{
return Object.create(o);
//直接使用
}
}
Object.create的一些替代方法
- 直接將Person.prototype賦值給Child.prototype
Child.prototype = Person.prototype
這樣Person和Child就共用一個原型對象,他們的屬性和方法都是一樣的,但是這個就有問題了,如果Child類想擴展自己的屬性和方法,那么Person類也會受到影響。
這里要注意的是賦一個原型對象為Person.prototype的空對象(上面的方法)跟賦一個Person.prototype是不一樣的。
前者Child.prototype指向空對象的引用再由空對象中的_proto_\指向Person.prototype,后者Child.prototype直接指向Person.prototype引用,后續(xù)的修改在都Person.prototype上,因為他們共用一個原型對象。
所以這個方法是非常不可取的,跟面向?qū)ο蟮亩鄳B(tài)特性相悖
2.new 一個Person的對象實例賦給Child的原型對象
Child.prototype = new Person()
這貌似是一個不錯的方法,但是它也有弊端,就是事實上我們常常不會使用一個空的構(gòu)造函數(shù),來實例化對象,我們往往會將構(gòu)造函數(shù)繼承和原型繼承結(jié)合在一起,所以我們的構(gòu)造函數(shù)往往會有一些實例屬性和實例方法,如果new Person()出來一個實例對象,對象里面還夾帶著一些實例屬性和方法,這看起來非常怪,雖然也是一個指向Person.prototype的對象。所以這種方法也不推薦使用,應(yīng)該使用 Object.create() 較為妥當(dāng).
總結(jié):
我個人覺得實現(xiàn)原型繼承最重要就是兩個屬性的理解,prototype原型對象和_proto_這個接口的概念的理解,再結(jié)合原型鏈層層查找這種繼承方式的直觀感知,就能比較好地掌握原型式繼承。我也是這兩天才理解的原型鏈?zhǔn)嚼^承,如果有所繆誤,請批評指正!