JavaScript對(duì)象繼承

開(kāi)門見(jiàn)山,以下根據(jù)繼承方式的不同逐一介紹:

基于原型鏈的方式

這應(yīng)該是基于js中prototype的特點(diǎn)實(shí)現(xiàn)的最簡(jiǎn)單的繼承

var SuperType = function() {
  this.property= true;
}

SuperType.prototype.getSuperValue= function() {
  return this.property;
}

var SubType = function() {
  this.subproperty = false;
}

SubType.prototype = new SuperType();  // 繼承

SubType.prototype.getSubValue = function() {
  return this.subproperty;
}

var instance = new SubType();
alert(instance.getSuperValue());  // true

此時(shí),上面幾個(gè)對(duì)象的引用關(guān)系是這樣的:


JS對(duì)象繼承應(yīng)用關(guān)系(引用自JavaScript高級(jí)程序設(shè)計(jì))

那如果子類有同名屬性,super的getter會(huì)返回那個(gè)呢:

var Sub = function() {
  this.property = false;
}

Sub.prototype = new SuperType();

var instance = new Sub();
alert(instance.getSuperValue());  // true,返回子類的屬性

可見(jiàn)JS中子類的屬性會(huì)重寫(xiě)父類的,此外,方法的重寫(xiě)也一樣,這是由于JS查找對(duì)象的屬性是由子對(duì)象開(kāi)始遍歷,子類沒(méi)有才繼續(xù)去父對(duì)象上找。
另外,JS還提供了方法來(lái)判斷繼承關(guān)系:

alert(instance instanceof SubType);     // true
alert(instance instanceof SuperType);  // true
alert(instance instanceof Object);        // true

alert(SubType.prototype.isPrototypeOf(instance));     //true
alert(SuperType.prototype.isPrototypeOf(instance));  //true
alert(Object.prototype.isPrototypeOf(instance));        //true

使用原型鏈有個(gè)很明顯的問(wèn)題,就是子對(duì)象都share同一個(gè)父對(duì)象的屬性,如果是引用類型,就可能對(duì)一個(gè)對(duì)象修改,卻影響了其他對(duì)象的數(shù)據(jù)。

構(gòu)造函數(shù)繼承

構(gòu)造函數(shù)的方式繼承可以解決share同一個(gè)父對(duì)象屬性的問(wèn)題,并且可以引用父對(duì)象的帶參構(gòu)造函數(shù):

var SuperType = function(name) {
  this.name = name;
  this.colors = ['red', 'yellow'];
}

var SubType = function(name) {
  SuperType.call(this, name);

  this.age = 18;
}

var subA = new SubType('Lilei');
var subB = new SubType('HanMeimei');

subA.colors.push('blue');  // 修改引用屬性

alert(subA.name);   // Lilei
alert(subA.colors);  // 'red,yellow,blue'

alert(subB.name);   // HanMeimei
alert(subB.colors);  // 'red,yellow'

對(duì)象創(chuàng)建的情況一樣,單純的構(gòu)造函數(shù)方式會(huì)使得每個(gè)對(duì)象都不能share父對(duì)象的函數(shù)。于是有了組合繼承的方式,各取所長(zhǎng)。

組合繼承的方式

組合繼承是通過(guò)原型鏈來(lái)繼承對(duì)象的方法,構(gòu)造函數(shù)來(lái)繼承對(duì)象的屬性:

var SuperType = function(name) {
  this.name = name
}

SuperType.prototype.getName = function() {
  return this.name
}

var SubType = function(name) {
  SuperType.call(this, name);
}

SubType.prototype = new SuperType();

var sub = new SubType('Lilei');
alert(sub.getName());  // Lilei

在new子對(duì)象時(shí),會(huì)在調(diào)用構(gòu)造函數(shù)時(shí)重新定義該對(duì)象自己的屬性,從而和父對(duì)象的屬性分離。但是組合繼承要求父對(duì)象的構(gòu)造方式也是通過(guò)組合構(gòu)造的方式定義的,否則子類用組合繼承也是白搭。

通過(guò)工廠模式創(chuàng)建子對(duì)象

以下提供的繼承方式是在《JS高級(jí)程序設(shè)計(jì)》中看到的,此書(shū)把它們也作為繼承方式,但我覺(jué)得只能算是對(duì)之前繼承方式的工廠模式化罷了。

原型式繼承

給我任何一個(gè)原型,還你一個(gè)他的子對(duì)象(的工廠模式。。。)

// 就是他了
function subInstance(o) {
  function F(){}
  F.prototype = o;
  return new F();
}

var superInstance = {
  name: 'Lilei'
}

var sub = subInstance(superInstance);
alert(sub.name);  // Lilei

但是很顯然,子對(duì)象是share父對(duì)象的所有屬性的。用組合方式實(shí)現(xiàn)subInstance?可以試試,但是由于是工廠模式,考慮到通用性,這不是個(gè)好的選擇。

寄生式繼承

如果工廠不是那么通用,則可以在創(chuàng)建子對(duì)象是再加點(diǎn)額外的屬性:

function subInstanceWithAge(o) {
  function F(){}
  F.prototype = o;
  
  var sub = new F();
  sub.age = 18;
  return sub;
}

var superInstance = {
  name: 'Lilei'
}

var sub = subInstanceWithAge(superInstance);
alert(sub.name);  // Lilei
alert(sub.age);    // 18

同樣是share父對(duì)象的屬性。

寄生組合式繼承

這種繼承方式簡(jiǎn)直傷心病況。

function inherit(subType, superType) {
  function F() {}
  F.prototype = superType.prototype;
  var sub_prototype = new F();

  sub_prototype.constructor = subType;
  subType.prototype = sub_prototype;
}

var SuperType = function(name) {
  this.name = name;
}

SuperType.prototype.getName = function() {
  return this.name;
}

var SubType = function(name, age) {
  SuperType.call(this, name);
  
  this.age = age;
}

inherit(SubType, SuperType);

SubType.prototype.getAge = function() {
  return this.age;
}

var sub = new SubType('Lilei', 18);
alert(sub.getName());  // Lilei
alert(sub.getAge());     // 18
alert(SuperType.isPrototypeOf(sub));  // false

雖然子對(duì)象能繼承父對(duì)象的屬性,但子對(duì)象完全不認(rèn)識(shí)父對(duì)象了。與其說(shuō)是繼承,不如說(shuō)是copy,而且會(huì)破壞subType本來(lái)的繼承解構(gòu)。

最后介紹的三種工廠方式算是對(duì)傳統(tǒng)的三種繼承方式的發(fā)散吧。事實(shí)上,只要掌握前三種繼承,就可以根據(jù)實(shí)際需求發(fā)散出各種滿足使用需求的繼承工具方法。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 面向?qū)ο缶幊痰囊粋€(gè)重要方面是對(duì)象繼承. 繼承的對(duì)象擁有被繼承對(duì)象的所有屬性和方法, 這對(duì)復(fù)用代碼是非常有用的...
    HelloJames閱讀 1,013評(píng)論 0 0
  • 標(biāo)識(shí)符指變量,函數(shù),屬性的名字,或者函數(shù)的參數(shù);對(duì)象是引用類型的值,是引用類型的一個(gè)實(shí)例;引用類型是一種數(shù)據(jù)結(jié)構(gòu);...
    JacobMa1996閱讀 221評(píng)論 0 2
  • 一、原型(prototype) JavaScript中,函數(shù)本身也是一個(gè)包含了方法和屬性的對(duì)象。prototype...
    PrinzessinGJyao閱讀 170評(píng)論 0 0
  • 對(duì)象的繼承面向?qū)ο缶幊套钪匾囊粋€(gè)方面,就是對(duì)象的繼承。A對(duì)象通過(guò)繼承B對(duì)象,就能直接擁有B對(duì)象的所有的屬性和方法...
    喝水小恐龍閱讀 280評(píng)論 0 0
  • 構(gòu)造函數(shù) 子類的原型對(duì)象-類式繼承 缺點(diǎn),如果父類公有屬性是引用類型如數(shù)組,就會(huì)被所有子類的實(shí)例公有,其中一個(gè)實(shí)例...
    水墨小龍蝦閱讀 269評(píng)論 0 0

友情鏈接更多精彩內(nèi)容