公开记录学习JS MVC,不知道能坚持多久= =。以《基于MVC的JavaScript web富应用开发》为主要学习资料。接上一篇类的学习,发现实在是看晕了,有些例子是能看懂在干嘛,但是不知道为什么这样做,有的甚至看不懂,真是博大精深!
基于原型的类继承
JavaScript 是基于原型的编程语言,原型用来区别类和实例。原型是一个“模板”对象,它上面的属性被用做初始化一个新对象。任何对象都可以作为另一个对象的原型对象,以此来共享属性。实际上,可以将其理解为某种形式的继承。
当读取一个对象的属性时,JavaScript 首先会在本地对象中查找这个属性,如果没有找到,JavaScript 开始在对象的原型中查找,若还未找到还会继续查找原型的原型,直到查找到Object.prototype。如果找到这个属性,则返回这个值,否则返回undefined。例如,给 Array.prototype 添加了属性,那么所有的 JavaScript 数组都具有了这些属性。
让子类继承父类的属性的方法:
先定义一个构造函数,然后将父类的新实例赋值给构造函数的原型:
// 父,动物大类
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 dog1 = new Dog;
dog1.wag();
dog1.breath(); // 继承的属性
给“类”库添加继承
通过传入一个可选的父类来创建新类,这个可以作为创建类的基础模板:
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(){};
// 定义别名
klass.fn = klass.prototype;
klass.fn.parent = klass;
klass._super = klass.__proto__;
/* include/extend 相关的代码…… */
return klass;
};
如果将parent 传入Class 构造函数,那么所有的子类则共享同一个原型。这种创建
临时匿名函数的小技巧避免了在继承类的时候创建实例,这里暗示了只有实例的属性才会被继承,而非类的属性【我没读懂这句和上面代码的关系,感觉已经晕了 = =】。设置对象的proto ;属性并不是所有浏览器都支持,类似Super.js的类库则通过属性复制的方式来解决这
个问题,而非通过固有的动态继承的方式来实现。
通过给Class 传入父类来实现简单的继承:
var Animal = new Class;
Animal.include({
breath: function(){
console.log('breath');
}
});
var Cat = new Class(Animal);
// 用法
var tommy = new Cat;
函数调用
在JavaScript中,函数和其他东西一样都是对象。和其他对象不同的是,函数可调用。函数内上下文,如this 的取值,取决调用它的位置和方法。
除了使用方括号可以调用函数之外,还有其他两种方法可以调用函数:apply()
和 call()
。两者的区别在于传入函数的参数的形式。
apply()
函数有两个参数:第1个参数是上下文,第2个参数是参数组成的数组。如果上下文是null,则使用全局对象代替。例如:
function.apply(this, [1, 2, 3])
call()
的第1个参数是上下文,后续是实际传入的参数序列:
function.call(this, 1, 2, 3);
JavaScript 中允许更换上下文是为了共享状态,尤其是在事件回调中。jQuery 在其API 的实现中就利用了apply() 和call() 来更改上下文,比如在事件处理程序中或者使用each() 来做迭代时。
$('.clicky').click(function(){
// ‘this’指向当前节点
$(this).hide();
});
$('p').each(function(){
// ‘this’指向本次迭代
$(this).remove();
});
为了访问原始上下文,可以将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));
}
};
上面的例子中在点击事件的回调中指定了要使用的上下文;jQuery中调用这个函数所用的上下文就可以忽略了。实际上jQuery也包含了实现了这个功能的API——jQuery.proxy()
:
$('.clicky').click($.proxy(function(){ /* ... */ }, this));
使用apply()
和call()
还有其他很有用的原因,比如“委托”。可以将一个调用委托给另一个调用,甚至可以修改传入的参数:
var App {
log: function(){
if (typeof console == "undefined") return;
// 将参数转换为合适的数组
var args = jQuery.makeArray(arguments);
// 插入一个新的参数
args.unshift("(App)");
// 委托给console
console.log.apply(console, args);
}
};
这个例子中首先构建了一个参数数组,然后将参数添加进去,最后将这个调用委托给了console.log()
。arguments
变量是解释器内置的当前调用的作用域内用来保存参数的数组。但它并不是真正的数组,比如它是不可变的,因此需要通过jQuery.makeArray()
将其转换为可用的数组。