快速理解原型鏈

2022-02-09 04:12:49 字數 1476 閱讀 9444

來個例子認識一下:

1

function

person()

4 person.prototype.name = '原型物件上定義的屬性';

5 person.prototype.sayname = function

() 8

9var person1 = new

person();

10 person1.sayname(); //

'原型物件上的方法'

這裡的 person 就是乙個建構函式,和普通的函式是一樣的,只是建構函式要通過new 操作符來使用。

person.prototype 就是原型物件

而person1 就是person的乙個例項。

1)建構函式有乙個原型物件(person.prototype)

2)原型物件包含乙個指向建構函式的指標

1  person.prototype.constructor == person //

true

3)例項包含乙個指向原型物件內部的指標

可以通過 isprototypeof() 方法來確認指向的原型物件

1 console.log(person.prototype.isprototypeof(person1)); //

true

三、原型鏈的形成

基本的實現原理就是強制的讓乙個物件的原型等於另乙個物件的例項。那麼這個物件的原型就擁有了乙個指向另外乙個物件的原型物件的內部指標。

現在我們有兩個物件,物件1 和物件2 ,

我們讓物件2的原型指向物件1 的例項,那麼物件2就包含了物件1 的原型指標,

而物件1的原型物件中又包含著指向建構函式1的指標,

那麼這個時候出現了物件3 , 物件3的原型物件又指向了物件2的例項。好像有點繞,我們來看乙個例子:

1

function typeone()

4 typeone.prototype.gettypeoneval = function()7

8function

typetwo()

11 typetwo.prototype = new

typeone();

//讓物件2的原型指向物件1的例項,這時候物件2的原型上就有了物件1擁有的屬性和方法

13 console.log(typetwo.prototype.gettypeoneval()) //

true

1415

//這時候再例項化 typetwo

1617

var instance = new

typetwo();

18 console.log(instance.gettypeoneval()) //

會在原型鏈上查詢

這就是乙個簡單的原型鏈實現了,當出現第三個物件、第四個物件這樣鏈式的寫下去,原型鏈將會更長。

js 原型 原型鏈理解

執行發現如下 自定義乙個函式,函式包含兩個關鍵資料 prototype,proto 1 原型 prototype person具有prototype屬性 包含我們定義的屬性name,age以及constructor,並且constructor指向我們的person函式,可以理解為prototype就...

理解js原型和原型鏈

一.普通物件和函式物件 js中,萬物皆物件,大體分為兩種 普通物件,函式物件。凡是通過new function 建立的都是函式物件,其他的則為普通物件。下面舉例說明 function fun1 function var fun2 function function var fun3 new func...

原型及原型鏈相關理解

下面是可能用到的知識點 var o1 普通物件 function f1 函式物件 f1.prototype 原型物件 function person name,age,job 每個物件都有 proto 屬性,但只有函式物件才有 prototype 屬性 有constructor才能夠例項化 將per...