javascript如何使用原型鏈實作繼承方法匯總

javascript本身不是物件導向的語言，而是基於物件的語言，對於習慣了其他OO語言的人來說，起初有些不適應，因為在這裡沒有「類別」的概念，或者說「類別」和「實例」不區分，更不要期待有「父類別」、「子類別」之分了。那麼，javascript中這一堆物件這麼連結呢？

幸運的是，javascript在設計初就提供了「繼承」的實作方式，在認識「繼承」之前，我們現在先來了解下原型鏈的概念。

原型鏈

具體程式碼如下：

#

  function SuperClass(){
    this.name = "women"
  }
  SuperClass.prototype.sayWhat = function(){
    return this.name + ":i`m a girl!";
  }
  function SubClass(){
    this.subname = "your sister";
  }
  SubClass.prototype = new SuperClass();
  SubClass.prototype.subSayWhat = function(){
    return this.subname + ":i`m a beautiful girl";
  }
  var sub = new SubClass();
  console.log(sub.sayWhat());//women:i`m a girl!

使用原型鏈實作繼承

透過上面的程式碼可以看出SubClass繼承了SuperClass的屬性和方法，這個繼承的實作是透過將SuperClass的實例賦值給SubClass的原型對象，這樣SubClass的原型物件就被SuperClass的一個實例覆掉了，擁有了它的全部屬性和方法，同時也擁有一個指向SuperClass原型物件的指標。

在使用原型鏈實作繼承時有一些需要我們注意的地方：

注意繼承後constructor的變化。此處sub的constructor指向的是SuperClass，因為SubClass的原型指向了SuperClass的原型。在了解原型鏈時，不要忽略掉在末端還有預設的Object對象，這也是我們能在所有物件中使用toString等物件內建方法的原因。

透過原型鏈實作繼承時，不能使用字面量定義原型方法，因為這樣會重寫原型物件：

  function SuperClass(){
    this.name = "women"
  }
  SuperClass.prototype.sayWhat = function(){
    return this.name + ":i`m a girl!";
  }
  function SubClass(){
    this.subname = "your sister";
  }
  SubClass.prototype = new SuperClass();
  SubClass.prototype = {//此处原型对象被覆盖，因为无法继承SuperClass属性和方法
    subSayWhat:function(){
      return this.subname + ":i`m a beautiful girl";
    }
  }
  var sub = new SubClass();
  console.log(sub.sayWhat());//TypeError: undefined is not a function

實例共享的問題。在前面講解原型和建構函數時，我們曾經介紹過包含引用類型屬性的原型會被所有的實例共享，同樣，我們繼承而來的原型中也會共享“父類”原型中引用類型的屬性，當我們透過原型繼承修改了「父類別」的引用型別屬性後，其他所有繼承自該原型的實例都會受到影響，這不僅浪費了資源，也是我們不願看到的現象：

#

  function SuperClass(){
    this.name = "women";
    this.bra = ["a","b"];
  }
  function SubClass(){
    this.subname = "your sister";
  }
  SubClass.prototype = new SuperClass();
  var sub1 = new SubClass();
  sub1.name = "man";
  sub1.bra.push("c");
  console.log(sub1.name);//man
  console.log(sub1.bra);//["a","b","c"]
  var sub2 = new SubClass();
  console.log(sub1.name);//woman
  console.log(sub2.bra);//["a","b","c"]

注意：此處在陣列中新增一個元素，所有繼承自SuperClass的實例都會受到影響，但是如果修改name屬性則不會影響到其他的實例，這是因為數組為引用型，而name為基本型別。
如何解決實例共享的問題呢？我們接著往下看...

經典繼承（constructor stealing）

#正如我們介紹過很少單獨使用原型定義物件一樣，在實際開發中我們也很少單獨使用原型鏈，為了解決引用類型的共享問題，javascript開發者引入了經典繼承的模式（也有人稱為借用構造函數繼承），它的實現很簡單就是在子類型構造函數中調用超類型的構造函數。我們需要藉助javascript提供的call()或apply()函數，我們看下範例：

#

function SuperClass() {
  this.name = "women";
  this.bra = ["a", "b"];
}
function SubClass() {
  this.subname = "your sister";
  //将SuperClass的作用域赋予当前构造函数，实现继承
  SuperClass.call(this);
}

var sub1 = new SubClass();
sub1.bra.push("c");
console.log(sub1.bra);//["a","b","c"]
var sub2 = new SubClass();
console.log(sub2.bra);//["a","b"]

SuperClass.call(this);這句話的意思是在SubClass的實例（上下文）環境中呼叫了SuperClass建構函式的初始化工作，這樣每個實例就會有自己的一份bra屬性的副本了，互不產生影響了。
但是，這樣的實現方式仍不是完美的，既然引入了構造函數，那麼同樣我們也面臨著上篇中講到的構造函數存在的問題：如果在構造函數中有方法的定義，那麼對於沒一個實例都存在一個單獨的Function引用，我們的目的其實是想共用這個方法，而且我們在超型原型中定義的方法，在子型別實例中是無法呼叫的：

  function SuperClass() {
    this.name = "women";
    this.bra = ["a", "b"];
  }
  SuperClass.prototype.sayWhat = function(){
    console.log("hello");
  }
  function SubClass() {
    this.subname = "your sister";
    SuperClass.call(this);
  }  
  var sub1 = new SubClass();
  console.log(sub1.sayWhat());//TypeError: undefined is not a function

組合式繼承

組合式繼承就是結合原型鍊和建構函式的優勢，發出各自特長，組合起來實現繼承的一種方式，簡單來說就是使用原型鏈繼承屬性和方法，使用借用建構函式來實現實例屬性的繼承，這樣既解決了實例屬性共享的問題，也讓超類型的屬性和方法得到繼承：

  function SuperClass() {
    this.name = "women";
    this.bra = ["a", "b"];
  }
  SuperClass.prototype.sayWhat = function(){
    console.log("hello");
  }
  function SubClass() {
    this.subname = "your sister";
    SuperClass.call(this);       //第二次调用SuperClass
  }
  SubClass.prototype = new SuperClass(); //第一次调用SuperClass
  var sub1 = new SubClass();
  console.log(sub1.sayWhat());//hello

組合繼承的方式也是實際開發中我們最常用的實現繼承的方式，到此已經可以滿足你實際開發的需求了，但是人對完美的追求是無止境的，那麼，必然會有人對這個模式「吹毛求疵」了：你這個模式呼叫了兩次超類型的建構子耶！兩次耶。 。 。你造嗎，這放大一百倍是多大的性能損失嗎？
最有力的反駁莫過於拿出解決方案，好在開發者找到了解決這個問題的最優方案：

寄生組合式繼承

#在介紹這個繼承方式前，我們先了解下寄生建構函數的概念，寄生建構函數類似前面提到的工廠模式，它的想法是定義一個公共函數，這個函數專門用來處理物件的創建，創建完成後返回這個對象，這個函數很像建構函數，但建構函數是沒有回傳值的：

#

function Gf(name,bra){
  var obj = new Object();
  obj.name = name;
  obj.bra = bra;
  obj.sayWhat = function(){
    console.log(this.name);
  }
  return obj;
}

var gf1 = new Gf("bingbing","c++");
console.log(gf1.sayWhat());//bingbing

寄生式继承的实现和寄生式构造函数类似，创建一个不依赖于具体类型的“工厂”函数，专门来处理对象的继承过程，然后返回继承后的对象实例，幸运的是这个不需要我们自己实现，道哥（道格拉斯）早已为我们提供了一种实现方式：

function object(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}
var superClass = {
  name:"bingbing",
  bra:"c++"
}
var subClass = object(superClass);
console.log(subClass.name);//bingbing

在公共函数中提供了一个简单的构造函数，然后将传进来对象的实例赋予构造函数的原型对象，最后返回该构造函数的实例，很简单，但疗效很好，不是吗？这个方式被后人称为“原型式继承”，而寄生式继承正是在原型式基础上，通过增强对象的自定义属性实现的：

function buildObj(obj){
  var o = object(obj);
  o.sayWhat = function(){
    console.log("hello");
  }
  return o;
}
var superClass = {
  name:"bingbing",
  bra:"c++"
}
var gf = buildObj(superClass);
gf.sayWhat();//hello

寄生式继承方式同样面临着原型中函数复用的问题，于是，人们又开始拼起了积木，诞生了——寄生组合式继承，目的是解决在指定子类型原型时调用父类型构造函数的问题，同时，达到函数的最大化复用。基于以上基础实现方式如下：

//参数为两个构造函数
function inheritObj(sub,sup){
  //实现实例继承，获取超类型的一个副本
  var proto = object(sup.prototype);
  //重新指定proto实例的constructor属性
  proto.constructor = sub;
  //将创建的对象赋值给子类型的原型
  sub.prototype = proto;
}
function SuperClass() {
  this.name = "women";
  this.bra = ["a", "b"];
}
SuperClass.prototype.sayWhat = function() {
  console.log("hello");
}

function SubClass() {
  this.subname = "your sister";
  SuperClass.call(this);
}
inheritObj(SubClass,SuperClass);
var sub1 = new SubClass();
console.log(sub1.sayWhat()); //hello

这个实现方式避免了超类型的两次调用，而且也省掉了SubClass.prototype上不必要的属性，同时还保持了原型链。

以上是javascript如何使用原型鏈實作繼承方法匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章！