JavaScript繼承的特性與實踐應用深入詳解

更新時間：2018年12月30日 12:02:42 作者：deniro_li

這篇文章主要介紹了JavaScript繼承的特性與實踐應用,結(jié)合實例形式較為深入的分析了javascript繼承相關(guān)概念、特性、原理、用法及操作注意事項,需要的朋友可以參考下

本文詳細講述了JavaScript繼承的特性與實踐應用。分享給大家供大家參考，具體如下：

繼承是代碼重用的模式。JavaScript 可以模擬基于類的模式，還支持其它更具表現(xiàn)力的模式。但保持簡單通常是最好的策略。

JavaScript 是基于原型的語言，也就是說它可以直接繼承其他對象。

1 偽類

JavaScript 的原型不是直接讓對象從其他對象繼承，而是插入一個多余的間接層：通過構(gòu)造函數(shù)來產(chǎn)生對象。

當一個函數(shù)被創(chuàng)建時，F(xiàn)unction 構(gòu)造器產(chǎn)生的函數(shù)對象會運行這樣類似的代碼：

this.prototype = {constructor : this};

新的函數(shù)對象新增了一個 prototype 屬性，它是一個包含了 constructor 屬性且屬性值為該新函數(shù)的對象。

當采用構(gòu)造器調(diào)用模式，即用 new 去調(diào)用一個函數(shù)時，它會這樣執(zhí)行：

Function.method('new', function (){
  var that = Object.create(this.prototype);//創(chuàng)建一個繼承了構(gòu)造器函數(shù)的原型對象的新對象
  var other = this.apply(that, arguments);//調(diào)用構(gòu)造器函數(shù)，綁定 this 到新對象
  return (typeof other === 'object' && other) || that;//如果構(gòu)造器函數(shù)的返回值不是對象，就直接返回這個新對象
});

我們可以定義一個構(gòu)造器，然后擴充它的原型：

//定義構(gòu)造器并擴充原型
var Mammal = function (name) {
  this.name = name;
};
Mammal.prototype.get_name = function () {
  return this.name;
};
Mammal.prototype.says = function () {
  return this.saying || '';
};

然后構(gòu)造實例：

var myMammal = new Mammal('Herb the mammal');
console.log(myMammal.get_name());//Herb the mammal

構(gòu)造另一個偽類來繼承 Mammal（定義構(gòu)造器函數(shù)并替換它的 prototype）：

var Cat = function (name) {
  this.name = name;
  this.saying = 'meow';
};
Cat.prototype = new Mammal();

擴充原型：

Cat.prototype.purr = function (n) {
  var i, s = '';
  for (i = 0; i < n; i += 1) {
    if (s) {
      s += '-';
    }
    s += 'r';
  }
  return s;
};
Cat.prototype.get_name = function () {
  return this.says() + ' ' + this.name + ' ' + this.says();
};
var myCat = new Cat('Henrietta');
console.log(myCat.says());//meow
console.log(myCat.purr(5));//r-r-r-r-r
console.log(myCat.get_name());//meow Henrietta meow

我們使用 method 方法定義了 inherits 方法，來隱藏上面這些丑陋的細節(jié)：

/**
 * 為 Function.prototype 新增 method 方法
 * @param name 方法名稱
 * @param func 函數(shù)
 * @returns {Function}
 */
Function.prototype.method = function (name, func) {
  if (!this.prototype[name])//沒有該方法時，才添加
    this.prototype[name] = func;
  return this;
};
Function.method('inherits', function (Parent) {
  this.prototype = new Parent();
  return this;
});

這兩個方法都返回 this，這樣我們就可以以級聯(lián)的方式編程啦O(∩_∩)O~

var Cat = function (name) {
  this.name = name;
  this.saying = 'meow';
}.inherits(Mammal).method('purr', function (n) {
    var i, s = '';
    for (i = 0; i < n; i += 1) {
      if (s) {
        s += '-';
      }
      s += 'r';
    }
    return s;
  }).method('get_name', function () {
    return this.says() + ' ' + this.name + ' ' + this.says();
  });
var myCat = new Cat('Henrietta');
console.log(myCat.says());//meow
console.log(myCat.purr(5));//r-r-r-r-r
console.log(myCat.get_name());//meow Henrietta meow

雖然我們有了行為很像“類”的構(gòu)造器函數(shù)，但沒有私有環(huán)境，所有的屬性都是公開的，而且不能訪問父類的方法。

如果在調(diào)用構(gòu)造函數(shù)時忘記加上 new 前綴，那么 this 就不會被綁定到新對象上，而是被綁定到了全局變量！??！這樣我們不但沒有擴充新對象，還破壞了全局變量環(huán)境。

這是一個嚴重的語言設(shè)計錯誤！為了降低出現(xiàn)這個問題的概率，所有的構(gòu)造器函數(shù)都約定以首字母大寫的形式來命名。這樣當我們看到首字母大寫的形式的函數(shù)，就知道它是構(gòu)造器函數(shù)啦O(∩_∩)O~

當然，更好的策略是根本不使用構(gòu)造器函數(shù)。

2 對象說明符

有時候，構(gòu)造器需要接受一大堆參數(shù)，這很麻煩。所以在編寫構(gòu)造器時，讓它接受一個簡單的對象說明符會更好：

var myObject = maker({
 first: f,
 middle: m,
 last: l
});

現(xiàn)在這些參數(shù)可以按照任意的順序排列咯，而且構(gòu)造器還能夠聰明地為那些沒有傳入的參數(shù)使用默認值，代碼也變得更易閱讀啦O(∩_∩)O~

3 原型

基于原型的繼承指的是，一個新對象可以繼承一個舊對象的屬性。首先構(gòu)造出一個有用的對象，然后就可以構(gòu)造出更多與那個對象類似的對象。

/**
 * 原型
 */
var myMammal = {
  name: 'Herb the mammal',
  get_name: function () {
    return this.name;
  },
  says: function () {
    return this.saying || '';
  }
};
//創(chuàng)建新實例
var myCat = Object.create(myMammal);
myCat.name = 'Henrietta';
myCat.saying = 'meow';
myCat.purr = function (n) {
  var i, s = '';
  for (i = 0; i < n; i += 1) {
    if (s) {
      s += '-';
    }
    s += 'r';
  }
  return s;
};
myCat.get_name = function () {
  return this.says() + ' ' + this.name + ' ' + this.says();
};
console.log(myCat.says());//meow
console.log(myCat.purr(5));//r-r-r-r-r
console.log(myCat.get_name());//meow Henrietta meow

這里用到了 create 方法來創(chuàng)建新的實例：

Object.create = function (o) {
    var F = function () {
    };
    F.prototype = o;
    return new F();
 }

4 函數(shù)化

目前為止看到的繼承模式的問題是：無法保護隱私，對象的所有屬性都是可見的。有一些無知的程序員會使用偽裝私有的模式，即給一個需要私有的屬性起一個古怪的名字，并希望其他使用代碼的程序員假裝看不到它們！

其實有更好的方法：應用模塊模式。

我們先構(gòu)造一個生成對象的函數(shù)，它有這些步驟：
①. 創(chuàng)建新對象。這有四種方式：
【1】構(gòu)造一個對象字面量。
【2】調(diào)用一個構(gòu)造器函數(shù)。
【3】構(gòu)造一個已存在對象的新實例。
【4】調(diào)用任意一個會返回對象的函數(shù)。
②. 定義私有實例變量與方法。
③. 為這個新對象擴充方法，這些方法擁有特權(quán)去訪問這些參數(shù)。
④. 返回這個新對象。

函數(shù)化構(gòu)造器的偽代碼如下：

var constructor = function (spec, my){
  var that, 其他私有變量;
  my = my || {}；
 //把共享的變量和函數(shù)添加到 my 中
 that = 一個新對象
 //添加給 that 的特權(quán)方法
 return that;
};

spec 對象包含了需要構(gòu)造一個新實例的所有信息，它可以被用到到私有變量或者其他函數(shù)中。
my 對象為在一個繼承鏈中的構(gòu)造器提供了共享的容器，如果沒有傳入，那么會創(chuàng)建一個 my 對象。

創(chuàng)建特權(quán)方法的方式是：把函數(shù)定義為私有方法，然后再把它們分配給 that：

var methodical = function (){
 ...
};
that.methodical = methodical;

這樣分兩步定義的好處是：私有的 methodical 不受這個實例被改變的影響。

現(xiàn)在，我們把這個模式應用到 mammal 示例中：

var mammal = function (spec) {
  var that = {};
  that.get_name = function () {
    return spec.name;
  };
  that.says = function () {
    return spec.saying || '';
  };
  return that;
};
var myMammal = mammal({name: 'Herb'});
console.log(myMammal.get_name());//Herb
var cat = function (spec) {
  spec.saying = spec.saying || 'meow';
  var that = mammal(spec);
  that.purr = function (n) {
    var i, s = '';
    for (i = 0; i < n; i += 1) {
      if (s) {
        s += '-';
      }
      s += 'r';
    }
    return s;
  };
  that.get_name = function () {
    return that.says() + ' ' + spec.name + ' ' + that.says();
  };
  return that;
};
var myCat = cat({name: 'Henrietta'});
console.log(myCat.says());//meow
console.log(myCat.purr(5));//r-r-r-r-r
console.log(myCat.get_name());//meow Henrietta meow

函數(shù)化模式還能調(diào)用父類的方法。這里我們構(gòu)造一個 superior 方法，它會返回調(diào)用某個方法名的函數(shù)：

//返回調(diào)用某個方法名的函數(shù)
Object.method('superior', function (name) {
  var that = this,
    method = that[name];
  return function () {
    return method.apply(that, arguments);
  };
});

現(xiàn)在創(chuàng)建一個 coolcat，它擁有一個可以調(diào)用父類方法的 get_name：

var coolcat = function (spec) {
  var that = cat(spec),
    super_get_name = that.superior('get_name');
  that.get_name = function (n) {
    return 'like ' + super_get_name() + ' baby';
  };
  return that;
};
var myCoolCat = coolcat({name: 'Bix'});
console.log(myCoolCat.get_name());//like meow Bix meow baby

函數(shù)化模式有很大的靈活性，而且可以更好地實現(xiàn)封裝、信息隱藏以及訪問父類方法的能力。

如果對象所有的狀態(tài)都是私有的，那么就稱為防偽對象。這個對象的屬性可以被替換或刪除，但這個對象的狀態(tài)不受影響。如果用函數(shù)化模式來創(chuàng)建對象，并且這個對象的所有方法都不使用 this 或 that，那么這個對象就是持久性的，它不會被入侵。除非存在特權(quán)方法，否則不能訪問這個持久性對象的內(nèi)部狀態(tài)。

5 事件處理函數(shù)

可以構(gòu)造一個能夠給任何對象添加簡單事件處理特性的函數(shù)。這里，我們給這個對象添加一個 on 方法，fire 方法和私有的事件注冊對象：

var eventuality = function (that) {
  var registry = {};
  /**
   * 觸發(fā)事件
   *
   * 使用 'on' 方法注冊的事件處理程序?qū)⒈徽{(diào)用
   * @param 可以是包含事件名稱的字符串，或者是一個擁有 type 屬性（值為事件名稱）的對象。
   */
  that.fire = function (event) {
    var array,
      func,
      handler,
      i,
      type = typeof event === 'string' ? event : event.type;
    //如果這個事件已被注冊，則遍歷并依序執(zhí)行
    if (registry.hasOwnProperty(type)) {
      array = registry[type];
      for (i = 0; i < array.length; i += 1) {
        handler = array[i];//處理程序包含一個方法和一組可選的參數(shù)
        func = handler.method;
        if (typeof func === 'string') {//如果方法是字符串形式的名稱，則尋找它
          func = this[func];
        }
        //調(diào)用它。如果處理程序包含參數(shù)，則傳遞過去，否則就傳遞事件對象
        func.apply(this, handler.parameters || [event]);
      }
    }
    return this;
  };
  /**
   * 注冊一個事件
   * @param type
   * @param method
   * @param parameters
   */
  that.on = function (type, method, parameters) {
    var handler = {
      method: method,
      parameters: parameters
    };
    if (registry.hasOwnProperty(type)) {//如果已存在，就新增數(shù)組項
      registry[type].push(handler);
    } else {//新增
      registry[type] = [handler];
    }
    return this;
  };
  return that;
};

可以在任何單獨對象上調(diào)用 eventuality，授予它事件處理方法。也可以在 that 被返回前，在構(gòu)造函數(shù)中調(diào)用它：