對JS原型機原型鏈的理解

2021-10-06 22:48:50 字數 3324 閱讀 8260

使用建構函式建立物件

function

person()

var person1 =

newperson()

; person1.name =

'張三'

console.

log(person1.name)

//張三

person就是乙個建構函式,通過new建立了person1物件例項。

其實建構函式和普通函式沒有多大區別,首先字母大寫是約定俗成,不大寫照樣可以。關鍵是呼叫它的方式—通過new關鍵字,那麼這裡又會牽扯到另乙個問題,使用new呼叫後會內部會執行那些操作。

當我們new乙個建構函式,得到的例項繼承了構造器的構造屬性以及原型上的屬性。

主要有三個步驟:

建立乙個空物件,將它的引用賦值給this,繼承函式的原型。

通過this將屬性和方法新增至這個物件。

最後返回this指向的新物件,也就是例項(如果沒有手動返回其他的物件)

相當於以下的這個過程:

let

person

=function

(name,age)

// 2、給this指向的物件賦予構造屬性

this

.name = name;

this

.age = age;

// 3、如果沒有手動返回物件,則預設返回this指向的這個物件,也是隱式的。

// return this

}let person1 =

newperson()

;

在person建構函式下面有乙個prototype屬性。

var

person

=function()

person.prototype.name =

'張三'

;var person1 =

newperson()

;var person2 =

newperson()

; console.

log(person1.name)

;//張三

console.

log(person2.name)

//張三

前面說prototype屬性指向乙個物件,在這裡,prototype指向person.prototype。沒錯,person.prototype就是原型物件,也就是例項person1和person2的原型。

原型物件的好處是可以讓所有物件例項共享它所包含的屬性和方法。

所以總結可得proto就是用來將物件與該物件的原型相連。

這個屬性就是將原型物件指向關聯的建構函式。

function

person()

; person.prototype.constructor === person;

//true

function

person()

;var person1 =

newperson()

; person1.prototype.constructor = person;

//true

在這裡,其實person1例項並沒有constructor屬性,而是通過原型鏈在原型person.prototype上面找到的。

其實原型鏈就是依靠_proto_和prototype連線起來的。

首先來理解一下例項屬性原型屬性

function

person()

person.prototype.name =

'張三'

//原型屬性

var person1 =

newperson()

; person1.name =

'李四'

;//例項屬性

console.

log(person1.name)

;//李四

在上面,原型屬性和例項屬性都有乙個name的屬性,但是最後輸出來的是例項屬性上的值。

這說明:當我們讀取乙個屬性的時候,如果在例項屬性上找到了就讀取它,不用管原型屬性上是否還有相同的屬性,這其實就是屬性遮蔽。即當例項屬性和原型屬性擁有相同名字的時候,例項屬性會遮蔽原型屬性,只是遮蔽不會修改,原型屬性上的那個值還在。

但是如果在例項屬性上沒有找到的話,就會在例項的原型上去找,如果原型上還沒有,就繼續到原型的原型上去找,直到盡頭.z這樣就形成了乙個原型鏈。那麼這個盡頭是什麼呢?

假如在原型物件person.prototype還沒有找到屬性,並不會停止,還會繼續找。原型物件也是物件,所以它也有proto屬性,連線它的原型,原型物件person.prototype的原型就是object.prototype這個大boss。所有原型物件都是object建構函式生成的。

正是因為所有的原型最終都會指向object.prototype,所以物件的很多方法都是繼承於此,比如tostring()、valueof()。那麼object.prototype有原型嗎?

沒有,為null,也就是上面所說的盡頭。

function

person()

var person1 =

newperson()

;// 例項屬性

person1.name =

'j';

console.

log(person1.

hasownproperty

('name'))

;//true

function

person()

person.prototype.age =

'100'

var person1 =

newperson()

; person1.name =

'j' console.

log(

'name'

in person1)

;//true

console.

log(

'age'

in person1)

;//true

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...

對原型和原型鏈的理解

一 原型 所有引用型別都有乙個 proto 隱式原型 屬性,屬性值是乙個普通的物件 所有函式都有乙個prototype 原型 屬性,屬性值是乙個普通的物件 所有引用型別的 proto 屬性指向它建構函式的prototype 二 原型鏈 當訪問乙個物件的某個屬性時,會先在這個物件本身屬性上查詢,如果沒...