1. 程式人生 > >淺談對js原型鏈的理解

淺談對js原型鏈的理解

最近重新學習了一下JS原型鏈的知識,為了避免之後自己再忘記,在此記錄下自己對原型鏈的理解,歡迎大家一起討論交流
js中的物件分為函式物件與普通物件,函式物件有prototype與__proto__,普通物件只有__proto__,那麼怎麼區分這兩種物件呢?

var f = function(){} //f為函式物件
var o = new f() //o 為普通物件

這裡涉及兩個屬性 prototype與__proto__,概念如下
_proto_:指向物件構造的指標
prototype:物件的原型
當時看到這兩個解釋的我也是一臉懵逼,舉個簡單的例子說明一下這兩個屬性之間的關係

var Person=function(name){
  this.name=name;
};
var person1 = new Person('gavin');

根據概念我們可以知道 Person是一個函式物件,person1是一個普通物件
person1 是 Person的例項化,此時person1的_proto_屬性(物件構造的指標)指向了Person的prototype(物件的原型),
而Person.prototype.constructor(構造器)指向Person()本身。
可以總結為Person()這個建構函式建立了person1例項,此時Person中定義的屬性,person1一樣具有。
person1的_proto_屬性指向了Person的prototype,根據原型鏈的規則,一個屬性在當前物件找不到,
會順著他的_proto_屬性繼續往上找,故Person.prototype中的屬性,person1一樣具有。
到此你應該對原型鏈有了初步的理解,下圖是經典的原型鏈關係圖:

根據上述規則,我們可以得出圖中物件的關係:
var f1 = new Foo() ,f1的_proto_指向Foo.prototype
Foo.prototype.constructor指向建構函式Foo(),f1即Foo()的例項化
當我們定義函式時:

function Foo(){} //等同於 var Foo = new Function()

此處的 Function是js內建的物件,Function沒有prototype,但有_proto_指向Object,
Object是所有類的基類,所以原型鏈最後都會走到Object.prototype,Object.prototype是終點,所以Object.prototype._proto_為null