DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺析JS原型繼承與類的繼承
淺析JS原型繼承與類的繼承
編輯:關於JavaScript     

我們先看JS類的繼承

<!DOCTYPE html>
<html>

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

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

  //再創建構造函數對象類
  var Cat = function(name, sex) {
      //這個類中要調用超類Animal的構造函數,並將參數name傳給它
      Animal.call(this, name);
      this.sex = sex;
    }
    //這個子類的原型對象等於超類的實例
  Cat.prototype = new Animal();
  //因為子類的原型對象等於超類的實例,所以prototype.constructor這個方法也等於超類構造函數

  console.log(Cat.prototype.constructor);
  //這個是Animal超類的引用,所以要從新賦值為自己本身
  Cat.prototype.constructor = Cat;
  console.log(Cat.prototype.constructor);
  //子類本身添加了getSex 方法
  Cat.prototype.getSex = function() {
      return this.sex;
    }
    //實例化這個子類
  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()函數用來創建新的類Person對象
  var clone = function(obj) {
    var _f = function() {};
    //這句是原型式繼承最核心的地方,函數的原型對象為對象字面量
    _f.prototype = obj;
    return new _f;
  }

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

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

</html>

我們可以試驗一下,JS類的繼承 children.constructor==father 返回的是true,而原型繼承children.constructor==father 返回的是false;

以上這篇淺析JS原型繼承與類的繼承就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved