【一次面試】再談javascript中的繼承

前言

面向對象編程是每次面試必問的知識點，而前端js如何實現繼承每次命中率高達80%

這不，近兩天我們面試時候，同事就問道面試者此問題，但是，不論之前自己做的回答，還是面試者的回答，基本都不太令人滿意

很大的原因是多數時候前端並不需要實現繼承，就jquery來說也基本上是一碼到底，沒有實現繼承，據我所知，也就prototype與ext實現過繼承

所以繼承對前端來說似乎不太適用

近兩年來情況有所變化，SPA的興起以及前端邏輯的復雜化，讓前端代碼愈發的多，愈發的重，所以繼承慢慢的進入了一些初級一點的前端視野

所以，好好的了解如何實現繼承，繼承的幾個用法，是非常有意義的，就算只是為面試都是很有用的

文章只是個人見解，有誤請提出，demo未做檢測，有誤請提出

實現繼承

當一個函數被創建時，Function構造函數產生的函數會隱式的被賦予一個prototype屬性，prototype包含一個constructor對象

而constructor便是該新函數對象（constructor意義不大，但是可以幫我們找到繼承關系）

每個函數都會有一個prototype屬性，該屬性指向另一對象，這個對象包含可以由特定類型的所有實例共享的屬性和方法

每次實例化后，實例內部都會包含一個[[prototype]]（__proto__）的內部屬性，這個屬性指向prototype

① 我們通過isPrototypeOf來確定某個對象是不是我的原型
② hasOwnPrototype 可以檢測一個屬性是存在實例中還是原型中，該屬性不是原型屬性才返回true

var Person = function (name, age) {
    this.name = name;
    this.age = age;
};
Person.prototype.getName = function () {
    return this.name;
};
var y = new Person('葉小釵', 30);

通俗一點來說，prototype是一模板，新創建對象就是對他一個拷貝，里面的屬性或者方法都會賦值給實例

這里說是模板賦值其實不太合理，反正由類產生的所有實例的__proto__都會共享一個prototype，這里我做一個例子

我們在斷點情況下是沒有name2屬性的，但是我們如果在斷點下加上這個代碼的話，a.name2，就有值了

Klass.prototype.name2 = '222';

所以，這里說模板，不如說是指針指向，都是共享一個對象；繼承的情況的話就是這樣

(function () {
    var Person = function (name) {
        this.name = name;
    };
    //Person.prototype = {};//這句將影響十分具有constructor屬性
    Person.prototype.getName = function () {
        return this.name;
    };

    var Student = function (name, sex, id) {
        this.name = name || '無名氏';
        this.sex = sex || '不明';
        this.id = id || '未填'; //學號
    };
    //相當於將其prototype復制了一次，若是包含constructor的話將指向Person
    Student.prototype = new Person();
    Student.prototype.getId = function () {
        return this.id;
    }
    var y = new Person();
    var s = new Student;
    var s1 = y instanceof Person;
    var s2 = s instanceof Student;
    var s3 = s instanceof Person;
    var s4 = Student.prototype.constructor === Person;
    var s5 = Student.constructor === Person;
    var s6 = Student.constructor === Function;

    var s = '';
})();

prototype實現繼承

我們在具體項目中，真正復雜一點的項目可能就會對繼承進行封裝，讓自己更好的使用，我們下面就來看看prototype怎么干的

PS：我這里做了一點小的修改：

var Class = (function () {
  function subclass() { };

  //我們構建一個類可以傳兩個參數，第一個為需要繼承的類，
  //如果沒有的話就一定會有第二個對象，就是其原型屬性以及方法，其中initialize為構造函數的入口
  function create() {

    //此處兩個屬性一個是被繼承的類，一個為原型方法
    var parent = null;
    var properties = $A(arguments);

    if (Object.isFunction(properties[0]))
      parent = properties.shift();

    //新建類，這個類最好會被返回，構造函數入口為initialize原型方法
    function klass() {
      this.initialize.apply(this, arguments);
    }

    //擴展klass類的“實例”對象（非原型），為其增加addMethods方法
    Object.extend(klass, Class.Methods);

    //為其指定父類，沒有就為空
    klass.superclass = parent;

    //其子類集合（require情況下不一定准確）
    klass.subclasses = [];

    //如果存在父類就需要繼承
    if (parent) {
      //新建一個空類用以繼承，其存在的意義是不希望構造函數被執行
      //比如 klass.prototype = new parent;就會執行其initialize方法
      subclass.prototype = parent.prototype;
      klass.prototype = new subclass;
      parent.subclasses.push(klass);
    }

    //遍歷對象（其實此處這樣做意義不大，我們可以強制最多給兩個參數）
    //注意，此處為一個難點，需要謹慎，進入addMethods
    for (var i = 0, length = properties.length; i < length; i++)
      klass.addMethods(properties[i]);

    if (!klass.prototype.initialize)
      klass.prototype.initialize = Prototype.emptyFunction;

    klass.prototype.constructor = klass;
    return klass;
  }

  /**
  由於作者考慮情況比較全面會想到這種情況
  var Klass = Class.create(parent,{},{});
  后面每一個對象的遍歷都會執行這里的方法，我們平時需要將這里直接限定最多兩個參數
  */
  function addMethods(source) {

    //當前類的父類原型鏈，前面被記錄下來了
    var ancestor = this.superclass && this.superclass.prototype;

    //將當前對象的鍵值取出轉換為數組
    var properties = Object.keys(source);

    //依次遍歷各個屬性，填充當前類（klass）原型鏈
    for (var i = 0, length = properties.length; i < length; i++) {

      //property為鍵，value為值，比如getName: function(){}的關系
      var property = properties[i], value = source[property];

      /****************
      這里有個難點，用於處理子類中具有和父類原型鏈同名的情況，仍然可以調用父類函數的方案（我這里只能說牛B）
      如果一個子類有一個參數叫做$super的話，這里就可以處理了，這里判斷一個函數的參數使用了正則表達式，正如
      var argslist = /^\s*function\s*\(([^\(\)]*?)\)\s*?\{/i.exec(value.toString())[1].replace(/\s/i, '').split(',');
      ****************/
      if (ancestor && Object.isFunction(value) && value.argumentNames()[0] == "$super") {
        
        //將當前函數存下來
        var method = value;
        /****************
        第一步：

        這里是這段代碼最難的地方，需要好好閱讀，我們首先將里面一塊單獨提出
        value = (function (m) {
        return function () { return ancestor[m].apply(this, arguments); };
        })(property)
        這里很牛B的構建了一個閉包（將方法名傳了進去），任何直接由其父類原型中取出了相關方法
        然后內部返回了該函數，此時其實重寫了value，value
        ***這里***有一個特別需要注意的地方是，此處的apply方法不是固定寫在class上的，是根據調用環境變化的，具體各位自己去理解了
        
        第二步：
        首先value被重新成其父類的調用了，此處可以簡單理解為（僅僅為理解）$super=value
        然后下面會調用wrap操作vaule將，我們本次方法進行操作
        wrap: function (wrapper) {
          var __method = this;
          return function () {
            return wrapper.apply(this, [__method.bind(this)].concat($A(arguments)));
          }
        }
        可以看出，他其實就是將第一個方法（value）作為了自己方法名的第一個參數了，后面的參數不必理會
        ****************/
        value = (function (m) {
          return function () { return ancestor[m].apply(this, arguments); };
        })(property).wrap(method);
      }
      //為其原型賦值
      this.prototype[property] = value;
    }
    return this;
  }

  return {
    create: create,
    Methods: {
      addMethods: addMethods
    }
  };
})();

下面來一個簡單的例子：

var Person = Class.create({
  initialize: function (name) {
    this.name = name;
  },
  getName: function () {
    console.log('我是父類');
    return  this.name;
  },
  getAge: function () {
    return this.age;
  }
});

var Employee = Class.create(Person, {
  initialize: function ($super, name, age) {
    $super(name);
    this.age = age;
  },
  getName: function ($super) {
    return '我是子類：' + $super();
  }
});

var C = Class.create(Employee, {
  getAge: function ($super) {
    return $super();
  }
});

var y = new C("葉小釵", 25);
console.log(y.getName() + ': ' + y.getAge());

這里，我們根據自己的需求重寫寫了下繼承相關代碼，表現基本與上述一致，各位可以自己試試

PS:當然如果有問題請指出

簡化prototype繼承

var arr = [];
var slice = arr.slice;

function create() {
  if (arguments.length == 0 || arguments.length > 2) throw '參數錯誤';

  var parent = null;
  //將參數轉換為數組
  var properties = slice.call(arguments);

  //如果第一個參數為類（function），那么就將之取出
  if (typeof properties[0] === 'function')
    parent = properties.shift();
  properties = properties[0];

  function klass() {
    this.initialize.apply(this, arguments);
  }

  klass.superclass = parent;
  klass.subclasses = [];

  if (parent) {
    var subclass = function () { };
    subclass.prototype = parent.prototype;
    klass.prototype = new subclass;
    parent.subclasses.push(klass);
  }

  var ancestor = klass.superclass && klass.superclass.prototype;
  for (var k in properties) {
    var value = properties[k];

    //滿足條件就重寫
    if (ancestor && typeof value == 'function') {
      var argslist = /^\s*function\s*\(([^\(\)]*?)\)\s*?\{/i.exec(value.toString())[1].replace(/\s/i, '').split(',');
      //只有在第一個參數為$super情況下才需要處理（是否具有重復方法需要用戶自己決定）
      if (argslist[0] === '$super' && ancestor[k]) {
        value = (function (methodName, fn) {
          return function () {
            var scope = this;
            var args = [function () {
              return ancestor[methodName].apply(scope, arguments);
            } ];
            return fn.apply(this, args.concat(slice.call(arguments)));
          };
        })(k, value);
      }
    }

    klass.prototype[k] = value;
  }

  if (!klass.prototype.initialize)
    klass.prototype.initialize = function () { };

  klass.prototype.constructor = klass;

  return klass;
}

如此，我們就完成了自己的繼承了

實戰繼承

知道原型可以實現繼承是皮毛，知道各個庫是怎樣干的也只是入門
因為，要在項目中用到才能算真正掌握繼承，這里我們便來點實戰的小例子
這里我寫一個簡單的view用於下面各種繼承

var AbstractView = create({
  initialize: function (opts) {
    opts = opts || {};
    this.wrapper = opts.wrapper || $('body');

    //事件集合
    this.events = {};

    this.isCreate = false;

  },
  on: function (type, fn) {
    if (!this.events[type]) this.events[type] = [];
    this.events[type].push(fn);
  },
  trigger: function (type) {
    if (!this.events[type]) return;
    for (var i = 0, len = this.events[type].length; i < len; i++) {
      this.events[type][i].call(this)
    }
  },
  createHtml: function () {
    throw '必須重寫';
  },
  create: function () {
    this.root = $(this.createHtml());
    this.wrapper.append(this.root);
    this.trigger('onCreate');
    this.isCreate = true;
  },
  show: function () {
    if (!this.isCreate) this.create();
    this.root.show();
    this.trigger('onShow');
  },
  hide: function () {
    this.root.hide();
  }
});

var Alert = create(AbstractView, {

  createHtml: function () {
    return '<div class="alert">這里是alert框</div>';
  }
});

var AlertTitle = create(Alert, {
  initialize: function ($super) {
    this.title = '';
    $super();

  },
  createHtml: function () {
    return '<div class="alert"><h2>' + this.title + '</h2>這里是帶標題alert框</div>';
  },

  setTitle: function (title) {
    this.title = title;
    this.root.find('h2').html(title)
  }

});

var AlertTitleButton = create(AlertTitle, {
  initialize: function ($super) {
    this.title = '';
    $super();

    this.on('onShow', function () {
      var bt = $('<input type="button" value="點擊我" />');
      bt.click($.proxy(function () {
        alert(this.title);
      }, this));
      this.root.append(bt)
    });
  }
});

var v1 = new Alert();
v1.show();

var v2 = new AlertTitle();
v2.show();
v2.setTitle('我是標題');

var v3 = new AlertTitleButton();
v3.show();
v3.setTitle('我是標題和按鈕的alert');

http://sandbox.runjs.cn/show/ddlp7nlt

結語

希望這次繼承的文章對各位有幫助，此外文中錯誤請指出

親愛的道友們，我其實在我們團隊只是中等水平，我們上海攜程無線是一個優秀的團隊，
如果你現在正在找工作，請加入我們吧！！！
在我們團隊，你可以肆無忌憚的黑自己的老大，你會體會到和諧的氛圍，當然妹子多多的！
 
要求：靠譜前端，吃苦耐勞，待遇剛剛的！！！

需要的朋友可以私信我

順便推廣道友的jquery技術交流群：239147101