JavaScript面向對象（二）--前端必須知道的原型和繼承

原型是JS語言的難點，此文主要講原型及原型實現的繼承，希望對大家有所幫助。

一、原型（prototyle）

  是用來定義公共特徵、行爲，表現爲對象的屬性/函數。目的是爲了提高代碼的複用、降低代碼的耦合並提升擴展性。

原型對象的使用：

var People = function(name, age) {
　　this.name = name;
　　this.age = age;
}
//所有通過該構造函數實例化出來的所有對象，都繼承了這些原型屬性和原型方法
People.prototype.run = function() { //定義公共函數
    console.log(“跑步中…”)
}
 var tom = new People("tom");
 var jerry = new People("jerry");

 console.log(jerry.age);
 jerry.run();

二、繼承
繼承：在繼承中，會出現兩個類型【父類、子類，子類繼承父類的屬性和行爲】
繼承是爲了提高對象之間的關聯關係和提高代碼的複用性和功能擴展性。

繼承的使用注意事項：

1. 儘量讓一個父類有一個或者多個子類
2. 一個子類只繼承一個父類

JS中實現繼承有非常多的方式，常見的方式如下：

1. 通過apply/call的形式進行繼承
2. 通過prototype的方式進行繼承
3. 通過空的中間對象和prototype進行間接的繼承

第一種：通過apply/call實現假繼承

function Animal() {
    this.species = “動物”;
    this.age="5";
}

定義其他對象類型

function Cat(name, color) {
    //apply方式
    Animal.apply(this, [species,age]);
    //call方式
    Animal.call(this,species,age);
　　this.name = name;
　　this.color = color;
}

創建Cat對象

var cat = new Cat(“tom”, “white”);
cat.species;  // 動物

call和apply方法實現的效果一致，只是參數列表和類型不同而已。
apply第二個參數是個數組—–父類.apply(this,[arr1，arr2])
call第二個參數是參數列表—–父類.apply(this,param1，param2)

第二種：prototype模式繼承對象
通過prototype的形式，進行指定對象的繼承

function Animal(){
    this.species = “動物”
}

定義其他對象類型

function Cat(name, color) {
　　this.name = name;
　　this.color = color;
}

通過修改Cat.prototype指向Animal來實現繼承。但是同時也改變了Cat的原型鏈。

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

創建Cat對象

var cat = new Cat(“tom”, “black”);

第三種：通過prototype和空對象進行間接繼承
將繼承關係封裝成函數方便調用

function extends (Child, Parent) {
    var F = function() {};//空對象
　　F.prototype = Parent.prototype;// 類型prototype關聯
　　Child.prototype.constructor = Child;// 重新設置
　　Child.super = Parent.prototype;// 打開父對象的訪問途徑
}

父類對象類型

var Animal = function(name,age) {
     this.name = name;
     this.age = age;
 }
 //父類的原型
  Animal.prototype.play = function() {
      console.log("play gaming!");
  }

子類對象類型

 var Cat = function(name, age, color) {
     this.color = color;
 }
 var cat = new Cat();

繼承

_extends(Cat, Animal);