由浅入深讲解Javascript继承机制与simple-inheritance源码分析


Posted in Javascript onDecember 13, 2015

老生常谈的问题,大部分人也不一定可以系统的理解。Javascript语言对继承实现的并不好,需要工程师自己去实现一套完整的继承机制。下面我们由浅入深的系统掌握使用javascript继承的技巧。

1. 直接使用原型链

这是最简粗暴的一种方式,基本没法用于具体的项目中。一个简单的demo如下:

function SuperType(){
  this.property = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.property;
}
function SubType(){
  this.subproperty = false;
}
//继承
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
  return this.subproperty;
}
var instance = new SubType();

这种方式的问题是原型中的属性会被所用实例共享,通过一个实例改变一个继承过来的属性时,会影响到其他实例。,这显然不是一种常规意义上的继承。

2.使用构造函数

构造函数本质上也只是一个函数而已,可以在任何作用域中调用,在子构造函数中调用父构造函数,就可以实现简单的继承。

function SuperType(){
  this.colors = {"red","blue","green"}
}
function SubType(){
  SuperType.call(this);  
}
var instance = new SubType();

这种实现避免了多个实例共享属性的问题,但是又出现了新的问题,比如没法共享函数,而且 instance instanceof SuperType 为false。

3. 组合使用原型和构造函数

function SuperType(name){
  this.name = name;
  this.colors = {"red","blue","green"}
}
SuperType.prototype.sayName = function(){
  //code
}
function SubType(name,age){
  SuperType.call(this,name); 
  this.age = age;
}
SubType.prototype = new SuperType();
var instance = new SubType();

组合使用原型和构造函数是javascript中最常用的继承模式。使用这种方式,每个实例都有自己的属性,同时可以共享原型中的方法。但是这种方式的缺点是:无论什么情况,都会调用两次超类构造函数。一次是在创建子类原型时,另一次是在子类构造函数内部。这种问题该怎么解决呢?

4. 寄生组合式继承

SubType的原型并不一定非要是SuperType的实例,只需是一个构造函数的原型是SuperType的原型的普通对象就可以了。Douglas Crockford的方法如下:

function obejct(o){
  function F(){};
  F.prototype = o;
  return new F();
}

其实这也就是ES5中Object.create的实现。那么我们可以修改本文中的第3种方案:

function inheritPrototype(subType,superType){
  var prototype = object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}
function SuperType(name){
  this.name = name;
  this.colors = {"red","blue","green"}
}
SuperType.prototype.sayName = function(){
  //code
}
function SubType(name,age){
  SuperType.call(this,name); 
  this.age = age;
}
inheritPrototype(SubType,SuperType);
var instance = new SubTYpe();

其实寄生组合式继承已经是一种非常好的继承实现机制了,足以应付日常使用。如果我们提出更高的要求:比如如何在子类中调用父类的方法呢?

5.simple-inheritance库的实现

看这么难懂的代码,起初我是拒绝的,但是深入之后才发现大牛就是大牛,精妙思想无处不在。我对每一行代码都有详细的注释。如果你想了解细节,请务必详细研究,读懂每一行。我觉得这个实现最精妙的地方就是按需重写父类方法,在实例对象中可以通过_super调用父类的同名方法,类似于java的实现。

(function(){
  //initializing用于控制类的初始化,非常巧妙,请留意下文中使用技巧
  //fnTest返回一个正则比表达式,用于检测函数中是否含有_super,这样就可以按需重写,提高效率。当然浏览器如果不支持的话就返回一个通用正则表达式
  var initializing = false,fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
  //所有类的基类Class,这里的this一般是window对象
  this.Class = function(){};
  //对基类添加extend方法,用于从基类继承
  Class.extend = function(prop){
    //保存当前类的原型
    var _super = this.prototype;
    //创建当前类的对象,用于赋值给子类的prototype,这里非常巧妙的使用父类实例作为子类的原型,而且避免了父类的初始化(通过闭包作用域的initializing控制)
    initializing = true;
    var prototype = new this();   
    initializing = false;
    //将参数prop中赋值到prototype中,这里的prop中一般是包括init函数和其他函数的对象
    for(var name in prop){
      //对应重名函数,需要特殊处理,处理后可以在子函数中使用this._super()调用父类同名构造函数, 这里的fnTest很巧妙:只有子类中含有_super字样时才处理从写以提高效率
      prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name])?
       (function(name,fn){
        return function(){
          //_super在这里是我们的关键字,需要暂时存储一下
          var tmp = this._super; 
          //这里就可以通过this._super调用父类的构造函数了       
          this._super = _super[name];
          //调用子类函数 
          fn.apply(this,arguments);
          //复原_super,如果tmp为空就不需要复原了
          tmp && (this._super = tmp);
        }
       })(name,prop[name]) : prop[name];
    }
    //当new一个对象时,实际上是调用该类原型上的init方法,注意通过new调用时传递的参数必须和init函数的参数一一对应
    function Class(){
      if(!initializing && this.init){
        this.init.apply(this,arguments);  
      }
    }    
    //给子类设置原型
    Class.prototype = prototype;
    //给子类设置构造函数
    Class.prototype.constructor = Class;
    //设置子类的extend方法,使得子类也可以通过extend方法被继承
    Class.extend = arguments.callee;
    return Class;
  }
})();

通过使用simple-inheritance库,我们就可以通过很简单的方式实现继承了,是不是发现特别像强类型语言的继承。

var Human = Class.extend({
 init: function(age,name){
  this.age = age;
  this.name = name;
 },
 say: function(){
  console.log("I am a human");
 }
});
var Man = Human.extend({
  init: function(age,name,height){
    this._super(age,name);
    this.height = height;
  }, 
  say: function(){
    this._super();
    console.log("I am a man"); 
  }
});
var man = new Man(21,'bob','191');
man.say();

由浅入深讲解Javascript继承机制与simple-inheritance源码分析,希望本文分享能够帮助到大家。

Javascript 相关文章推荐
JavaScript 变量基础知识
Nov 07 Javascript
jQuery find和children方法使用
Jan 31 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
写一个Vue Popup组件
Feb 25 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
VUE脚手架具体使用方法
May 20 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
分享Javascript实用方法二
Dec 13 #Javascript
JavaScript判断按钮被点击的方法
Dec 13 #Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 #Javascript
JavaScript代码判断点击第几个按钮
Dec 13 #Javascript
JavaScript模块化开发之SeaJS
Dec 13 #Javascript
node.js require() 源码解读
Dec 13 #Javascript
JavaScript 模块的循环加载实现方法
Dec 13 #Javascript
You might like
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
如何用php获取文件名后缀
2013/06/09 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
最实用的jQuery分页插件
2016/10/09 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
python如何处理程序无法打开
2020/06/16 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
.NET是怎么支持多种语言的
2015/02/24 面试题
资料员岗位职责
2013/11/17 职场文书
党建工作先进材料
2014/05/02 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
考研经验交流会策划书
2015/11/02 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书