<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
    <title>JS類的繼承</title>
</head>

<body>
  /* -- 類式繼承 -- */
  <script type="text/javascript">
  //先聲明一個(gè)超類
  var Animal = function(name) {
      this.name = name;
    }
    //給這個(gè)超類的原型對象上添加方法
  Animal.prototype.Eat = function() {
    console.log(this.name + " Eat");
  };
  //實(shí)例化這個(gè)超
  var a = new Animal("Animal");

  //再創(chuàng)建構(gòu)造函數(shù)對象類
  var Cat = function(name, sex) {
      //這個(gè)類中要調(diào)用超類Animal的構(gòu)造函數(shù)，并將參數(shù)name傳給它
      Animal.call(this, name);
      this.sex = sex;
    }
    //這個(gè)子類的原型對象等于超類的實(shí)例
  Cat.prototype = new Animal();
  //因?yàn)樽宇惖脑蛯ο蟮扔诔惖膶?shí)例，所以prototype.constructor這個(gè)方法也等于超類構(gòu)造函數(shù)

  console.log(Cat.prototype.constructor);
  //這個(gè)是Animal超類的引用，所以要從新賦值為自己本身
  Cat.prototype.constructor = Cat;
  console.log(Cat.prototype.constructor);
  //子類本身添加了getSex 方法
  Cat.prototype.getSex = function() {
      return this.sex;
    }
    //實(shí)例化這個(gè)子類
  var _m = new Cat('cat', 'male');
  //自身的方法
  console.log(_m.getSex()); //male
  //繼承超類的方法
  console.log(_m.Eat()); //cat
  </script>
</body>

</html>

我們再看JS原型繼承

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>JS原型繼承</title>
</head>

<body>
  <!--原型繼承-->
  <script type="text/javascript">
  //clone()函數(shù)用來創(chuàng)建新的類Person對象
  var clone = function(obj) {
    var _f = function() {};
    //這句是原型式繼承最核心的地方，函數(shù)的原型對象為對象字面量
    _f.prototype = obj;
    return new _f;
  }

  //先聲明一個(gè)對象字面量
  var Animal = {
      somthing: 'apple',
      eat: function() {
        console.log("eat " + this.somthing);
      }
    }
    //不需要定義一個(gè)Person的子類，只要執(zhí)行一次克隆即可
  var Cat = clone(Animal);
  //可以直接獲得Person提供的默認(rèn)值，也可以添加或者修改屬性和方法
  console.log(Cat.eat());
  Cat.somthing = 'orange';
  console.log(Cat.eat());

  //聲明子類,執(zhí)行一次克隆即可
  var Someone = clone(Cat);
  </script>
</body>

</html>

我們可以試驗(yàn)一下，JS類的繼承 children.constructor==father 返回的是true，而原型繼承children.constructor==father 返回的是false;

以上這篇淺析JS原型繼承與類的繼承就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: