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

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

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

本文實例講述了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)建子類實例的時候，無法向父構(gòu)造函數(shù)傳參
   * 可以在Cat構(gòu)造函數(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>

運行結(jié)果：

2，構(gòu)造繼承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>構(gòu)造繼承</title>
</head>
<body>
<script>
  /**
   *構(gòu)造繼承 相當于復制父類的實例給子類 （沒有用到原型）
   * 只能使用父類的屬性和方法 不能繼承原型屬性和方法 所以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 構(gòu)造器是Cat cat的_proto_._proto_ 是object
  console.log(cat.name);
//  cat.eat('fish');
  cat.sleep()
</script>
</body>
</html>

運行結(jié)果：

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();
//  組合繼承也是需要修復構(gòu)造函數(shù)指向的。
  Cat.prototype.constructor=Cat;//構(gòu)造器進行修改
  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>

運行結(jié)果：

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);//構(gòu)造方法還是Animal 可以使用eat方法 eat的_proto_ 是object
    //初始化這個實例 把它作為子類（Cat）的原型
    Cat.prototype=new Super();//一般 的話是new Animal（）
    Cat.prototype.constructor=Cat;//Cat的構(gòu)造器還是Cat
//  })();
  var cat=new Cat('Tom');
  console.log(cat.name);
  cat.sleep();
  cat.eat('food')
</script>
</body>
</html>

運行結(jié)果：

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

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

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

您可能感興趣的文章:

JS
繼承

JavaScript繼承模式粗探
之前提到了JS中比較簡單的設計模式，在各種設計模式中被最常使用的工具之一就是原型鏈的繼承。作為OOP的特質(zhì)之一——繼承，今天主要談談JS中比較簡單的繼承方法
2016-01-01
easyui combogrid實現(xiàn)本地模糊搜索過濾多列
本篇文章主要介紹了easyui combogrid實現(xiàn)本地模糊搜索過濾多列，非常具有實用價值，需要的朋友可以參考下
2017-05-05
ionic由于使用了header和subheader導致被遮擋的問題的兩種解決方法
這篇文章主要介紹了ionic由于使用了header和subheader導致被遮擋的問題的兩種解決方法，本文介紹的非常詳細，具有參考借鑒價值,需要的朋友可以參考下
2016-09-09
JS+CSS實現(xiàn)的藍色table選項卡效果
這篇文章主要介紹了JS+CSS實現(xiàn)的藍色table選項卡效果,通過鼠標事件調(diào)用自定義函數(shù)實現(xiàn)頁面元素樣式的遍歷與動態(tài)切換效果,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
js實現(xiàn)計算器和計時器功能
這篇文章主要為大家詳細介紹了js實現(xiàn)計算器和計時器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
web-view內(nèi)嵌H5與uniapp數(shù)據(jù)的實時傳遞解決方案
這篇文章主要介紹了web-view內(nèi)嵌H5與uniapp數(shù)據(jù)的實時傳遞,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-07-07
JS常用時間操作moment.js的使用方法
Moment.js是一個輕量級的JavaScript時間庫,通常會對時間進行下面這幾個操作：比如獲取時間,設置時間,格式化時間,比較時間等等,本文就來介紹一下如何使用,感興趣的可以了解下
2023-09-09
JS 簡單展開關閉切換代碼
一個JS實現(xiàn)的展開關閉來回切換的代碼。用于一段內(nèi)容的顯示與隱藏，點一次隱藏，再點一次就顯示，來回切換。
2010-04-04
js獲得當前系統(tǒng)日期時間的方法
這篇文章主要介紹了js獲得當前系統(tǒng)日期時間的方法,涉及javascript操作日期時間的相關技巧,非常簡單實用,需要的朋友可以參考下
2015-05-05
layer彈出層框架alert與msg詳解
本文主要介紹了layer彈出層框架alert與msg的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03