JS實現繼承的幾種常用方式示例

 更新時間:2019年06月22日 10:38:02   作者:etemal_bright   我要評論
這篇文章主要介紹了JS實現繼承的幾種常用方式,結合實例形式分析了JavaScript繼承的四種常見實現方式,包括原型鏈繼承、構造繼承、組合繼承及寄生組合繼承,需要的朋友可以參考下

本文實例講述了JS實現繼承的幾種常用方式。分享給大家供大家參考,具體如下:

1,原型鏈繼承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>原型鏈繼承</title>
</head>
<body>
<script>
  /**
   * 優點:
   * 實例是父類的實例也是子類的實例
   * 父類新增原型方法或者原型屬性 子類都能訪問到
   * 簡單 易于實現
   * 缺點:
   * 無法實現多繼承
   * 來自原型對象的引用屬性和實例是所有子類共享的
   * 創建子類實例的時候,無法向父構造函數傳參
   * 可以在Cat構造函數中,為Cat實例增加實例屬性。如果要新增原型屬性和方法,則必須放在new Animal()這樣的語句之后執行。
   * **/
  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_(指向的是一個函數) 是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();
//  組合繼承也是需要修復構造函數指向的。
  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 () {
    //創建一個沒有實例方法的類
    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>

運行結果:

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

最新評論

湖北11选5走势图爱彩乐