老生常谈的问题,大部分人也不一定可以系统的理解。Javascript语言对继承实现的并不好,需要工程师自己去实现一套完整的继承机制。下面我们由浅入深的系统掌握使用javascript继承的技巧。
这是最简粗暴的一种方式,基本没法用于具体的项目中。一个简单的demo如下:
这种方式的问题是原型中的属性会被所用实例共享,通过一个实例改变一个继承过来的属性时,会影响到其他实例。,这显然不是一种常规意义上的继承。
函数
构造函数本质上也只是一个函数而已,可以在任何作用域中调用,在子构造函数中调用父构造函数,就可以实现简单的继承。
这种实现避免了多个实例共享属性的问题,但是又出现了新的问题,比如没法共享函数,而且 instance instanceof SuperType 为false。
函数
组合使用原型和构造函数是javascript中最常用的继承模式。使用这种方式,每个实例都有自己的属性,同时可以共享原型中的方法。但是这种方式的缺点是:无论什么情况,都会调用两次超类构造函数。一次是在创建子类原型时,另一次是在子类构造函数内部。这种问题该怎么解决呢?
SubType的原型并不一定非要是SuperType的实例,只需是一个构造函数的原型是SuperType的原型的普通对象就可以了。Douglas Crockford的方法如下:
其实这也就是ES5中Object.create的实现。那么我们可以修改本文中的第3种方案:
其实寄生组合式继承已经是一种非常好的继承实现机制了,足以应付日常使用。如果我们提出更高的要求:比如如何在子类中调用父类的方法呢?
看这么难懂的代码,起初我是拒绝的,但是深入之后才发现大牛就是大牛,精妙思想无处不在。我对每一行代码都有详细的注释。如果你想了解细节,请务必详细研究,读懂每一行。我觉得这个实现最精妙的地方就是按需重写父类方法,在实例对象中可以通过_super调用父类的同名方法,类似于java的实现。
函数中是否含有_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库,我们就可以通过很简单的方式实现继承了,是不是发现特别像强类型语言的继承。
由浅入深讲解Javascript继承机制与simple-inheritance源码分析,希望本文分享能够帮助到大家。
原文链接:https://www.f2er.com/js/51126.html