DIV CSS 佈局教程網

JavaScript作為一個面向對象語言（JS是基於對象的），可以實現繼承是必不可少的，但是由於本身並沒有類的概念,所以不會像真正的面向對象編程語言通過類實現繼承，但可以通過其他方法實現繼承。實現繼承的方法很多，下面就只是其中的幾種。

一. 原型鏈繼承

function Person() {  //被繼承的函數叫做超類型（父類，基類）
      this.name='mumu';
      this.age='18';
    }
    
    Person.prototype.name='susu';//當屬性名相同時需就近原則，先在實例裡面查找，沒找到再到原型裡找
       
    function Worker(){ //繼承的函數叫做子類型（子類，派生類）
      this.job='student';
    }

    Worker.prototype=new Person();//通過原型鏈繼承，超類型實例化後的對象實例，賦值給子類的原型屬性
    var p2=new Worker(); 

    console.log(p2.name);
    console.log(p2 instanceof Object);//ture 所有的構造函數都繼承自Object

以上實現繼承關鍵在於：Worker.prototype=new Person();  將Worker的原型成為Person的一個實例，通過原型鏈繼承。

注意：在使用原型鏈實現繼承時，不能使用對象字面量創建原型方法，因為這樣會中斷關系而重寫原型鏈。

原型鏈繼承問題：

1.出現引用共享問題，他們還是共用一個空間，子類會影響父類

function Person() {  
      this.bodys=['eye','foot'];
    }
    
    function Worker(){ 
    }

    Worker.prototype=new Person();
    var p1=new Worker();
    p1.bodys.push('hand');
    var p2=new Worker(); 
    console.log(p1.bodys);
    console.log(p2.bodys);

2.在創建子類型的實例時，不能像超類型的構造函數中傳遞參數。

那麼如何解決原型鏈的兩個問題呢？那就繼續看下面的繼承方式吧~

二. 借用構造函數繼承（也叫對象冒充，偽造對象或經典繼承）

function Person(name,age){
    this.name=name;
    this.age=age;
    this.bodys=['eye','foot'];
  }

  Person.prototype.showName=function(){
    console.log(this.name);
  }

  function Worker(name,age,job){
    Person.call(this,name,age);
    this.job=job;//子類添加屬性
  }

  var p1=new Worker('mumu','18','學生'); 
  p1.bodys.push('hand') ;
  var p2=new Worker();

  console.log(p1.name);
  console.log(p2.bodys);
  console.log(p1.showName());

簡單分析下以上使用借用構造函數的原理：Person.call(this,name,age);這句代碼調用父級構造函數,繼承父級屬性，使用call方法調用Person構造函數改變函數執行時候的this，  這裡的this-> new出來的一個Worker對象  構造函數偽裝方法：把Worker傳給上面的Person。

當引用類型放在構造函數裡面的時候就不會被共享，所以p2不受影響。

這裡借用構造函數繼承方式就解決了原型鏈不能傳遞參數以及引用類型共享的問題。

小知識：call()和apply()方法可以改變函數執行的作用域, 簡言之就是改變函數中this指向的內容。

call()和apply()都接受兩個參數：第一個是在其中運行函數的作用域，另一個是傳遞的參數。

call和apply的區別就是參數的不同.
call中的參數必須是一個個枚舉出來的.
apply中的參數必須是數組或者是arguments對象

那麼問題來了：為什麼p1.showName()結果是錯誤的呢？----因為借用構造函數繼承方式只能繼承構造函數裡的屬性和方法。這裡也就發現了借用構造函數的一個問題。

注意：由於把方法都放在構造函數裡，每次我們實例化就會分配內存空間給它造成資源的浪費，所以一般我們都是把方法放在原型裡，屬性放在構造函數裡。

借用構造函數繼承問題：

因為借用構造函數只能繼承構造函數裡的屬性和方法，在超類型的原型中定義的方法對子類而言是不可見的，所以就相當於沒有了原型。結果所有的方法都只能在構造函數裡定義，因此就沒有函數復用了。

那麼如何解決借用構造函數所產生的問題呢？那就要看下面這種繼承方式了

三. 組合繼承（偽經典繼承）

function Person(name,age){
    this.name=name;
    this.age=age;
  }

  Person.prototype.showName=function(){
    console.log(this.name);
  }

  function Worker(name,age,job){
    Person.call(this,name,age);//借用構造函數
    this.job=job;
  }
  
  Worker.prototype=new Person();//原型鏈繼承
  var p1=new Worker('mumu','18','學生'); 

  console.log(p1.age);
  p1.showName();

組合繼承：將原型鏈與借用構造函數結合。

思路：通過使用原型鏈實現原型上的屬性和方法繼承，借用構造函數實現實例屬性的繼承

以上的例子Person.call(this,name,age);借用構造函數繼承了屬性

Worker.prototype=new Person();原型鏈繼承了方法 ， 避免了兩者的缺點，融合了它們的優點，成為最常用的繼承模式。

組合繼承的問題：

調用兩次超類型構造函數，一次是在創建子類型原型時，另一次是在子類型的構造函數內部。

要解決這個問題就要用到寄生組合式繼承方式了。

四. 原型式繼承

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

  var person = {
    name: 'mumu',
    friends: ['xiaxia', 'susu']
  };

  var anotherPerson = object(person);
  anotherPerson.friends.push('wen');
  var yetAnotherPerson = object(person);
  anotherPerson.friends.push('tian');
  console.log(person.friends);//["xiaxia", "susu", "wen", "tian"]
console.log(anotherPerson.__proto__)//Object {name: "mumu", friends: Array[4]}

簡單分析下：function object(proto)是一個臨時中轉函數，裡面的參數proto表示將要傳遞進入的一個對象，F（）構造函數是臨時新建的對象，用來存儲傳遞過來的對象，F.prototype = proto;將對象實例賦值給F構造函數的原型對象，最後返回傳遞過來的對象的對象實例。原型式繼承還是會共享引用類型的屬性。

五. 寄生式繼承

//臨時中轉函數  
function object(proto) {
    function F() {}
    F.prototype = proto;
    return new F();
  }

  //寄生函數
  function create(proto){
    var f=object(proto);
    f.love=function(){
      return this.name;
    }
    return f;
  }

  var person = {
    name: 'mumu',
    friends: ['xiaxia', 'susu']
  };

  var anotherPerson = create(person);
  console.log(anotherPerson.love());寄生組合式繼承

六. 寄生組合式繼承

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

  //寄生函數
  function create(Person,Worker){
    var f=object(Person.prototype);//創建對象
    f.constructor=Worker;//調整原型構造指針，增強對象
    Worker.prototype=f;//指定對象
  }
  
  function Person(name,age){
    this.name=name;
    this.age=age;
  }
  Person.prototype.showName=function(){
    console.log(this.name);
  }
  function Worker(name,age,job){
    Person.call(this,name,age);
    this.job=job;
  }
  
  create(Person,Worker);//寄生組合式繼承
  var p1=new Person('mumu','18','學生');
p1.showName();

這種方法也是現在實現繼承方法中最完美的，也是最理想的。

以上這篇JavaScript繼承學習筆記【新手必看】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。