關(guān)于js原型鏈的問題,網(wǎng)上的文章有很多,但是大多數(shù)對于初學者來說晦澀難懂。沒有結(jié)合實例,看起來總是沒有什么概念,以下是我結(jié)合一個簡單的例子,繪出的原型圖,如有不對,歡迎指正。
代碼
代碼很簡單,一個構(gòu)造函數(shù),一個通過構(gòu)造函數(shù)new出來的對象實例,一個直接new的出來對象,和一個函數(shù)體
function A(){
this.c=3;
this.d=4;
}
var a = new A();
var b = new Object();
var c = function () {console.log('c')}
我們來研究一下他們的原型(下圖是以瀏覽器中測試結(jié)果為依據(jù)繪出)
原型圖
藍色線條為對象查找屬性的原型鏈路徑,我們可以看到,不管是函數(shù)還是對象,最終都都集中到了Object.prototype上。說明我們一但在object.prototype上增加一個屬性,那么下面所有的對象都能查到該屬性
Object.prototype.test = 666
A.test //666
a.test //666
b.test //666
c.test //666
同理如果在構(gòu)造函數(shù)A上增加一個方法,那么實例a,就會具有這個方法。
這種寫法我們會經(jīng)??吹健@缃ovue增加一個全局方法可以這么寫
Vue.prototype.$http = axios
從圖上我們可以看出函數(shù)和普通對象的區(qū)別,普通對象是通過__proto__查找原型鏈,而函數(shù)是通過prototype查找