JavaScript繼承學習筆記【新手必看】_javascript技巧

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繼承學習筆記【新手必看】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。