原型鏈 JS中的原型鏈到底是什麼

js中的建構函式和普通函式沒有本質區別，要用呼叫方式的不同來區分。

在呼叫建構函式時要用new func（）的方法來呼叫，此時函式會預設返回this

為了與普通函式區分，建構函式的函式名一般以大寫字母開頭。

function
person
(name,age)
var xiaoming=
person
('xiaoming',20
);//錯誤呼叫，xiaoming為undefined
var xiaoming=
newperson
('xiaoming',20
)//正確呼叫，xiaoming是乙個物件
xiaoming.constructor===person//true

注意，任何物件都有建構函式，直接用大括號宣告的物件其建構函式就是object

var a=
a.constructor===object//true

通過乙個建構函式，我們就可以創造出很多不同的物件，有時這些物件需要公共的方法，最簡單的方式是將方法直接放在建構函式中，但這樣會造成記憶體的浪費：

function
person
(name,age)
}var xiaoming=
newperson
('xiaoming',20
);var xiaogang=
newperson
('xiaogang',20
);xiaoming.sayhi===xiaogang.sayhi//false,兩個物件的公共函式不是用的同乙份**

什麼是原型物件？

js中的所有物件，不管是用建構函式的方法建立的，還是直接用大括號建立的

都有乙個_proto_ 屬性指向它的原型物件，該原型物件有乙個constructor屬性指向它的例項物件的建構函式

有乙個constructor屬性指向它的建構函式，該建構函式有乙個prototype屬性指向它的原型物件

有點繞，畫成圖就是這個樣子，從圖中可以看出上面所說的各個屬性的取值

再用**來表示

function
person
(name,age)
var xiaoming=
newperson
('xiaoming',20
)//xiaoming.constructor===person
//true，例項物件的constructor屬性指向建構函式
person===xiaoming.__proto__.constructor
//true，原型物件的constructor屬性指向建構函式
xiaoming.__proto__===person.prototyp;
//true，建構函式的prototype屬性和例項物件的__proto__屬性都只想原型物件
var xiaohong=
newperson
('xiaohong',20
)xiaohong.__proto__===xiaoming.__proto__;
//true，不同例項物件的原型物件是同乙個

由此得出，xiaoming.__proto__屬性和person.prototype屬性所指向的，就是由建構函式person建立出的所有物件所共有的原型物件，那麼只要將公共方法作為這個原型物件的方法，就可以實現乙個方法供不同的例項物件呼叫

person.prototype.
sayhi
=function()
xiaoming.
sayhi()
//hi,i'm xiaoming
xiaohong.
sayhi()
//hi,i'm xiaohong
xiaoming.sayhi===xiaohong.sayhi///true，是同乙個函式

現在我們知道，xiaoming的_proto_屬性指向它的原型物件，而事實上，它的原型物件也有_proto__屬性，指向它的原型物件

xiaoming.__proto__.__proto__//object xiaoming.__proto__.__proto__.__proto__//null

xiaoming.__proto__.__proto__.__proto__.__proto__//出錯，null沒有原型物件，也就沒有__proto__屬性

像這樣，乙個個的物件和原型物件串在一起，以例項物件為起點，以沒有原型物件的null為終點，就組成了原型鏈。

上面我們將sayhi方法繫結到xiaoming的原型物件上，並且物件xiaoming可以呼叫該函式，那麼是不是說sayhi是xiaoming自身的屬性呢？我們用hasownproperty()方法來檢驗一下

xiaoming.
hasownproperty
('sayhi'
)//false
xiaoming.
hasownproperty
('sayhi'
)//true

可見，在建構函式內定義的函式sayhi是xiaoming自身的屬性，而定義在原型物件上的函式sayhi則不是，那麼為什麼xiaoming可以呼叫該方法呢？

這是因為在js中，呼叫乙個物件的屬性時，如果該物件自身沒有這個屬性，那麼就會自動在它的原型物件上找，若還沒有則順著原型鏈往上找，若直到某一原型物件的原型物件為null，仍未找到，則會返回錯誤。也就是說，物件會繼承其原型物件的屬性

物件都有建構函式，或是預設建構函式，或是自己寫的建構函式

例項物件的__proto__屬性指向其原型物件，constructor屬性指向建構函式

建構函式的prototype屬性指向原型物件，原型物件的constructor屬性指向建構函式

例項物件->原型物件->原型物件的原型物件->…->null組成了原型鏈，物件會繼承原型鏈上所有原型物件的屬性

查詢某一物件的某一屬性時，若該物件自身沒有該屬性則會順著原型鏈往上找，直到原型鏈的末尾

原型鏈 JS中的原型鏈到底是什麼

原型鏈是什麼

js中的原型及原型鏈

JS中的原型及原型鏈

原型鏈 JS中的原型鏈到底是什麼

原型鏈是什麼

js中的原型及原型鏈

JS中的原型及原型鏈

相關推薦