JavaScript继承详解（五）
文章截图 - 更好的排版javascript
在本章中，咱们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance。
John Resig做为jQuery的创始人而声名在外。是《Pro JavaScript Techniques》的做者，并且Resig将会在今年秋天推出一本书《JavaScript Secrets》，很是期待。java
调用方式
调用方式很是优雅：
注意：代码中的Class、extend、_super都是自定义的对象，咱们会在后面的代码分析中详解。jquery
var Person = Class.extend({
// init是构造函数
init: function(name) {
this.name = name;
},
getName: function() {
return this.name;
}
});
// Employee类从Person类继承
var Employee = Person.extend({
// init是构造函数
init: function(name, employeeID) {
// 在构造函数中调用父类的构造函数
this._super(name);
this.employeeID = employeeID;
},
getEmployeeID: function() {
return this.employeeID;
},
getName: function() {
// 调用父类的方法
return "Employee name: " + this._super();
}
});
var zhang = new Employee("ZhangSan", "1234");
console.log(zhang.getName()); // "Employee name: ZhangSan" 说实话，对于完成本系列文章的目标-继承-而言，真找不到什么缺点。方法一如jQuery同样简洁明了。
代码分析
为了一个漂亮的调用方式，内部实现的确复杂了不少，不过这些也是值得的 - 一我的的思考带给了无数程序员快乐的微笑 - 嘿嘿，有点肉麻。
不过其中的一段代码的确迷惑我一段时间：程序员
fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; 我曾在几天前的博客中写过一篇文章专门阐述这个问题，有兴趣能够向前翻一翻。
// 自执行的匿名函数建立一个上下文，避免引入全局变量
(function() {
// initializing变量用来标示当前是否处于类的建立阶段，
// - 在类的建立阶段是不能调用原型方法init的
// - 咱们曾在本系列的第三篇文章中详细阐述了这个问题
// fnTest是一个正则表达式，可能的取值为（/\b_super\b/ 或 /.*/）
// - 对 /xyz/.test(function() { xyz; }) 的测试是为了检测浏览器是否支持test参数为函数的状况
// - 不过我对IE7.0,Chrome2.0,FF3.5进行了测试，此测试都返回true。
// - 因此我想这样对fnTest赋值大部分状况下也是对的：fnTest = /\b_super\b/;
var initializing = false, fnTest = /xyz/.test(function() { xyz; }) ? /\b_super\b/ : /.*/;
// 基类构造函数
// 这里的this是window，因此这整段代码就向外界开辟了一扇窗户 - window.Class
this.Class = function() { };
// 继承方法定义
Class.extend = function(prop) {
// 这个地方非常迷惑人，还记得我在本系列的第二篇文章中提到的么
// - this具体指向什么不是定义时能决定的，而是要看此函数是怎么被调用的
// - 咱们已经知道extend确定是做为方法调用的，而不是做为构造函数
// - 因此这里this指向的不是Object，而是Function（便是Class），那么this.prototype就是父类的原型对象
// - 注意：_super指向父类的原型对象，咱们会在后面的代码中屡次遇见这个变量
var _super = this.prototype;
// 经过将子类的原型指向父类的一个实例对象来完成继承
// - 注意：this是基类构造函数（便是Class）
initializing = true;
var prototype = new this();
initializing = false;
// 我以为这段代码是通过做者优化过的，因此读起来很是生硬，我会在后面详解
for (var name in prop) {
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn) {
return function() {
var tmp = this._super;
this._super = _super[name];
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
// 这个地方能够看出，Resig很会假装哦
// - 使用一个同名的局部变量来覆盖全局变量，非常迷惑人
// - 若是你以为拗口的话，彻底可使用另一个名字，好比function F()来代替function Class()
// - 注意：这里的Class不是在最外层定义的那个基类构造函数
function Class() {
// 在类的实例化时，调用原型方法init
if (!initializing && this.init)
this.init.apply(this, arguments);
}
// 子类的prototype指向父类的实例（完成继承的关键）
Class.prototype = prototype;
// 修正constructor指向错误
Class.constructor = Class;
// 子类自动获取extend方法，arguments.callee指向当前正在执行的函数
Class.extend = arguments.callee;
return Class;
};
})(); 下面我会对其中的for-in循环进行解读，把自执行的匿名方法用一个局部函数来替换， 这样有利于咱们看清真相：
(function() {
var initializing = false, fnTest = /xyz/.test(function() { xyz; }) ? /\b_super\b/ : /.*/;
this.Class = function() { };
Class.extend = function(prop) {
var _super = this.prototype;
initializing = true;
var prototype = new this();
initializing = false;
// 若是父类和子类有同名方法，而且子类中此方法（name）经过_super调用了父类方法
// - 则从新定义此方法
function fn(name, fn) {
return function() {
// 将实例方法_super保护起来。
// 我的以为这个地方没有必要，由于每次调用这样的函数时都会对this._super从新定义。
var tmp = this._super;
// 在执行子类的实例方法name时，添加另一个实例方法_super，此方法指向父类的同名方法
this._super = _super[name];
// 执行子类的方法name，注意在方法体内this._super能够调用父类的同名方法
var ret = fn.apply(this, arguments);
this._super = tmp;
// 返回执行结果
return ret;
};
}
// 拷贝prop中的全部属性到子类原型中
for (var name in prop) {
// 若是prop和父类中存在同名的函数，而且此函数中使用了_super方法，则对此方法进行特殊处理 - fn
// 不然将此方法prop[name]直接赋值给子类的原型
if (typeof prop[name] === "function" &&
typeof _super[name] === "function" && fnTest.test(prop[name])) {
prototype[name] = fn(name, prop[name]);
} else {
prototype[name] = prop[name];
}
}
function Class() {
if (!initializing && this.init) {
this.init.apply(this, arguments);
}
}
Class.prototype = prototype;
Class.constructor = Class;
Class.extend = arguments.callee;
return Class;
};
})();
写到这里，你们是否以为Resig的实现和咱们在第三章一步一步实现的jClass很相似。 其实在写这一系列的文章以前，我已经对prototype、mootools、extjs、 jQuery-Simple-Inheritance、Crockford-Classical-Inheritance这些实现有必定的了解，而且大部分都在实际项目中使用过。 在第三章中实现jClass也参考了Resig的实现，在此向Resig表示感谢。
下来咱们就把jClass改形成和这里的Class具备相同的行为。正则表达式
咱们的实现
将咱们在第三章实现的jClass改形成目前John Resig所写的形式至关简单，只须要修改其中的两三行就好了：浏览器
(function() {
// 当前是否处于建立类的阶段
var initializing = false;
jClass = function() { };
jClass.extend = function(prop) {
// 若是调用当前函数的对象（这里是函数）不是Class，则是父类
var baseClass = null;
if (this !== jClass) {
baseClass = this;
}
// 本次调用所建立的类（构造函数）
function F() {
// 若是当前处于实例化类的阶段，则调用init原型函数
if (!initializing) {
// 若是父类存在，则实例对象的baseprototype指向父类的原型
// 这就提供了在实例对象中调用父类方法的途径
if (baseClass) {
this._superprototype = baseClass.prototype;
}
this.init.apply(this, arguments);
}
}
// 若是此类须要从其它类扩展
if (baseClass) {
initializing = true;
F.prototype = new baseClass();
F.prototype.constructor = F;
initializing = false;
}
// 新建立的类自动附加extend函数
F.extend = arguments.callee;
// 覆盖父类的同名函数
for (var name in prop) {
if (prop.hasOwnProperty(name)) {
// 若是此类继承自父类baseClass而且父类原型中存在同名函数name
if (baseClass &&
typeof (prop[name]) === "function" &&
typeof (F.prototype[name]) === "function" &&
/\b_super\b/.test(prop[name])) {
// 重定义函数name -
// 首先在函数上下文设置this._super指向父类原型中的同名函数
// 而后调用函数prop[name]，返回函数结果
// 注意：这里的自执行函数建立了一个上下文，这个上下文返回另外一个函数，
// 此函数中能够应用此上下文中的变量，这就是闭包（Closure）。
// 这是JavaScript框架开发中经常使用的技巧。
F.prototype[name] = (function(name, fn) {
return function() {
this._super = baseClass.prototype[name];
return fn.apply(this, arguments);
};
})(name, prop[name]);
} else {
F.prototype[name] = prop[name];
}
}
}
return F;
};
})();
// 通过改造的jClass
var Person = jClass.extend({
init: function(name) {
this.name = name;
},
getName: function(prefix) {
return prefix + this.name;
}
});
var Employee = Person.extend({
init: function(name, employeeID) {
// 调用父类的方法
this._super(name);
this.employeeID = employeeID;
},
getEmployeeIDName: function() {
// 注意：咱们还能够经过这种方式调用父类中的其余函数
var name = this._superprototype.getName.call(this, "Employee name: ");
return name + ", Employee ID: " + this.employeeID;
},
getName: function() {
// 调用父类的方法
return this._super("Employee name: ");
}
});
var zhang = new Employee("ZhangSan", "1234");
console.log(zhang.getName()); // "Employee name: ZhangSan"
console.log(zhang.getEmployeeIDName()); // "Employee name: ZhangSan, Employee ID: 1234" JUST COOL!
相关文章
- 1. JavaScript继承详解
- 2. javascript继承详解
- 3. javascript对象继承详解
- 4. JavaScript继承方式详解
- 5. JavaScript继承详解（二）
- 6. JavaScript继承详解（四）
- 7. JavaScript继承详解（一）
- 8. JavaScript 继承方式详解
- 9. JavaScript继承详解（三）
- 10. JavaScript继承详解[转]
- 更多相关文章...
- • C# 继承 - C#教程
- • Swift 继承 - Swift 教程
- • Flink 数据传输及反压详解
- • RxJava操作符（五）Error Handling
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章