日期:2014-05-16  浏览次数:20308 次

js call和apply
官方定义:调用一个对象的一个方法,以另一个对象替换当前对象。
我对js里面call和apply的理解是回调父类的方法,并将父类实例化到当前对象的prototype上。
其实对此一直都比较模糊,只能通过一些例子来加深一些理解。

var color = "red";
function sayColor(p) {
	alert(p + this.color);
};
sayColor();//弹出undefinedred;
var obj = new Object();
obj.color = "blue";
sayColor.call(obj, "color is ");//弹出color is blue
//sayColor.apply(obj, ["color is "]);

/*
第一次 调用sayColor 里面的this 的上下文是window 所以this.color = red;
第二次 sayColor.call(obj, "color is ");obj是传过去的上下文,"color is "是参数(可传多个)
所以当执行sayColor的时候 this就是obj,this.color = blue;
*/

function ClassA(c) {
         this.color = c;
	this.sayColor = function () {
		alert(this.color);
	};
}

function ClassB(c, n) {
	ClassA.apply(this, arguments);
	this.name = n;
	this.sayName = function () {
		alert(this.name);
	};
}
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();	//输出 "blue"
objB.sayColor();	//输出 "red"
objB.sayName();	//输出 "John"

/*
以上的例子 我们可以知道
1.apply方法 改变 ClassA的 this 传过去的this==ClassB ; arguments == [c,n]
2.ClassB继承了 ClassA的sayColor方法
在这里就有一个疑问了 这样的继承是否就跟prototype 一样呢?
*/
function ClassA(c) {
	this.color = c;
}
ClassA.prototype.sayColor = function () {
	alert(this.color);
};
function ClassB(c, n) {
	ClassA.call(this, c);
	this.name = n;
}

var objB = new ClassB("red", "cxy");
objB.sayColor();	//运行报错 不存在这个方法

/*
由此可见ClassB并没有完全继承ClassA。
有一种解释是 call/apply 是继承实例对象,而prototype是继承原型对象。
更通俗一些是 call/apply 是值类型的继承,而prototype是引用类型的继承。
*/

给一个完整的例子
function ClassA(c) {
	this.color = c;
}
ClassA.prototype.sayColor = function () {
	alert(this.color);
};
function ClassB(c, n) {
	ClassA.call(this, c);
	this.name = n;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
	alert(this.name);
};

var objA = new ClassA("blue");
var objB = new ClassB("red", "cxy");
objA.sayColor();	//输出 "blue"
objB.sayColor();	//输出 "red"
objB.sayName();	//输出 "cxy"


本文,作为抛砖引玉,只对 call和apply 的用法做个小例子,其他更深入的应用要
靠大家慢慢去领会了。

欢迎大家多多 拍砖!
1 楼 tk1012 2012-06-04  
good