详解JavaScript中call与apply关键字的作用

作者:拾光时间:2026-10-30 17:02:02浏览:416

本文详细解析JavaScript中call与apply关键字的核心作用。两者均用于指定函数执行时的this指向,其中apply接收参数数组,call接收离散参数。文章通过代码示例演示了如何利用这两个方法修正this指向、借用构造函数实现继承以及调用其他对象函数,帮助开发者深入理解其语法差异与实际应用场景。

call与apply的基本概念

深入解析JavaScript中call与apply关键字的具体作用。

apply方法接收两个参数:第一个参数用于指定函数体内this对象的指向,第二个参数则是一个带有下标的集合(数组)。

call可以视为apply的语法糖形式。当参数数量固定时,使用call可以直接传入离散参数,无需再构建带下标的集合。

call与apply的代码示例


var func = function(a,b,c)
{
 alert(a + b + c);
}
func.apply(null,[1,2,3]);//弹出6
func.call(null,1,2,3);//弹出6

当apply与call传入的第一个参数为null时,函数体内的this会指向window。

当apply与call传入的第一个参数为null时,函数体内的this会指向window。

call与apply的主要用途

call与apply的主要用途包括:

1、改变this的指向

修正this指向


var obj1 = {
 name = '刘备'
}
 
var obj2 = {
 name = '曹操'
}
var getName = function(){
 alert(this.name);
}
 
window.name = '三国';
getName();//弹出"三国"
getName.call(obj1);//弹出"刘备"
getName.call(obj2);//弹出"曹操"

因此,在某些情况下如果this被意外改变了指向,可以使用call或apply来修正this的指向。


document.getElementById('div1').onclick = function(){
 alert(this.id);//div1
 var fun1 = function(){
  alert(this.id);//window.id 即undefined
 }
 fun1();//普通函数的方式调用,this指代window,相当于window.id 即 undefined
}

由于是普通函数的方式调用,上面的例子中this已经变成了window。下面看看如何使用call进行修正。


document.getElementById('div1').onclick = function(){
 alert(this.id);
 var fun1 = function(){
  alert(this.id);
 }
 fun1.call(this);//强制函数内的this为外层的this,
}

2、调用其他对象的函数

示例1:

借用构造函数实现继承


var obj1 = {
 a:1,
 b:2,
 add:function()
 {
  return this.a + this.b;
 }
}
var obj2 = {
 a:1,
 b:2,
}
var result = obj1.add.call(obj2);//用obj1的函数来计算obj2的两个属性的和
alert(result);//输出3

示例2:借用构造函数实现类似继承的效果


var A = function(name)
{
 this.name = name;
};
var B = function(){
 A.apply(this,arguments)
}
B.prototype.getName = function(){
 return this.name;
}
var b = new B('刘备');
alert(b.getName());

以上就是本文的内容,有问题可以和小编联系,谢谢对本站的支持!

作者最新文章