Js基礎之物件的繼承

2021-09-18 01:36:14 字數 2449 閱讀 3596

二、原型鏈

不了解原型鏈的請先看：一文看懂原型鏈

三、繼承方法

原型鏈繼承即採用定義子建構函式的prototype指向父類的例項的方法

本質是：父公有+父私有 --->  子公有

function parent()


function child()


child.prototype = new parent();//父類的公有和私有屬性被繼承為子類的公有屬性


var c = new child();
注意：此時原型鏈並不完整，child.prototype = parent例項，但parent例項的constructor卻指向parent建構函式，因此c.constructor指向parent建構函式。

借助建構函式即只在建構函式中使用call(this)函式繼承。

本質：父私有---> 子私有

function parent()


parent.prototype.showcolor = function()


function child()


var c = new child();


c.color //['red','green']


c.showcolor() //undefined
組合繼承即同時採用原型鏈和建構函式繼承

本質：父公有+父私有--->子公有， 父私有--->子私有（私有覆蓋公有）

function parent()


parent.prototype.showcolor = function()


parent.prototype.name = 'bigp';


function child()


child.prototype = new parent() //第一次呼叫父類建構函式


var c = new child()
經過組合繼承，子類的結構為：子類公有包括：父公有+父私有，子類私有包括：父私有，由於父私有屬性和方法分別存在於子類的公有和私有屬性，根據原型鏈屬性查詢的特性，私有屬性優先於公有屬性，因此子類公有屬性中的父私有屬性被覆蓋。

那麼為什麼會同時存中兩個父私有屬性呢？這要從new 建構函式的實際過程講起。

new parent()的簡要過程如下：

建立乙個object物件：var  obj = object()

將新建的物件的[[prototype]]即__proto__指向new 後面的建構函式的prototype:    obj.__proto__ =  parent.prototype

將建構函式中的this指向新建的物件：parent.call(obj, 傳入的物件資料) ：parent.call(obj) 

若函式中有顯式返回其他物件（其他型別忽略），則直接返回其他物件，否則返回新建物件：return  obj (即返回例項）

由上述過程可知，在組合繼承中使用了兩次parent.call()，因此原型物件和建構函式同時繼承了父類的私有變數。

原型式繼承是將原型鏈繼承用函式包裝起來

本質：（還是原型鏈繼承）父公有+父私有--->子公有

//o為被繼承的父類物件


//區別於原型鏈繼承：父類物件可以用物件字面量定義{}，也可以用建構函式new parent()


function object(o)


f.prototype = o;


return new f();


}var c = object(o)
由於原型式繼承只是使用了prototype，實際和原型鏈繼承是一樣的效果，只是父類物件不僅可以是建構函式建立的例項，也可用物件字面量定義，只是兩種方法的原型鏈不同。

寄生式繼承是在原型式繼承的基礎上用函式封裝並新增子類私有屬性的繼承方法，

本質：父公有+父私有--->子公有，新增屬性--->子私有

function createchild(original)


var parent = ;


var c = createchild(parent);
寄生組合式繼承同樣是在原型式繼承的基礎上用函式封裝，但是通過原型鏈繼承父類的公有屬性，通過建構函式繼承父類的私有屬性。本質：父公有--->子公有，父私有--->子私有。

function inheriteprototype(child, parent)


function parent()


parent.prototype.showcolor = function()


function child()


inheriteptototype(child,parent); // 父類的公有屬性被繼承為子類的公有屬性
在繼承父類公有屬性的函式中，本質是建立了乙個空的建構函式f並直接指向parent.prototype，生成乙個只包含父類公有屬性的例項物件，然後將已經繼承了父類私有屬性的建構函式指向該例項物件。

js物件導向之繼承

原型鏈繼承 用法 把例項的父類給子函式的原型 缺點 1 因為修改了obj1.arr後obj2.arr也變了，因為來自原型物件的引用屬性裡所有例項共享的 2 建立子類例項時，無法向父類建構函式傳遞引數 1 function parent 78 function child age 1314 child...

js的物件繼承

js物件繼承方式不止一種，而且是模仿實現的繼承。1 物件冒充方式 例子 function classa color classa.prototype.color red classa.prototype.showcolor function alert this.color classb.proto...

js物件繼承

自有屬性 own property 物件本身具有的屬性 繼承屬性 從原型物件 prototype object 繼承而來 物件的查詢過程 查詢過程中，查詢物件o的屬性x,如果o的屬性不存在x,則對o的原型物件進行查詢，使原型鏈查詢。屬性賦值操作過程 屬性賦值過程中，先檢查原型鏈，以此判斷是否允許賦值...