JS實現(xiàn)繼承的幾種常用方式示例

更新時間：2019年06月22日 10:38:02 作者：etemal_bright

這篇文章主要介紹了JS實現(xiàn)繼承的幾種常用方式,結合實例形式分析了JavaScript繼承的四種常見實現(xiàn)方式,包括原型鏈繼承、構造繼承、組合繼承及寄生組合繼承,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)繼承的幾種常用方式。分享給大家供大家參考，具體如下：

1，原型鏈繼承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>原型鏈繼承</title>
</head>
<body>
<script>
  /**
   * 優(yōu)點：
   * 實例是父類的實例也是子類的實例
   * 父類新增原型方法或者原型屬性 子類都能訪問到
   * 簡單 易于實現(xiàn)
   * 缺點：
   * 無法實現(xiàn)多繼承
   * 來自原型對象的引用屬性和實例是所有子類共享的
   * 創(chuàng)建子類實例的時候，無法向父構造函數(shù)傳參
   * 可以在Cat構造函數(shù)中，為Cat實例增加實例屬性。如果要新增原型屬性和方法，則必須放在new Animal()這樣的語句之后執(zhí)行。
   * **/
  function Animal(name) {
    this.name=name;//屬性
    this.sleep=function () {//實例方法
      console.log(this.name+'正在睡覺')
    }
  }
  //原型方法
  Animal.prototype.eat=function (food) {
    console.log(this.name+'正在吃'+food)
  };
  //原型鏈繼承---核心：將父類的實例作為子類的原型
  function Cat() {
  }
  Cat.prototype=new Animal();
  Cat.prototype.name='cat';
  var cat=new Cat();
  console.log(cat);//cat._proto_====>Animal 可以使用Animal里面的name屬性 sleep方法
  //  也可以使用 cat._proto_._proto_的eat方法 即animal的原型方法
  //  cat._proto_._proto_._proto_ 是object
  console.log(cat.name);
  cat.eat('fish');
  cat.sleep();
</script>
</body>
</html>

運行結果：

2，構造繼承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>構造繼承</title>
</head>
<body>
<script>
  /**
   *構造繼承 相當于復制父類的實例給子類 （沒有用到原型）
   * 只能使用父類的屬性和方法 不能繼承原型屬性和方法 所以cat不能使用eat方法
   * **/
  function Animal(name) {
    this.name=name;//屬性
    this.sleep=function () {//實例方法
      console.log(this.name + '正在睡覺！');
    }
  }
  // 原型方法
  Animal.prototype.eat = function(food) {
    console.log(this.name + '正在吃：' + food);
  };
  function Cat(name) {
    Animal.call(this,name);//Cat就可以使用Animal的
//    this.name=name
  }
  var cat=new Cat('Tom');
  console.log(cat);//只能使用Animal的屬性和實例方法 不能使用原型的方法
  //cat的_proto_（指向的是一個函數(shù)） 是cat 構造器是Cat cat的_proto_._proto_ 是object
  console.log(cat.name);
//  cat.eat('fish');
  cat.sleep()
</script>
</body>
</html>

運行結果：

3，組合繼承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>組合繼承</title>
</head>
<body>
<script>
  function Animal(name) {
    this.name=name;
    this.sleep=function () {
      console.log(this.name+"正在睡覺");
    };
  }
  Animal.prototype.eat=function (food) {
    console.log(this.name+"正在吃"+food);
  }
  function Cat(name) {
    Animal.call(this,name)
  }
  Cat.prototype=new Animal();
//  組合繼承也是需要修復構造函數(shù)指向的。
  Cat.prototype.constructor=Cat;//構造器進行修改
  Cat.prototype.show=function () {//可以在子類的原型上加方法 不影響父類
    console.log("11111")
  };
  var cat=new Cat('Tom');
  console.log(cat);//cat可以直接使用animal的屬性和實例方法
  //cat.proto是Animal cat.proto_._proto_ 是eat cat.proto_._proto_._proto_是object
  console.log(cat.name);
  cat.sleep();
  cat.eat('fish')
  cat.show()
</script>
</body>
</html>

運行結果：

4，寄生組合繼承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>寄生組合繼承</title>
</head>
<body>
<script>
  function Animal(name) {
    this.name=name;
    this.sleep=function () {
      console.log(this.name+"正在睡覺");
    }
  }
  // 原型方法
  Animal.prototype.eat = function(food) {
    console.log(this.name + '正在吃：' + food);
  };
  function Cat(name) {
    Animal.call(this,name);
  }
//  (function () {
    //創(chuàng)建一個沒有實例方法的類
    var Super=function () {
    };
    Super.prototype=Animal.prototype;//eat
    console.log(Animal.prototype);//構造方法還是Animal 可以使用eat方法 eat的_proto_ 是object
    //初始化這個實例 把它作為子類（Cat）的原型
    Cat.prototype=new Super();//一般 的話是new Animal（）
    Cat.prototype.constructor=Cat;//Cat的構造器還是Cat
//  })();
  var cat=new Cat('Tom');
  console.log(cat.name);
  cat.sleep();
  cat.eat('food')
</script>
</body>
</html>

運行結果：