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

2021-08-26 12:21:11 字數 2135 閱讀 7666

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

先來看乙個例子

function parent () 

function child ()

child.prototype = new parent()

for(let i in obj)

// type: obj

// name: zs

// age: 13

**中的parent是乙個建構函式,其中的this在new時會指向當前執行他的物件,也就是parent的例項,child這個建構函式通過prototype屬性指向乙個原型物件,在這裡是new parent(),也就是parent的乙個例項。以上就實現了原型鏈繼承,在這裡你可能會一臉茫然,接下來我會提出幾個問題並進行解釋。

這裡首先引用網上的一句解釋:,this的指向在函式定義的時候是確定不了的,只有函式執行的時候才能確定this到底指向誰實際上this的最終指向的是那個呼叫它的物件。

這裡更精確的說是指向上一級呼叫它的物件。

function test () 

test()

//window

//test

console.log(window.name)

//test

var test = new test()

//test()

//test

js檔案的最外層有乙個預設的window物件,建構函式test通過test()的方式執行,則this指向呼叫它的物件,也就是window(test()等價於window.test())。

當使用var test = new test()的方式建立物件時,this指向呼叫它的物件,也就是test這個例項。

prototype和__proto__都是指向原型物件的乙個屬性。

prototype是建構函式的屬性,指向建構函式的原型物件;__proto__是例項物件的屬性,指向例項物件的原型物件。

這裡又衍生乙個問題,什麼是原型物件?

原型物件是在建構函式建立同時建立的乙個物件,它包含由它建立的所有例項的公共屬性和方法。

也就是說建構函式可以通過prototype獲取這個原型物件,並使用它的屬性和方法。

function parent () 

function child ()

var parent = new parent()

console.log(parent.__proto__)

console.log(parent.prototype)

console.log(parent.prototype.constructor)

child.prototype = new parent()

console.log(child.prototype)

var obj = new child()

console.log(obj.__proto__)

for(let i in obj)

object.keys(obj).foreach(function(item,index) )

object.getownpropertynames(obj).foreach(function(item, index) )

上面的parent和child是建構函式,在建立建構函式的同時建立了原型物件。

parent是parent原型的乙個例項,因此通過parent.__proto__和parent.prototype可以訪問到它們的原型物件。

child.prototype = new parent()使child這個建構函式的原型變為parent的乙個例項。

obj.__proto__也指向child的原型物件。

使用 for...in遍歷物件的屬性,輸出obj原型鏈上的所有屬性

object.keys()和object.getownpropertynames()不會輸出物件繼承來的屬性

也可以使用obj.hasownproperty()判斷物件是否具有某個非繼承屬性

javascript深入淺出 原型 原型鏈

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

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

前言 原型鏈,即原型鏈條。它是由原型 原型的原型 原型的原型的原型.這一規則組合成的,經常被應用於繼承。原型的作用 在js中,每個物件都有自己的原型。當我們訪問物件的屬性和方法時,js會先訪問物件本身的屬性和方法。如果物件本身不包含這些屬性和方法,則訪問物件對應的原型。function person...

深入淺出理解索引

一 深入淺出理解索引結構 實際上,您可以把索引理解為一種特殊的目錄。sql server提供了兩種索引 聚集索引 clustered index,也稱聚類索引 簇集索引 和非聚集索引 nonclustered index,也稱非聚類索引 非簇集索引 下面,我們舉例來說明一下聚集索引和非聚集索引的區別...