1、什么是原型戒良,原型鏈?
參照《javascript權(quán)威教程》原型的解釋為:每一個(gè)對象(除null外)都有另一個(gè)對象與之相關(guān)聯(lián),這個(gè)另一個(gè)對象便稱之為“原型”(prototype)萨螺,每個(gè)對象都是從原型繼承屬性。原型鏈?zhǔn)侵?strong>一系列鏈接的原型對象的鏈稱為“原型鏈”(prototype chain)愧驱。
從上面的描述我們可以得到幾點(diǎn):
1慰技、原型也是一個(gè)對象
2、對象通過原型鏈的方式實(shí)現(xiàn)了相關(guān)聯(lián)(即我們常稱作原型鏈的方式實(shí)現(xiàn)了繼承)
2组砚、實(shí)例說明
1吻商、首先定義一個(gè)構(gòu)造函數(shù)Person,然后對這個(gè)構(gòu)造函數(shù)實(shí)例化了一個(gè)對象person1糟红。( Person稱為person1的原型艾帐, person1稱為Person實(shí)例)
- 注: 每個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性,該prototype屬性指向一個(gè)prototype對象改化,而這個(gè)prototype對象中保存著構(gòu)造函數(shù)的原型屬性和一個(gè)constructor屬性掩蛤,該constructor屬性又指向了構(gòu)造函數(shù)Person本身,
以Person為例陈肛,person.prototype對象如下圖所示
ps:其中__proto__是瀏覽器提供的訪問其原型對象的屬性(每個(gè)對象都具有)揍鸟,后續(xù)會介紹。
對于第5行代碼new的過程可分為三步理解
1句旱、實(shí)例化一個(gè)空的person1對象:var person1= {}阳藻;(則person1具有__proto__屬性)
2、將person1.__proto__屬性指向了其構(gòu)造函數(shù)Person的prototype屬性(即prototype對象) 等同于 person1.__proto__=Person.prototype
3谈撒、構(gòu)造函數(shù)類似于調(diào)用call或apply方法 Person.call(person1腥泥,“張三”)改變了Person中this指向,使其指向了person1啃匿,最后返回person1蛔外。
通過以上分析我們可以明白person通過其__proto__屬性指向了Person的prototype屬性,而person1.prototype又保存著構(gòu)造函數(shù)的原型屬性和一個(gè)constructor屬性(指向了構(gòu)造函數(shù)本身)溯乒,這樣我們實(shí)現(xiàn)了person1對Person的繼承夹厌。
console.log("person1.name") //輸出張三;
console.log("person2.name") //輸出李四裆悄;
person1和person2是兩個(gè)相互不同的實(shí)例矛纹,相互不影響。
3光稼、屬性的查找方式總是基于原型鏈向上尋找
1或南、對上面代碼進(jìn)行擴(kuò)充孩等,我們對構(gòu)造函數(shù)Person增加原型屬性sex,
2采够、第8肄方、9行代碼,對于兩個(gè)實(shí)例person1吁恍、person2由于其并沒有sex屬性扒秸,所以向上查找其原型Person的sex屬性,輸出為都女冀瓦;
3、執(zhí)行完第10行写烤,給person1添加了sex屬性翼闽,輸出person1.sex(查找到自身具有了sex屬性,不在向上查找其原型對象的屬性洲炊,輸出本身sex屬性 男)感局,而person2依然沒有sex屬性,繼續(xù)查找其原型對象的屬性暂衡,輸出女
4询微,執(zhí)行13行代碼,刪除person1.sex是刪除了其本身的sex屬性狂巢,所以再次輸出person1.sex和person2.sex都將查找原型屬性撑毛,都輸出女。
4唧领、加深理解constructor藻雌,protototype,__proto__斩个,constructor.prototype屬性
- 構(gòu)造函數(shù)的prototype屬性指向prototype對象胯杭,該prototype對象中constructor屬性指向構(gòu)造函數(shù)本身
- 對于每個(gè)實(shí)例化的對象,無prototype屬性受啥,但是瀏覽器提供了__proto__來訪問原型
- 實(shí)例化對象的constructor指向其構(gòu)造函數(shù)
- obj instanceof Object 判斷obj是否在Object的原型鏈上
-
Object.getPrototypeof(obj)判斷obj的原型對象
image.png