国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript常用八種繼承方案

wpw / 722人閱讀

摘要：原型式繼承利用一個空對象作為中介，將某個對象直接賦值給空對象構造函數的原型。其中表示構造函數，一個類中只能有一個構造函數，有多個會報出錯誤如果沒有顯式指定構造方法，則會添加默認的方法，使用例子如下。

（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）

更新：在常用七種繼承方案的基礎之上增加了ES6的類繼承，所以現在變成八種啦，歡迎加高級前端進階群一起學習（文末）。

--- 2018.10.30

1、原型鏈繼承

構造函數、原型和實例之間的關系：每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個原型對象的指針。

繼承的本質就是復制，即重寫原型對象，代之以一個新類型的實例。

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

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

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

// 這里是關鍵，創建SuperType的實例，并將該實例賦值給SubType.prototype
SubType.prototype = new SuperType(); 

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

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

原型鏈方案存在的缺點：多個實例對引用類型的操作會被篡改。

function SuperType(){
  this.colors = ["red", "blue", "green"];
}
function SubType(){}

SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"

var instance2 = new SubType(); 
alert(instance2.colors); //"red,blue,green,black"
2、借用構造函數繼承

使用父類的構造函數來增強子類實例，等同于復制父類的實例給子類（不使用原型）

function  SuperType(){
    this.color=["red","green","blue"];
}
function  SubType(){
    //繼承自SuperType
    SuperType.call(this);
}
var instance1 = new SubType();
instance1.color.push("black");
alert(instance1.color);//"red,green,blue,black"

var instance2 = new SubType();
alert(instance2.color);//"red,green,blue"

核心代碼是SuperType.call(this)，創建子類實例時調用SuperType構造函數，于是SubType的每個實例都會將SuperType中的屬性復制一份。

缺點：

只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法

無法實現復用，每個子類都有父類實例函數的副本，影響性能

3、組合繼承

組合上述兩種方法就是組合繼承。用原型鏈實現對原型屬性和方法的繼承，用借用構造函數技術來實現實例屬性的繼承。

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

function SubType(name, age){
  // 繼承屬性
  // 第二次調用SuperType()
  SuperType.call(this, name);
  this.age = age;
}

// 繼承方法
// 構建原型鏈
// 第一次調用SuperType()
SubType.prototype = new SuperType(); 
// 重寫SubType.prototype的constructor屬性，指向自己的構造函數SubType
SubType.prototype.constructor = SubType; 
SubType.prototype.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

缺點：

第一次調用SuperType()：給SubType.prototype寫入兩個屬性name，color。

第二次調用SuperType()：給instance1寫入兩個屬性name，color。

實例對象instance1上的兩個屬性就屏蔽了其原型對象SubType.prototype的兩個同名屬性。所以，組合模式的缺點就是在使用子類創建實例對象時，其原型中會存在兩份相同的屬性/方法。

4、原型式繼承

利用一個空對象作為中介，將某個對象直接賦值給空對象構造函數的原型。

function object(obj){
  function F(){}
  F.prototype = obj;
  return new F();
}

object()對傳入其中的對象執行了一次淺復制，將構造函數F的原型直接指向傳入的對象。

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"

缺點：

原型鏈繼承多個實例的引用類型屬性指向相同，存在篡改的可能。

無法傳遞參數

另外，ES5中存在Object.create()的方法，能夠代替上面的object方法。

5、寄生式繼承

核心：在原型式繼承的基礎上，增強對象，返回構造函數

function createAnother(original){
  var clone = object(original); // 通過調用 object() 函數創建一個新對象
  clone.sayHi = function(){  // 以某種方式來增強對象
    alert("hi");
  };
  return clone; // 返回這個對象
}

函數的主要作用是為構造函數新增屬性和方法，以增強函數

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

缺點（同原型式繼承）：

原型鏈繼承多個實例的引用類型屬性指向相同，存在篡改的可能。

無法傳遞參數

6、寄生組合式繼承

結合借用構造函數傳遞參數和寄生模式實現繼承

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); // 創建對象，創建父類原型的一個副本
  prototype.constructor = subType;                    // 增強對象，彌補因重寫原型而失去的默認的constructor 屬性
  subType.prototype = prototype;                      // 指定對象，將新創建的對象賦值給子類的原型
}

// 父類初始化實例屬性和原型屬性
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

// 借用構造函數傳遞增強子類實例屬性（支持傳參和避免篡改）
function SubType(name, age){
  SuperType.call(this, name);
  this.age = age;
}

// 將父類原型指向子類
inheritPrototype(SubType, SuperType);

// 新增子類原型屬性
SubType.prototype.sayAge = function(){
  alert(this.age);
}

var instance1 = new SubType("xyc", 23);
var instance2 = new SubType("lxy", 23);

instance1.colors.push("2"); // ["red", "blue", "green", "2"]
instance1.colors.push("3"); // ["red", "blue", "green", "3"]

這個例子的高效率體現在它只調用了一次SuperType?構造函數，并且因此避免了在SubType.prototype?上創建不必要的、多余的屬性。于此同時，原型鏈還能保持不變；因此，還能夠正常使用instanceof?和isPrototypeOf()

這是最成熟的方法，也是現在庫實現的方法

7、混入方式繼承多個對象 
function MyClass() {
     SuperClass.call(this);
     OtherSuperClass.call(this);
}

// 繼承一個類
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function() {
     // do something
};

Object.assign會把 OtherSuperClass原型上的函數拷貝到 MyClass原型上，使 MyClass 的所有實例都可用 OtherSuperClass 的方法。

8、ES6類繼承extends

extends關鍵字主要用于類聲明或者類表達式中，以創建一個類，該類是另一個類的子類。其中constructor表示構造函數，一個類中只能有一個構造函數，有多個會報出SyntaxError錯誤,如果沒有顯式指定構造方法，則會添加默認的 constructor方法，使用例子如下。

class Rectangle {
    // constructor
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    
    // Getter
    get area() {
        return this.calcArea()
    }
    
    // Method
    calcArea() {
        return this.height * this.width;
    }
}

const rectangle = new Rectangle(10, 20);
console.log(rectangle.area);
// 輸出 200

-----------------------------------------------------------------
// 繼承
class Square extends Rectangle {

  constructor(length) {
    super(length, length);
    
    // 如果子類中存在構造函數，則需要在使用“this”之前首先調用 super()。
    this.name = "Square";
  }

  get area() {
    return this.height * this.width;
  }
}

const square = new Square(10);
console.log(square.area);
// 輸出 100

extends繼承的核心代碼如下，其實現和上述的寄生組合式繼承方式一樣

function _inherits(subType, superType) {
  
    // 創建對象，創建父類原型的一個副本
    // 增強對象，彌補因重寫原型而失去的默認的constructor 屬性
    // 指定對象，將新創建的對象賦值給子類的原型
    subType.prototype = Object.create(superType && superType.prototype, {
        constructor: {
            value: subType,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    
    if (superType) {
        Object.setPrototypeOf 
            ? Object.setPrototypeOf(subType, superType) 
            : subType.__proto__ = superType;
    }
}
總結

1、函數聲明和類聲明的區別

函數聲明會提升，類聲明不會。首先需要聲明你的類，然后訪問它，否則像下面的代碼會拋出一個ReferenceError。

let p = new Rectangle(); 
// ReferenceError

class Rectangle {}

2、ES5繼承和ES6繼承的區別

ES5的繼承實質上是先創建子類的實例對象，然后再將父類的方法添加到this上（Parent.call(this)）.

ES6的繼承有所不同，實質上是先創建父類的實例對象this，然后再用子類的構造函數修改this。因為子類沒有自己的this對象，所以必須先調用父類的super()方法，否則新建實例報錯。

《javascript高級程序設計》筆記：繼承  
MDN之Object.create()  
MDN之Class
交流

本人Github鏈接如下，歡迎各位Star

http://github.com/yygmind/blog

我是木易楊，網易高級前端工程師，跟著我每周重點攻克一個前端面試重難點。接下來讓我帶你走進高級前端的世界，在進階的路上，共勉！

如果你想加群討論每期面試知識點，公眾號回復[加群]即可

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

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

相關文章

  • 【進階3-3期】深度解析 call 和 apply 原理、使用場景及實現

    摘要：之前文章詳細介紹了的使用，不了解的查看進階期。不同的引擎有不同的限制，核心限制在，有些引擎會拋出異常，有些不拋出異常但丟失多余參數。存儲的對象能動態增多和減少，并且可以存儲任何值。這邊采用方法來實現，拼成一個函數。 之前文章詳細介紹了 this 的使用，不了解的查看【進階3-1期】。 call() 和 apply() call() 方法調用一個函數, 其具有一個指定的 this 值和分...

    godlong_X 評論0 收藏0

  • 【進階3-5期】深度解析 new 原理及模擬實現

    摘要：使用指定的參數調用構造函數，并將綁定到新創建的對象。由構造函數返回的對象就是表達式的結果。情況返回以外的基本類型實例中只能訪問到構造函數中的屬性，和情況完全相反，結果相當于沒有返回值。 定義 new 運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象的實例。 ——（來自于MDN） 舉個栗子 function Car(color) { this.color = co...

    Baaaan 評論0 收藏0

  • Java 總結

    摘要：中的詳解必修個多線程問題總結個多線程問題總結有哪些源代碼看了后讓你收獲很多，代碼思維和能力有較大的提升有哪些源代碼看了后讓你收獲很多，代碼思維和能力有較大的提升開源的運行原理從虛擬機工作流程看運行原理。 自己實現集合框架 (三): 單鏈表的實現 自己實現集合框架 (三): 單鏈表的實現 基于 POI 封裝 ExcelUtil 精簡的 Excel 導入導出 由于 poi 本身只是針對于 ...

    caspar 評論0 收藏0

  • Java常用的八種排序算法與代碼實現精解

    摘要：直接插入排序的算法重點在于尋找插入位置。也稱縮小增量排序，是直接插入排序算法的一種更高效的改進版本。希爾排序是非穩定排序算法。簡單選擇排序常用于取序列中最大最小的幾個數時。將新構成的所有的數的十位數取出，按照十位數進行排序，構成一個序列。 1.直接插入排序 直接插入排序算法是排序算法中最簡單的，但在尋找插入位置時的效率不高。基本思想就是將一個待排序的數字在已經排序的序列中尋找找到一個插...

    2501207950 評論0 收藏0

  • 八種js交換兩個變量的值方案總結

    摘要：假定期望交換和的值序號實現方案中間變量備注按位操作符只適用類型只適用類型有腦洞先執行對象解構賦值推薦數組解構賦值簡書首發轉載請注明來自簡書 假定let a = 1,b=10;期望交換a和b的值 序號 實現方案 中間變量? 備注 1 let c; c = a; a = b; b = c; ? 2 a ^= b; b ^=a; a ^=b MDN-按位操作符, 只適...

    LiveVideoStack 評論0 收藏0

發表評論

0條評論

wpw

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<