【一次面试】再谈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