js繼承

gaosboy 發布于2019-08-22 14:00 / 2561人閱讀

摘要：使用這種方式繼承的好處可以在子類型構造函數中向超類型構造函數傳遞參數。下面來看一個例子繼承屬性繼承方法拼接原型鏈我們看到現在實例可以訪問的超類型的原型上的方法了構造函數定義了兩個屬性和。

在了解了js 中的原型鏈之后（https://segmentfault.com/a/11...），我們再來看看js 中的幾種實現繼承的方式

一借用構造函數實現繼承

為了解決包含引用類型值的原型屬性會被所有實例共享的問題，大神們發明了在子類型構造函數的內部調用超類型構造函數然后通過apply()和call()方法在（將來）新創建的對象上執行構造函數的方式來實現繼承，如下

function SuperType() {
    this.colors = ["red", "blue", "green"];
}
function SubType() {
//調用SuperType 并且通過call()方法修正this指向  
SuperType.call(this);
 }
var instance1 = new SubType();
instance1.colors.push("black");
//"red,blue,green,black"
alert(instance1.colors);
//"red,blue,green"
var instance2 = new SubType();
alert(instance2.colors);

以上例子中在SubType()調用了SuperType()構造函數。通過使用call()方法（或apply()方法也可以），我們實際上是在（未來將要）新創建的SubType實例的環境下調用了SuperType構造函數。這樣一來，就會在新SubType對象上執行SuperType()函數中定義的所有對象初始化代碼。結果，SubType的每個實例就都會具有自己的colors屬性的副本了(互不影響)。

使用這種方式繼承的好處：

可以在子類型構造函數中向超類型構造函數傳遞參數。如下

function SuperType(name) {
  this.name = name;
}
function SubType() {
//繼承了SuperType，同時還傳遞了參數
SuperType.call(this, "Nicholas");    
//實例屬性   
 this.age = 29;
}
var instance = new SubType();
  //"Nicholas";
alert(instance.name);
//29
alert(instance.age);

SuperType只接受一個參數name，該參數會直接賦給一個屬性。在SubType構造函數內部調用SuperType構造函數時，實際上是為SubType的實例設置了name屬性。為了確保SuperType構造函數不會重寫子類型的屬性，可以在調用超類型構造函數后，再添加應該在子類型中定義的屬性。

使用這種方式繼承的壞處：

1.方法都在構造函數中定義
2.在超類型的原型中定義的方法，對子類型而言也是不可見的如下

function SuperType(name) {
  this.name = name;
}
SuperType.prototype.a=function(){
    alert("aaaa");
}
function SubType() {
//繼承了SuperType，同時還傳遞了參數
SuperType.call(this, "Nicholas");    
//實例屬性
 this.age = 29;
}
var instance = new SubType();
console.log(instance);

我們在控制臺可以看到子類型原型中無法獲取超類型的a方法

二組合繼承

將原型鏈和借用構造函數的技術組合到一塊，從而發揮二者之長的一種繼承模式，主要的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。這樣，既通過在原型上定義方法實現了函數復用，又能夠保證每個實例都有它自己的屬性。下面來看一個例子

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
  alert(this.name);
};
function SubType(name, age) { 
//繼承name屬性    
SuperType.call(this, name);    
this.age = age;
}
//繼承方法 （拼接原型鏈）
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
  alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black"); 
//"red,blue,green,black"
alert(instance1.colors);
//"Nicholas";
instance1.sayName();
//29
instance1.sayAge();
var instance2 = new SubType("Greg", 27);
//"red,blue,green"
alert(instance2.colors);
//"27"; 
instance2.sayAge();
//"Greg"; 
instance2.sayName();

我們看到現在實例可以訪問的超類型的原型上的方法了
SuperType構造函數定義了兩個屬性：name和colors。SuperType的原型定義了一個方法sayName()。Sub-Type構造函數在調用SuperType構造函數時傳入了name參數，緊接著又定義了它自己的屬性age。然后，將SuperType的實例賦值給SubType的原型，然后又在該新原型上定義了方法sayAge()。這樣一來，就可以讓兩個不同的SubType實例既分別擁有自己屬性——包括colors屬性，又可以使用相同的方法了這種方式是目前js實現繼承使用的最常見的方式

使用這種繼承方式的不足

SubType.prototype = new SuperType()的確會創建一個關聯到SubType.prototype 的新對象。但是它使用了SubType(..)的“構造函數調用”，如果函數SubType有一些副作用（比如寫日志、修改狀態、注冊到其他對象、給this添加數據屬性，等等）的話，就會影響到SubType()的“后代”。

改進方法

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
  alert(this.name);
};
function SubType(name, age) { 
  //繼承name屬性    
  SuperType.call(this, name);    
  this.age = age;
}
//使用Object.create 生成對象來代替new SuperType()生成的對象

SubType.prototype = Object.create(SuperType.prototype);
SubType.prototype.sayAge = function() {
  alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
console.log(instance1 )；

這樣可以避免對SubType后代的影響
注

// ES6之前需要拋棄默認的SubType.prototype
SubType.ptototype = Object.create( SuperType.prototype );
// ES6開始可以直接修改現有的
SubType.prototypeObject.setPrototypeOf( SubType.prototype, SuperType.prototype );

可以參考(https://www.liaoxuefeng.com/w...

GPU云服務器云服務器 js 繼承 js繼承 js繼承模式 js組合繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92743.html

JS中的繼承(上)

摘要：中的繼承上學過或者之類語言的同學應該會對的繼承感到很困惑不要問我怎么知道的的繼承主要是基于原型的對的原型感興趣的同學可以了解一下我之前寫的中的原型對象相信很多同學也跟我一樣剛開始接觸的面向對象編程的時候都抱著一種排斥的心態為什么這么 JS中的繼承(上) 學過java或者c#之類語言的同學,應該會對js的繼承感到很困惑--不要問我怎么知道的,js的繼承主要是基于原型(prototype)...

Fundebug 2019-08-22 16:29 評論0 收藏0
JavaScript繼承方式詳解

摘要：可以通過構造函數和原型的方式模擬實現類的功能。原型式繼承與類式繼承類式繼承是在子類型構造函數的內部調用超類型的構造函數。寄生式繼承這種繼承方式是把原型式工廠模式結合起來，目的是為了封裝創建的過程。 js繼承的概念 js里常用的如下兩種繼承方式：原型鏈繼承（對象間的繼承）類式繼承（構造函數間的繼承）由于js不像java那樣是真正面向對象的語言，js是基于對象的，它沒有類的概念。...

Yangyang 2019-08-21 10:23 評論0 收藏0
JS面向對象之五【繼承】

摘要：首先為了模擬類創建對象的功能搞出了構造函數。也就是名字膚色膚色這里是繼承里的自有屬性生命值這里繼承的共有屬性的方法攻擊力兵種美國大兵攻擊防御死亡膚色 JS面向對象之五【繼承】我們已經準備了很多前置知識,包括原型鏈,對象和對象之間的關系 this,對象和函數之間的關系 new, 用函數批量創建特定的對象的語法糖 JS面向對象的前世今生我們說,面向對象是一種寫代碼的套路。因為如...

genefy 2019-08-26 17:04 評論0 收藏0
JS基礎（對象創建，構造函數、原型、實例之間關系，繼承方式）

摘要：對象創建的三種方式字面量創建方式系統內置構造函數方式自定義構造函數構造函數原型實例之間的關系實例是由構造函數實例化創建的，每個函數在被創建的時候，都會默認有一個對象。 JS 對象創建的三種方式 //字面量創建方式 var person= ｛　name:jack　｝ //系統內置構造函數方式 var person= new Object(); person.name = jack; ...

PAMPANG 2019-08-26 13:30 評論0 收藏0
JS專題之繼承

摘要：構造函數所以，就有了畸形的繼承方式原型鏈繼承三原型鏈繼承改變構造函數的原型對象繼承了屬性以上例子中，暴露出原型鏈繼承的兩個問題包含引用類型數據的原型屬性，會被所有實例共享，基本數據類型則不會。前言眾所周知，JavaScript 中，沒有 JAVA 等主流語言類的概念，更沒有父子類繼承的概念，而是通過原型對象和原型鏈的方式實現繼承。于是，我們這一篇講一講 JS 中的繼承（委托）。 ...

rollback 2019-08-23 15:09 評論0 收藏0
js原型和繼承

摘要：舉例說明組合繼承組合繼承利用原型鏈借用構造函數的模式解決了原型鏈繼承和類式繼承的問題。示例組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。對js原型和繼承的理解一直處于不懂-懂-不懂-懂-不懂。。。的無限循環之中，本來打算只是簡單總結下js繼承方式，可看了些網上的資料后，發現又不懂繼承了。。。這篇文章只...

Hujiawei 2019-08-21 13:49 評論0 收藏0