摘要：繼承實(shí)現(xiàn)在中，我們可以這樣寫初始函數(shù)使用接收一個(gè)對(duì)象參數(shù)創(chuàng)建了的構(gòu)造函數(shù)，之后實(shí)例化調(diào)用函數(shù)輸出。完成繼承操作之后調(diào)用函數(shù)將參數(shù)復(fù)制到的原型上。

功能實(shí)現(xiàn)參考了Leaflet源碼。

我們構(gòu)造一個(gè)Class類，實(shí)現(xiàn)以下功能：

基礎(chǔ)的繼承功能、提供了初始化函數(shù)。

初始函數(shù)鉤子(hook)功能。

內(nèi)置選項(xiàng)的繼承與合并。

靜態(tài)屬性方法。

Mixins。

JavaScirpt并不是一個(gè)典型的OOP語言，所以其繼承實(shí)現(xiàn)略為繁瑣，是基于原型鏈的實(shí)現(xiàn)，但好在ES6實(shí)現(xiàn)了Class的語法糖，可以方便的進(jìn)行繼承。

Leaflet可能為了瀏覽器的兼容，所以并未采用ES6的語法，同時(shí)也大量使用了[polyfill]的寫法(在[Util.js]中實(shí)現(xiàn))。關(guān)于polyfill，以后進(jìn)行專門介紹。

在leaflet中，我們可以這樣寫:

let Parent = Class.extend({
  initialize(name) { //初始函數(shù)
    this.name = name;
  },
  greet() {
    console.log("hello " + this.name);
  }
});

let parent = new Parent("whj");
parent.greet();　// hello whj

使用L.Class.extend接收一個(gè)對(duì)象參數(shù)創(chuàng)建了Parent的構(gòu)造函數(shù)，之后實(shí)例化調(diào)用greet函數(shù)輸出hello whj。

實(shí)際上L.Class.extend返回了一個(gè)函數(shù)（JavaScript是以函數(shù)實(shí)現(xiàn)類的功能）。

以下是實(shí)現(xiàn)代碼:

function Class() {}　// 聲明一個(gè)函數(shù)Class

Class.extend = function (props) { // 靜態(tài)方法extend
  var NewClass = function () {
    if (this.initialize) {
      this.initialize.apply(this, arguments);//因?yàn)椴⒉恢纈nitialize
    }　　　　　　　　　　　　　　　　　　　　   //傳入?yún)?shù)數(shù)量，所以使用apply
  } 

  if (props.initialize){
    NewClass.prototype.initialize = props.initialize;
  }

  if (props.greet) {
    NewClass.prototype.greet  = props.greet;
  }

　return NewClass;
};

可以看見Class的靜態(tài)方法extend中，聲明了一個(gè)NewClass函數(shù)，之后判斷參數(shù)中是否有initialize和greet，并將他們復(fù)制到NewClass的prototype中，最后返回。當(dāng)對(duì)返回對(duì)象進(jìn)行new操作時(shí)就會(huì)調(diào)用initialize函數(shù)。這就實(shí)現(xiàn)了最初代碼所展現(xiàn)的功能。

但是，這里傳入?yún)?shù)限定了只有initialize或greet才能復(fù)制到其原型上，那么我傳入的參數(shù)不止這兩個(gè)呢？所以得對(duì)代碼進(jìn)行修改，使其通用化，并實(shí)現(xiàn)繼承功能。

Class.extend = function (props) {
  var NewClass = function () {
    if (this.initialize) {
      this.initialize.apply(this, arguments);
    }
  }

　//將父類的prototype取出并復(fù)制到NewClass的__super__ 靜態(tài)變量中
  var parentProto = NewClass.__super__ = this.prototype;
  var proto = Object.create(parentProto); //復(fù)制parentProto到proto中
　　　　　　　　　　　　　　　　　　　　　　　//protos是一個(gè)新的prototype對(duì)象
  proto.constructor = NewClass;　
  NewClass.prototype = proto;　//到這完成繼承

  extend(proto, props); //將參數(shù)復(fù)制到NewClass的prototypez中

  return NewClass;
};

將父類的原型prototype取出，Object.create函數(shù)返回了一個(gè)全新的父類原型prototype對(duì)象proto，將其構(gòu)造函數(shù)指向當(dāng)前NewClass，最后將其賦給NewClass的原型,至此完成了繼承工作。注意，此時(shí)NewClass只是繼承了Class。
完成繼承操作之后調(diào)用extend函數(shù)將props參數(shù)復(fù)制到NewClass的原型proto上。

extend函數(shù)實(shí)現(xiàn)如下:

function extend(dest) {
  var i, j, len, src;

  for (j = 1, len = arguments.length; j < len; j++) {
    src = arguments[j];
    for (i in src) {
      dest[i] = src[i];
    }
  }
  return dest;
}

需要注意的是arguments的用法，這是一個(gè)內(nèi)置變量，保存著傳入的所有參數(shù)，是一個(gè)類數(shù)組結(jié)構(gòu)。

現(xiàn)在離實(shí)現(xiàn)繼承只差一步了 (?????)? ?? 。

function Class() { }

Class.extend = function (props) {
  var NewClass = function () {
    ...
  }
    ...
 for (var i in this) {
  if (this.hasOwnProperty(i) && i !== "prototype" && i !== "__super__") {
    NewClass[i] = this[i];
    }
  }
  ...
  return NewClass;
};

for循環(huán)中將父類的靜態(tài)方法(不在原型鏈上的、非prototype、非super)復(fù)制到NewClass中。

現(xiàn)在，基本的繼承已經(jīng)實(shí)現(xiàn)。 <(?????)>

測(cè)試代碼:

let Parent = Class.extend({
  initialize(name) {
    this.name = name;
  },
  greet(word) {
    console.log(word + this.name);
  }
});

let Child = Parent.extend({
  initialize(name,age) {
    Parent.prototype.initialize.call(this,name);
    this.age = age;
  },
  greet() {
    Parent.prototype.greet.call(this,this.age);
  }
});

let child = new Child("whj",22);
child.greet(); //22whj

這個(gè)功能可以在已存在的類中添加新的初始化函數(shù)，其子類也繼承了這個(gè)函數(shù)。

let Parent = Class.extend({
  initialize(name) {
    this.name = name;
  },
  greet(word) {
    console.log(word + this.name);
  }
});  // 類已構(gòu)造完成

Parent.addInitHook(function () { //新增init函數(shù)
  console.log("Parent"s other init");
});

let parent = new Parent(); // Parent"s other init

可以看見類實(shí)例化時(shí)執(zhí)行了新增的init函數(shù)。

為了完成這個(gè)功能我們?cè)诖a上進(jìn)行進(jìn)一步修改。

首先在Class上新增addInitHook這個(gè)方法：

Class.addInitHook = function (fn) {
  var init = fn;

  this.prototype._initHooks = this.prototype._initHooks || [];
  this.prototype._initHooks.push(init);
  return this;
};

將新增函數(shù)push進(jìn)_initHooks。_initHooks中的函數(shù)之后會(huì)被依次調(diào)用。

Class.extend = function (props) {
  var NewClass = function () {
    if (this.initialize) {
      this.initialize.apply(this, arguments);
    }
    this.callInitHooks(); // 執(zhí)行調(diào)用新增的init函數(shù)的函數(shù)
  }

  ...

  proto._initHooks = []; // 新增的init函數(shù)數(shù)組

  proto.callInitHooks = function () {
    ...
  };

  return NewClass;
};

首先在原型上新增一個(gè)保存著初始化函數(shù)的數(shù)組 _initHooks、調(diào)用新增初始函數(shù)的方法
callInitHooks，最后在NewClass中調(diào)用callInitHooks。

現(xiàn)在看下callInitHooks的實(shí)現(xiàn)：

  proto.callInitHooks = function () {
    if (this._initHooksCalled) { // 是新增函數(shù)否已被調(diào)用
      return;
    }

    if (parentProto.callInitHooks) { //先調(diào)用父類的新增函數(shù)
      parentProto.callInitHooks.call(this);
    }

    this._initHooksCalled = true; // 此init已被調(diào)用，標(biāo)志位置為true

    for (var i = 0, len = proto._initHooks.length; i < len; i++) {
      proto._initHooks[i].call(this); // 循環(huán)調(diào)用新增的初始化函數(shù)
    }
  };

執(zhí)行這段函數(shù)時(shí)，先會(huì)遞歸的調(diào)用父類的callInitHooks函數(shù)，之后循環(huán)調(diào)用已構(gòu)建好的
_initHooks數(shù)組中的初始函數(shù)。

首先看下示例程序：

var Parent= Class.extend({
    options: {
        myOption1: "foo",
        myOption2: "bar"
    }
});

var Child = Parent.extend({
    options: {
        myOption1: "baz",
        myOption3: 5
    }
});

var child = new Child ();
child.options.myOption1; // "baz"
child.options.myOption2; // "bar"
child.options.myOption3; // 5

在父類與子類中都聲明了options選項(xiàng)，子類繼承其options并覆蓋了父類同名的options。

實(shí)現(xiàn)如下:

Class.extend = function (props) {
  var NewClass = function () {
    ...
  }
  ...
  if (proto.options) {
     props.options = extend(proto.options, props.options);
  }
  ...
  return NewClass;
};

這個(gè)功能有了之前的基礎(chǔ)實(shí)現(xiàn)就相當(dāng)簡(jiǎn)單了。判斷父類是否有optios選項(xiàng)，若有者將子類的optios進(jìn)行復(fù)制。

var MyClass = Class.extend({
  statics: {
      FOO: "bar",
      BLA: 5
  }
});

MyClass.FOO; // "bar"

實(shí)現(xiàn)如下：

Class.extend = function (props) {
  var NewClass = function () {
    ...
  }
  ...
  if (props.statics) {
     extend(NewClass, props.statics);
     delete props.statics;
  }
  ...

  extend(proto, props);

  ...
  return NewClass;
};

實(shí)現(xiàn)與內(nèi)置選項(xiàng)類似，需注意的是extend執(zhí)行之后得把props中的statics字段刪除，以免之后重復(fù)復(fù)制到原型上。

Mixins 是一個(gè)在舊類上添加新的屬性、方法的技術(shù)。

 var MyMixin = {
    foo: function () { console.log("foo") },
    bar: 5
};

var MyClass = Class.extend({
    includes: MyMixin
});

// or 
// MyClass.include(MyMixin);

var a = new MyClass();
a.foo(); // foo

實(shí)現(xiàn)與靜態(tài)屬性方法類似：

Class.extend = function (props) {
  var NewClass = function () {
    ...
  }
  ...
  if (props.includes) {
     extend.apply(null, [proto].concat(props.includes));
     delete props.includes;
  }
  extend(proto, props); //將參數(shù)復(fù)制到NewClass的prototypez中
  
  return NewClass;
};

Class.include = function (props) {
   Util.extend(this.prototype, props);
   return this;
};

也是同樣調(diào)用了extend函數(shù)，將include復(fù)制到原型中。為什么使用apply方法，主要是為了支持include為數(shù)組的情況。

Leaflet中繼承功能已全部實(shí)現(xiàn)完成。實(shí)現(xiàn)思路與一些小技巧值得我們借鑒。

這是完整實(shí)現(xiàn)代碼。

文章首發(fā)于Whj"s Website。