本文详细介绍如何在 JavaScript 中模拟 Base.js 的继承机制。通过定义 Klass.extendClass 方法，利用临时构造函数 F 和原型链赋值，实现子类对父类原型及静态属性的正确继承。文章提供了完整的 Klass 扩展逻辑及 A、B、C 三级继承的测试代码，展示了构造函数调用、属性访问及方法覆盖的具体行为，帮助开发者深入理解 JS 面向对象继承的核心原理。
JavaScript 模拟 Base.js 继承机制
本文通过一个具体实例，讲解如何在 JavaScript 中模拟 Base.js 的继承功能。该实现方式可供开发者参考学习。
Klass 核心扩展逻辑
var Klass = function() {};
Klass.extendClass = (function() {
var F = function() {};
return function(C, P) {
F.prototype = P.prototype;
C.prototype = new F();
C.uper = P.prototype;
C.prototype.constructor = C;
};
})();
Klass.extend = function(props) {
var _slice = Array.prototype.slice;
var Glass = function() {
/*if (Glass.uper && Glass.uper.hasOwnProperty("init")) {
Glass.uper.init.apply(this, _slice.call(arguments))
}*/
if (Glass.prototype.hasOwnProperty("init")) {
Glass.prototype.init.apply(this, _slice.call(arguments));
}
};
Klass.extendClass(Glass, this);
Glass.extend = this.extend;
for (var key in props) {
if (props.hasOwnProperty(key)) {
Glass.prototype[key] = props[key];
}
}
return Glass;
};
具体示例代码如下：
多级继承测试示例
var A = Klass.extend({
init: function(name) {
this.name = name;
console.log('A constructor is running!');
},
getName: function() {
return this.name;
}
});
var B = A.extend({
init: function(name) {
this.name = name;
console.log('B constructor is running!');
},
getName: function() {
return this.name;
},
a: 'b'
});
var C = B.extend({
init: function(name) {
console.log('C constructor is running!');
},
c: 'c',
getName: function() {
var name = C.uper.getName.call(this);
return 'Hi, I\'m' + this.name;
}
});
var c1 = new C('zlf');
console.log(c1.getName());
如需了解更多 JavaScript 相关知识，建议查阅本站相关专题，包括《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》以及《JavaScript数学运算用法总结》。
希望上述关于 JavaScript 程序设计的分享能为您提供帮助。