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 的用法做个小例子，其他更深入的应用要
靠大家慢慢去领会了。

欢迎大家多多 拍砖！

评论

2 楼 hanazawakana 2012-11-06  

倒数第二个例子，关于为什么B没有继承A，我觉得也可以这样理解，B之所以没有继承A的prototype属性是由于A类并没有创建一个实例。一个类的prototype对象的属性必须需要实例化后才能拥有。

1 楼 tk1012 2012-06-04  

good