深入淺出,JS原型鏈的工作原理

2022-09-18 14:06:11 字數 1608 閱讀 8686

前言:原型鏈,即原型鏈條。它是由原型、原型的原型、原型的原型的原型...這一規則組合成的,經常被應用於繼承。

原型的作用

在js中,每個物件都有自己的原型。當我們訪問物件的屬性和方法時,js會先訪問物件本身的屬性和方法。如果物件本身不包含這些屬性和方法,則訪問物件對應的原型。

function person(name,age);

}//原型上的方法

person.prototype.sayage = function()

var xiaoming = new person("xiaoming",12);

var xiaohong = new person("xiaohong",11);

// 呼叫自身不存在的方法

xiaoming.sayage(); // 12

xiaohong.sayage(); // 11

上述例子中,方法「sayage」是在原型上而非物件中。(關於物件與原型之間更為詳細的內容,可閱讀文章:《**js中的建構函式、原型物件(prototype)、例項中的屬性/方法之間的關係》)

原型鏈的原理

原型自身也是乙個物件(預設情況下所有物件都是object的例項)。

alert(xiaoming instanceof object); // true

alert(person.prototype instanceof object); // true

每個物件都有自己的原型,所以person的原型也有它自己的原型,那就是:object.prototype(部分瀏覽器允許通過例項的「__proto__」屬性訪問其原型)

alert(person.prototype.__proto__ == object.prototype); // true
既然原型是乙個物件,那麼,當我們訪問的屬性和方法在原型不存在,就會繼續訪問原型的原型,直至object.prototype。

function person(name,age);

}person.prototype.sayage = function()

// 在object.prototype增加乙個「自我介紹」的方法

object.prototype.introduce = function()

var xiaoming = new person("xiaoming",12);

// 呼叫物件自身和原型上均不存在的方法

總結

原型鏈是js的乙個特性,它實現的核心機制是:

1、訪問物件的屬性(方法)時,若物件本身不存在該屬性(方法),則會轉向訪問該物件的原型;

2、物件的原型也是乙個物件。訪問的屬性(方法)依舊不存在於該原型,則會繼續訪問該原型的原型...

javascript深入淺出 原型 原型鏈

原型 原型是js中實現繼承的過程中產生的乙個概念 繼承 指在乙個物件的基礎上建立新物件的過程,原型指在這過程中作為基礎的物件。建立物件var o var p object.create o p.a 1 p.b 2 console.log p.f 3 複製 通過object.create 方法我們傳入...

深入淺出理解JS原型鏈繼承

js在es6以前還沒有class的概念,但卻存在著物件導向的思想。在js中,可通過建構函式的形式來建立物件,並使用各種方式實現繼承,其中原型鏈繼承便是一種普遍的方法 先來看乙個例子 function parent function child child.prototype new parent f...

深入淺出責任鏈模式

一 引言初看責任鏈模式,心裡不禁想起了乙個以前聽過的相聲 看牙。說的是乙個病人看牙的時候,醫生不小心把拔下的乙個牙掉進了病人嗓子裡。病人因此樓上樓下的跑了好多科室,最後無果而終。責任鏈模式就是這種 推卸 責任的模式,你的問題在我這裡能解決我就解決,不行就把你推給另乙個物件。至於到底誰解決了這個問題了...