JavaScript 继承详解(三)(2)

我们可以通过为实例化对象提供一个base的属性,来指向父类(构造函数)的原型,如下:

// 当前是否处于创建类的阶段
var initializing = false;
function jClass(baseClass, prop) {
// 只接受一个参数的情况 - jClass(prop)
if (typeof (baseClass) === "object") {
prop = baseClass;
baseClass = null;
}
// 本次调用所创建的类(构造函数)
function F() {
// 如果当前处于实例化类的阶段,则调用init原型函数
if (!initializing) {
// 如果父类存在,则实例对象的base指向父类的原型
// 这就提供了在实例对象中调用父类方法的途径
if (baseClass) {
this.base = baseClass.prototype;
}
this.init.apply(this, arguments);
}
}
// 如果此类需要从其它类扩展
if (baseClass) {
initializing = true;
F.prototype = new baseClass();
F.prototype.constructor = F;
initializing = false;
}
// 覆盖父类的同名函数
for (var name in prop) {
if (prop.hasOwnProperty(name)) {
F.prototype[name] = prop[name];
}
}
return F;
};
调用方式: var Person = jClass({
init: function(name) {
this.name = name;
},
getName: function() {
return this.name;
}
});
var Employee = jClass(Person, {
init: function(name, employeeID) {
// 调用父类的原型函数init,注意使用apply函数修改init的this指向
this.base.init.apply(this, [name]);
this.employeeID = employeeID;
},
getEmployeeID: function() {
return this.employeeID;
},
getName: function() {
// 调用父类的原型函数getName
return "Employee name: " + this.base.getName.apply(this);
}
});

var zhang = new Employee("ZhangSan", "1234");
console.log(zhang.getName()); // "Employee name: ZhangSan"

目前为止,我们已经修正了在第一章手工实现继承的种种弊端。 通过我们自定义的jClass函数来创建类和子类,通过原型方法init初始化数据, 通过实例属性base来调用父类的原型函数。

唯一的缺憾是调用父类的代码太长,并且不好理解, 如果能够按照如下的方式调用岂不是更妙:

var Employee = jClass(Person, {
init: function(name, employeeID) {
// 如果能够这样调用,就再好不过了
this.base(name);
this.employeeID = employeeID;
}
});
优化jClass函数 // 当前是否处于创建类的阶段
var initializing = false;
function jClass(baseClass, prop) {
// 只接受一个参数的情况 - jClass(prop)
if (typeof (baseClass) === "object") {
prop = baseClass;
baseClass = null;
}
// 本次调用所创建的类(构造函数)
function F() {
// 如果当前处于实例化类的阶段,则调用init原型函数
if (!initializing) {
// 如果父类存在,则实例对象的baseprototype指向父类的原型
// 这就提供了在实例对象中调用父类方法的途径
if (baseClass) {
this.baseprototype = baseClass.prototype;
}
this.init.apply(this, arguments);
}
}
// 如果此类需要从其它类扩展
if (baseClass) {
initializing = true;
F.prototype = new baseClass();
F.prototype.constructor = F;
initializing = false;
}
// 覆盖父类的同名函数
for (var name in prop) {
if (prop.hasOwnProperty(name)) {
// 如果此类继承自父类baseClass并且父类原型中存在同名函数name
if (baseClass &&
typeof (prop[name]) === "function" &&
typeof (F.prototype[name]) === "function") {

// 重定义函数name -
// 首先在函数上下文设置this.base指向父类原型中的同名函数
// 然后调用函数prop[name],返回函数结果

// 注意:这里的自执行函数创建了一个上下文,这个上下文返回另一个函数,
// 此函数中可以应用此上下文中的变量,这就是闭包(Closure)。
// 这是JavaScript框架开发中常用的技巧。
F.prototype[name] = (function(name, fn) {
return function() {
this.base = baseClass.prototype[name];
return fn.apply(this, arguments);
};
})(name, prop[name]);

} else {
F.prototype[name] = prop[name];
}
}
}
return F;
};
此时,创建类与子类以及调用方式都显得非常优雅,请看: var Person = jClass({
init: function(name) {
this.name = name;
},
getName: function() {
return this.name;
}
});
var Employee = jClass(Person, {
init: function(name, employeeID) {
this.base(name);
this.employeeID = employeeID;
},
getEmployeeID: function() {
return this.employeeID;
},
getName: function() {
return "Employee name: " + this.base();
}
});

var zhang = new Employee("ZhangSan", "1234");
console.log(zhang.getName()); // "Employee name: ZhangSan"

至此,我们已经创建了一个完善的函数jClass, 帮助我们在JavaScript中以比较优雅的方式实现类和继承。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjwzww.html