js里面call和apply

最新推荐文章于 2025-09-13 19:04:43 发布

转载最新推荐文章于 2025-09-13 19:04:43 发布 · 154 阅读

文章标签：

#function #prototype #c #object

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文深入探讨JavaScript中call与apply方法的区别与应用，通过具体示例解析如何使用这两个方法来实现构造函数的继承和方法的借用。文章还讨论了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"