由浅入深讲解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之对系统的toFixed()方法的修正
May 08 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
分享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
多重?l件?合查?(一)
2006/10/09 PHP
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python抓取京东图书评论数据
2014/08/31 Python
Python下载网络小说实例代码
2018/02/03 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
工地食品安全责任书
2015/05/09 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python