js難點精解 原型和原型鏈的關係和應用

2021-08-14 13:11:34 字數 2545 閱讀 6637

首先,要明確,在js中:

1、每個函式物件都有乙個 prototype屬性,我們稱之為原型屬性

2、每個物件都有乙個 __proto__ 屬性,(其實是指向他建構函式的原型) 3

、所有的原型物件都有

constructor

屬性,該屬性對應建立所有指向該原型的例項的建構函式

4、函式物件和原型物件通過

prototype

和constructor

屬性進行相互關聯

.在js中,「萬物皆物件」,函式物件也是物件的一種。

對於新手來說,最難理解的就是prototype 和 __proto__ 之間的關係。

先看區別:(盜個個人覺得還不錯的圖)

看如下demo:

function

person()

varwill

=new

person()

它所對應的的原型圖如下:

原型**析:

1、  我們建立了乙個 函式物件 叫做  person,這個物件有 __proto__ 和 prototype屬性

2、  person.prototype 是該函式的原型物件,該物件有 constructor 屬性指向原函式物件,和__proto__指向 他原函式物件的 「父」 函式的原型物件,即object.protytype.

3、  我們知道js中所有的物件都是繼承自  object,就是圖中 的 function object,該物件為 最頂級函式物件,所有的物件的__proto__屬性最終都指向了該物件的原型物件。即object.prototype

4、  另外所有的函式物件都是繼承自   function的原型,object也是乙個函式物件,所以object.__protu__ === function.prototype. 也是指向了 function的原型

5、  對於function 函式物件,他和所有其他函式物件一樣有個__proto__指向了 function.prototype,  而function的原型中有constructor屬性指向 function物件。即 function.__proto__ === function.prototype. function === function.prototype.constructor

6、  同樣在 頂級物件object 的原型屬性中也有 constructor屬性指向 頂級物件本身。即  object === object.prototype.constructor.

7、  再看persopn函式物件,person有個一 __proto__指向 function的原型,有個prototype屬性指向了 他自己的原型。在person的原型中,有 constructor屬性指向 person,有__proto__屬性指向了object的原型,即 person === person.prototype.constructor。 person.__proto__ === function.prototype

8、  最後看一下通過person建立的will物件。這個物件 有乙個 __proto__屬性指向它建構函式的原型。即will.__proto__ === person.prototype

(ps: 以上說的可能有點囉嗦,但是需要你每一句都精度完之後,就應該能理解物件的原型和原型鏈,以及js中的繼承關係)

vara

=function

(){};

vara =

newa

();

console

.log

(a.__proto__);

//a {}

(即構造器

function a

的原型物件)

console

.log

(a.__proto__.__proto__);

//object {}

(即構造器

function object

的原型物件)

console

.log

(a.__proto__.__proto__.__proto__);

//null

上述**的繼承關係如下圖:

補充:瀏覽器查詢js物件中的屬性的順序:

a、查詢本物件中可列舉的屬性,有的話就返回,沒有的話執行b

b、再去查詢父 __proto__,從父元素繼承的屬性中可列舉的屬性,有的話就返回,沒有的話執行c

c、父物件的原型中也沒有物件的屬性的話,繼續找找父元素的__proto__,查詢父元素從父父元素(父元素的父元素)的可列舉屬性,有的話就返回,沒有的話繼續按照繼承原型鏈向上查詢,直到頂級物件 object

d、如果頂級物件object中的可列舉屬性中有該屬性的話就返回,沒有的話就返回undefined

JS原型和原型鏈

建立建構函式 function word words word.prototype 建立例項 var w new word hello world w.print function w.print hello world w.alert hello world function.prototype....

js原型鏈和原型

1 原型 在js中一切皆物件,那原型也是乙個物件,通過原型可以實現物件的屬性繼承,js的物件中包含著乙個 prototype 內部屬性,這個屬性所對應的就是物件的原型。prototype 作為物件的內部屬性不能被直接訪問,所以為了方便檢視乙個物件的原型,提供了 proto 這個非標準的訪問器,在js...

JS 原型和原型鏈

先宣告乙個建構函式 function people name,age 把類的方法寫在建構函式原型物件中,子類就不能再通過呼叫父類建構函式來繼承方法 屬性還是可以繼承 給people的原型新增方法 people.prototype.speak function 建立子類繼承people functio...