首頁 > web前端 > js教程 > JavaScript中多種組合繼承的介紹(程式碼範例)

JavaScript中多種組合繼承的介紹(程式碼範例)

不言
發布: 2019-01-19 10:54:18
轉載
2367 人瀏覽過

這篇文章帶給大家的內容是關於JavaScript中多種組合繼承的介紹(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

1. 組合繼承:又叫偽經典繼承,是指將原型鍊和借用建構函式技術組合在一塊的一種繼承方式。

下面來看一個例子:

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;
  }
 
  //继承方法
  SubType.prototype = new SuperType();
  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
登入後複製

#組合繼承避免了原型鍊和借用建構子的缺陷,融合它們的優點。

2. 原型式繼承

可以在不必預先定義建構子的情況下實現繼承,其本質是執行對給定物件的淺複製。而複製得到的副本還可以進一步的改造。

function object(o) {
    function F(){};
    F.prototype = o;
    return new F;
  }
 
  var person = {
   name: "Nicholas",
   friends: ["Shelby", "Court", "Van"]
  };
 
  var antherPerson = object(person);
  antherPerson.name = "Greg";
  antherPerson.friends.push("Rob");
 
  var antherPerson = object(person);
  antherPerson.name = "Linda";
  antherPerson.friends.push("Barbie");
 
  alert(person.friends); //Shelby,Court,Van,Rob,Barbie
登入後複製

3. 寄生式繼承

與原型式繼承非常相似,也是基於某個物件或某有些資訊創建一個對象,然後增強對象,最後返回對象。為了解決組合繼承模式由於多次呼叫超類型建構函數而導致的低效率問題,可以將這個模式與組合繼承一起使用。

function object(o) {
    function F(){};
    F.prototype = o;
    return new F;
  }
  function createAnother(original) {
    var clone = object(original);
    clone.sayHi = function() {
      alert("Hi");
    };
    return clone;
  }
 
  var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
  };
 
  var anotherPerson = createAnother(person);
  anotherPerson.sayHi();
登入後複製

4. 寄生組合式繼承

集寄生式繼承與組合繼承的優點與一身,是實現基本類型繼承最有效的方式。

//继承原型
  function extend(subType, superType) {
    function F(){};
    F.prototype = superType.prototype;
 
    var prototype = new F;
    prototype.constructor = subType;
    subType.prototype = prototype;
  }
 
  //超类方法
  function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    return this.name;
  }
 
  //子类方法
  function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }
 
  //继承超类的原型
  extend(SubType, SuperType);
 
  //子类方法
  SubType.prototype.sayAge = function() {
    return this.age;
  }
 
  var instance1 = new SubType("Shelby");
  var instance2 = new SubType("Court", 28);
 
  instance1.colors.push('black');
 
  alert(instance1.colors); //red,blue,green,black
  alert(instance2.colors); //red,blue,green
 
  alert(instance1 instanceof SubType); //true
  alert(instance1 instanceof SuperType); //true
登入後複製

這段範例的高效率體現在它只呼叫了一次SuperType建構函數,並且因此避免了在SubType.prototype上面創建不必要的多餘的屬性。同時,原型鏈還能維持不變。因此,也能正常使用instanceof 和 isPrototypeOf()。開發者普遍認為寄生組合式繼承是引用型別最理想的繼承範式。

以上是JavaScript中多種組合繼承的介紹(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板