js原型 原型鏈以及原型繼承簡單闡述

2021-10-22 18:55:43 字數 2370 閱讀 3648

原型是物件資料型別所有,原型又分為顯式原型隱式原型

// 語法糖形式

class

person

getname()

getage()

}const person =

newperson

('張三',18

);person.

getname()

;// 張三

person.

getage()

;// 18

// 建構函式形式

function

person

(name, age)

person.prototype.getname = getname;

// 這種寫法是為了記憶體空間優化,懂得人都懂

person.prototype.getage = getage;

function

getname()

function

getage()

const person =

newperson

('張三',18

);person.

getname()

;// 張三

person.

getage()

;// 18

我們看到上面兩種方式都是建立了乙個person物件(乙個是類,乙個是建構函式),物件初始狀態下都含有乙個prototype屬性,將person.prototype稱之為顯式原型,其屬性值所指向的是乙個空的object實列物件,預設新增兩個屬性(constructor__proto__),constructor指向物件本身,__proto__指向object.prototypeperson物件的例項person,其含有乙個__proto__屬性,將person.__proto__稱之為隱式原型,注意因為瀏覽器和移動端的相容性,要想獲取乙個物件的隱式原型,是不能通過.__proto__獲取,正確的方式是通過object.getprototypeof()或者reflect.getprototypeof獲取,person.__proto__指向person.prototype

通常我們所說原型鏈其實就是指隱式原型形成,在查詢乙個物件屬性時,比如上述的person物件,我們先從自身查詢,即person.hasownproperty()返回為true的屬性,如果物件自身沒有查到我們要查詢的屬性,我們就會去該物件的隱式原型(__proto__)上去查詢,直到查詢到object.prototype上,因為在object.prototype.__proto__null;上面我們一層一層的去查詢屬性擁有的屬性值,這樣的關係我們對映為是原型鏈這個概念。

乙個物件a可以訪問另乙個物件b屬性,並且是通過__proto__去訪問的,那麼這種方式a繼承b,我們稱之為原型繼承;我們可以通過一些官方所給的api去快速實現原型繼承

// 方式一:

const b =

;const a = object.

create

(b);

console.

log(a.name)

;// 張曼玉

console.

log(a.age)

;// 18

// 方式二:

const b =

;object.

setprototypeof

(a, b)

;// or reflect.setprototypeof(a, b);

原型繼承在一定程度上可以防止乙個物件的屬性被汙染,比如a物件新增屬性不會汙染到b物件的屬性;

JS 原型以及原型鏈

原型煉圖 點選此處放大 原型物件 無論什麼時,只要建立乙個新函式,就會根據一組特定的規則為該函式建立乙個 prototype 屬性 這個屬性指向該函式的原型物件。預設情況下,所有原型物件都會自動獲得乙個 constructor 建構函式 屬性,這個屬性包含乙個指向 prototype 屬性所在函式的...

js原型物件 原型鏈 繼承

原型物件 只要建立了乙個新函式,就會根據一些特定的規則為該函式建立乙個prototype屬性,這個屬性指向的物件就是該新函式的原型物件。預設情況下,所有原型物件都會自動獲取乙個constructor屬性,這個屬性是乙個指向prototype屬性所在函式的指標 原型物件的優點 可以讓所有物件例項共享它...

原型 原型鏈 繼承

原型 是function物件的乙個屬性,它定義了建構函式 製造出的物件 的公共祖先。通過該建構函式產生的物件,可以繼承該原型的屬性和方法。原型也是物件 這定義有點模糊,用 解釋一下 我們在控制台中列印出了這個,首先son物件的建構函式是foo,但是我們的foo中什麼屬性都沒有,怎麼會出現乙個 pro...