js javascript 原型鏈詳解
看了許多大神的博文,才少許明白了js 中原型鏈的概念,下面給大家淺談一下,順便也是為了鞏固自己
首先看原(yuan)型(xing)鏈之前先來了解(jie)一(yi)下(xia)new關鍵字(zi)的(de)作用,在(zai)(zai)許多高級語(yu)言中,new是必(bi)不(bu)可(ke)少的(de)關鍵字(zi),其作用是為了產生一(yi)個類的(de)實(shi)例對象,然后利用對象來進行操作,當(dang)然,在(zai)(zai)js身(shen)上也有(you)高級語(yu)言的(de)一(yi)些影子,它也配套了new的(de)關鍵字(zi)下(xia)面看一(yi)下(xia)代碼
//聲明一個類
function Person(name){
this name = name;
}
//創建一個Person的實例zzh
var zzh = new Person("zzh");
這里出現了new 的關鍵字,現在看起來,和高級語言中的new 沒什么太大的區別,下面我們看一下new關鍵字其實做了哪些工作
其實總的來說,js 里的new 就只做了三步工作:
1、先讓(rang)上面的(de)zzh變量指向堆里的(de)一(yi)個空對象(xiang)
var zzh = {};
2、讓zzh指向(xiang)(xiang)的(de)這個對象的(de)_proto_屬(shu)性去指向(xiang)(xiang)Person類的(de)prototype屬(shu)性所指向(xiang)(xiang)的(de)對象
zzh._proto_ = Person.prototype;
3、最后(hou)讓zzh來(lai)執行Person的方(fang)法
Person.call(zzh);
是不是有點繞,沒關系,我們來看一下這個流程圖,凡事都要用圖來說話嘛

這樣看上去是不是清晰了很多,其實new涉及的正是我們今天要談的原型鏈繼承
下面我們來看一下原型鏈
什么是原型鏈?
看下面這個代碼.
alert(zzh._proto_);//[object Object]
我們可以看到這里它返回了一個對象,而這個對象正是Person.prototype指針指向的那個對象.
如果(guo)這樣還不清楚(chu)那我(wo)們換(huan)種方(fang)式
function Person(name){
this.name = name;
}
Person.prototype.talk = function(){
//
alert("i'm talking");
};
var zzh = new Person("zzh");
zzh.__proto__.talk();//"i'm talking"
我們發現它打印了"i'm talking",這樣就很顯而易見了, 實例的_proto_屬性正是訪問到了Person的prototype所指向的那塊內存
下面大家看一下這個圖

這就是一個原型鏈,而這個鏈的頂端就是null,object的prototype的_proto_指向的是null,所以我們說object的原型對象就是整個原型鏈的頂端
另外:
Function的_proto_指向的是它自己的原(yuan)型
alert(Function._proto_ == Function.prototype);//true
Function的原型的_proto_又指向Object的原型
alert(Function.prototype._proto_ == Object.prototype);//true
而Object的(de)(de)_proto_指向的(de)(de)是(shi)Function的(de)(de)原型(xing)對象
alert(Object._proto_ == Function.prototype);//true
這樣看來就很繞,Function和Object都由Function創建,而Function的原型又由Object的原型創建。
我們說萬事萬物皆對象嘛,所以說Function的原型是一個對象沒有錯
而對象又由函數創建,因為js里的函數既是方法又是該類的構造器,這點也不沖突,所以,這也完全解釋的通。
看一個不怎么繞的圖

我相信看到這里一定就(jiu)對原(yuan)型(xing)鏈有一個(ge)了解了
如果博文中出現什么錯(cuo)誤,來來來,板磚朝這(zhe)拍!
