先上源码:
JS = {};
// 这个是库的源代码;
JS.Class = function(classDefinition) {
//返回目标类的真正构造器
function getClassBase() {
return function() {
//它在里面执行用户传入的构造器construct
//preventJSBaseConstructorCall是为了防止在createClassDefinition辅助方法中执行父类的construct
if (typeof this['construct'] === 'function' && preventJSBaseConstructorCall === false) {
this.construct.apply(this, arguments);
}
};
}
//为目标类添加类成员与原型成员
function createClassDefinition(classDefinition) {
//此对象用于保存父类的同名方法
var parent = this.prototype["parent"] || (this.prototype["parent"] = {});
for (var prop in classDefinition) {
if (prop === 'statics') {
for (var sprop in classDefinition.statics) {
this[sprop] = classDefinition.statics[sprop];
}
} else {
//为目标类添加原型成员,如果是函数,那么检测它还没有同名的超类方法,如果有
if (typeof this.prototype[prop] === 'function') {
var parentMethod = this.prototype[prop];
parent[prop] = parentMethod;
}
this.prototype[prop] = classDefinition[prop];
}
}
}
//其实就是这样的Base = function() {};别想太多了;
var preventJSBaseConstructorCall = true;
var Base = getClassBase();
preventJSBaseConstructorCall = false;
createClassDefinition.call(Base, classDefinition);
//用于创建当前类的子类
Base.extend = function(classDefinition) {
//其实就是这样的Base = function() {};别想太多了;
preventJSBaseConstructorCall = true;
var SonClass = getClassBase();
SonClass.prototype = new this();//将一个父类的实例当作子类的原型
preventJSBaseConstructorCall = false;
createClassDefinition.call(SonClass, classDefinition);
SonClass.extend = this.extend;
return SonClass;
};
return Base;
};
在webpack、es6、typescript等技术盛行的年代其实并不太需要这种库,但我们还是当做好玩来研究一下吧,或者做一些小项目又不想es6转es5代码的,可以让代码更清晰。
看一下想要创建一个类是怎样进行的
var Animal = JS.Class({
//construct就代表构造函数
construct: function(name) {
//声明一个public属性
this.name = name;
},
//声明一个public方法
shout: function(s) {
console.log(s);
}
});
var animal = new Animal();
animal.shout('animal'); // animal
是不是已经和其他语音的类很像了,实现继承也很简单。
var Dog = Animal.extend({
construct: function(name, age) {
//调用父类构造器 等价于ES6的super()
this.parent.construct.apply(this, arguments);
this.age = age;
},
run: function(s) {
console.log(s);
}
});
var dog = new Dog("dog", 4);
//可以直接调用父类的方法
dog.shout("dog"); // dog
dog.run("run"); // run
继承也很简单,而且也可以直接调用父类的方法。而且就算父类方法重名也可以调用。
var Shepherd = Dog.extend({
//静态成员这样声明
statics: {
TYPE: "Shepherd"
},
run: function() {
//方法链,调用超类同名方法
this.parent.run.call(this, "fast");
}
});
console.log(Shepherd.TYPE); //Shepherd
var shepherd = new Shepherd("shepherd", 5);
shepherd.run(); //fast
有继承、有静态方法、可以调用父类方法,基本上满足了类的需要,让代码更清晰,也弥补了es6之前没有类的缺憾。