JavaScript的"类"
1. 基本创建“类”方式
var Class = function(){
var klass = function(){
this.init.apply(this, arguments);
};
klass.prototype.init = function(){};
return klass;
};
var Person = new Class();
Person.prototype.init = function(){
// 基于Person 的实例做初始化
};
Person.find = function(id){ /*...*/ };
Person.prototype.breath = function(){ /*...*/ };
Person.fn = Person.prototype;
Person.fn.run = function(){ /*...*/ };
// 用法
var person = new Person();
person.find(1);
person.breath();
person.run();
2. 分辨类的静态属性和实例的属性
var Class = function() {
var klass = function() {
this.init.apply(this, arguments);
};
klass.prototype.init = function() {};
//定义 prototype 的别名
klass.fn = klass.prototype;
// 定义类的别名
klass.fn.parent = klass;
// 给类添加属性
klass.extend = function(obj) {
var extended = obj.extended;
for (var i in obj) {
klass[i] = obj[i];
}
if (extended) extended(klass);
};
// 给实例添加属性
klass.include = function(obj) {
var included = obj.included;
for (var i in obj) {
klass.fn[i] = obj[i];
}
if (included) included(klass);
};
return klass;
};
var Person = new Class();
// 添加静态属性
Person.extend({
find: function(id) { /* ... */ },
exists: function(id) { /* ... */ }
});
//添加实例属性
Person.include({
save: function(id) { /* ... */ },
destroy: function(id) { /* ... */ }
});
var person = new Person();
person.save();
在类之间共享通用的属性
var ORMModule = {
save: function(){
// 共享的函数
}
};
var Person = new Class();
var Asset = new Class();
Person.include(ORMModule);
Asset.include(ORMModule);
JavaScript 是基于原型的编程语言，原型用来区别类和实例，这里提到一个概念：原型对象（prototypical object）。原型是一个“模板”对象，它上面的属性被用做初始化一个新对象。任何对象都可以作为另一个对象的原型对象，以此来共享属性。
当读取一个对象的属性时，JavaScript 首先会在本地对象中查找这个属性，如果没有找到，JavaScript 开始在对象的原型中查找，若还未找到还会继续查找原型的原型，直到查找到Object.prototype。如果找到这个属性，则返回这个值，否则返回undefined。
为了让子类继承父类的属性，首先需要定义一个构造函数。然后需要将父类的新实例赋值给构造函数的原型。
var Animal = function(){};
Animal.prototype.breath = function(){
console.log('breath');
};
var Dog = function(){};
// Dog 继承了Animal
Dog.prototype = new Animal();
Dog.prototype.wag = function(){
console.log('wag tail');
};
var dog = new Dog();
dog.wag();
dog.breath(); // 继承的属性
3. 添加继承，通过传入一个可选的父类来创建新类
var Class = function(parent) {
var klass = function() {
this.init.apply(this, arguments);
};
// 改变klass 的原型 只有实例的属性才会被继承，而非类的属性
if (parent) {
var subclass = function() { };
subclass.prototype = parent.prototype;
klass.prototype = new subclass;
};
klass.prototype.init = function() {};
//定义 prototype 的别名
klass.fn = klass.prototype;
// 定义类的别名
klass.fn.parent = klass;
klass._super = klass.__proto__;
// 给类添加属性
klass.extend = function(obj) {
var extended = obj.extended;
for (var i in obj) {
klass[i] = obj[i];
}
if (extended) extended(klass);
};
// 给实例添加属性
klass.include = function(obj) {
var included = obj.included;
for (var i in obj) {
klass.fn[i] = obj[i];
}
if (included) included(klass);
};
return klass;
};
var Animal = new Class();
Animal.include({
breath: function(){
console.log('breath');
}
});
var Cat = new Class(Animal);
var tommy = new Cat();
tommy.breath();
apply() 函数有两个参数：第1 个参数是上下文对象，第2 个参数是参数组成的数组。如果上下文对象是null，则使用全局对象代替。
call() 函数的行为和apply() 函数类似，只是使用方法不一样。call() 的第1 个参数是上下文对象，后续是实际传入的参数序列。
functionName.apply(this, [1, 2, 3]); functionName.call(this, 1, 2, 3);
使用apply() 和call() 来更改上下文对象
//为了访问原始上下文对象，可以将this 的值存入一个局部变量中。
var clicky = {
wasClicked: function(){ },
addListeners: function(){
var self = this;
$('.clicky').click(function(){
self.wasClicked();
});
}
};
clicky.addListeners();
//可以使用apply 来将这段代码变得更干净一些，通过将回调包装在另外一个匿名函数中，来保持原始的上下文
var proxy = function(func, thisObject){
return function(){
return func.apply(thisObject, arguments);
};
};
var clicky = {
wasClicked: function(){ },
addListeners: function(){
var self = this;
$('.clicky').click(proxy(this.wasClicked, this));
}
};
clicky.addListeners();
4. 控制“类”的作用域 在类和实例中都添加proxy函数
var Class = function(parent){
var klass = function(){
this.init.apply(this,arguments);
}
//继承
if (parent) {
var subclass = function() { };
subclass.prototype = parent.prototype;
klass.prototype = new subclass();
}
klass.prototype.init = function(){};
klass.fn = klass.prototype;
klass.fn.parent = klass;
klass._super = klass.__proto__;
//类 静态属性
klass.extend = function(obj){
var extended = obj.extended;
for(var i in obj){
klass[i] = obj[i];
}
if(extended) extended(klass);
}
//类 实例属性
klass.include = function(obj){
var included = obj.included;
for(var i in obj){
klass.fn[i] = obj[i];
}
if(included) included(klass);
}
//类 作用域
klass.proxy = function(func){
var self = this;
return(function(){
return func.apply(self, arguments);
});
}
klass.fn.proxy = klass.proxy;
return klass;
}
var Button = new Class();
Button.include({
init: function(element){
this.element = jQuery(element);
// 代理了这个click 函数
this.element.click(this.proxy(this.click));
},
click: function(){ }
});
