深入理解JavaScript中的call、apply、bind方法的区别

作者：异步漫步时间：2026-10-30 07:41:10浏览：648

本文详细解析JavaScript中改变函数this指向的三种核心方法：call、apply和bind。通过对比参数传递形式（直接列表与数组）、执行时机（立即执行与返回新函数）及返回值特性，阐明各自适用场景。文章结合具体代码示例，说明如何在对象方法复用、参数不确定处理及函数柯里化等场景中正确选择并应用这些方法，帮助开发者避免this指向错误。

JavaScript中this指向与上下文切换

在JavaScript中，this关键字的指向是动态变化的，开发过程中容易因上下文切换而意外破坏this的原始指向。为了解决这一问题，JavaScript提供了call、apply和bind三种方法，用于显式指定函数执行时的this对象。这一机制的存在，源于JavaScript中“定义时上下文”与“运行时上下文”的概念差异，以及上下文可被动态改变的特性。

call与apply方法详解

apply与call方法概述

apply方法的主要作用是应用某个对象的一个方法，并使用另一个对象替换当前上下文中的this对象。

call方法的主要作用是调用某个对象的一个方法，并使用另一个对象替换当前上下文中的this对象。


function person() {}
 
person.prototype = {
 attr: {age:18,sex:'girl'},
 say: function() {
  console.log("My age is " + this.attr.age);
  console.log("I am a " + this.attr.sex);
 }
}
 
var Marry = new person();
Marry.say();
 
// My age is 18
// I am a girl

核心功能：改变指向


function person() {}
 
person.prototype = {
 attr: {age:18,sex:'girl'},
 say: function() {
  console.log("My age is " + this.attr.age);
  console.log("I am a " + this.attr.sex);
 }
}
 
xiaoming ={ attr : {age:20,sex:'boy'} };
 
var Marry = new person();
Marry.say();
 
Marry.say.call(xiaoming);
// My age is 18
// I am a girl
// My age is 20
// I am a boy

共同点分析

call和apply都可以用来替代另一个对象调用一个方法，其核心作用是将函数的执行上下文从初始状态更改为由thisArg指定的新对象。

差异点分析

1、apply方法：最多接受两个参数，分别是新的this对象（thisArg）和一个参数数组（argArray）。如果传递多个参数，必须将它们封装在数组中；即使只有一个参数，也需放入数组。若argArray不是有效数组或arguments对象，将抛出TypeError。如果未提供thisArg和argArray，Global对象将被用作thisArg，且无法传递任何参数。


fun.call(thisArg[, arg1[, arg2[, ...]]])
 
function f(x,y){
 console.log(x+y);
}
f.call(null, 1, 1)
//return 2

2、call方法：接受直接的参数列表，主要用于JavaScript对象间方法的相互调用，以保持当前this指针的一致性，或在特殊情况下需要改变this指针时使用。如果未提供thisArg参数，Global对象将被用作thisArg。


fun.apply(thisArg, [argsArray])
 
function f(x,y){
 console.log(x+y);
}
f.call(null, [1,1])
//return 2

apply和call的功能本质相同，区别仅在于传入参数的形式。thisArg是你希望指定的上下文，它可以是任何JavaScript对象（因为JavaScript中一切皆对象）。call要求将参数按顺序逐个传递，而apply则要求将参数封装在一个数组中传递。

如果目标函数的参数数量不固定，当参数数量明确已知时，建议使用call；当参数数量不确定时，建议使用apply，并将参数push进数组后传递。在函数内部，也可以通过arguments对象遍历所有传入的参数。以下展示几种典型用法。

示例代码一


var array1 = [12 , "foo" , {name:"Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
console.log(array1);
//[12, "foo", Object, -2458, "Doe", 555, 100]

示例代码二


var numbers = [5, 458 , 120 , -215 ];
Math.max.apply(null,numbers);
//458

示例代码三


log(12 , "foo" , {name:"Joe"} , -2458);
function log(){
 var args = Array.prototype.slice.call(arguments);
 args.unshift('(app)');
 console.log.apply(console, args);
};
// (app) 12 foo Object {name: "Joe"} -2458

bind方法特性与使用

bind方法概述


fun.bind(thisArg[, arg1[, arg2[, ...]]])

与apply和call不同，bind方法会返回一个改变了this指向的新函数。这里强调的是“新函数”，它与原函数不共享同一内存地址。因此，当需要重复使用这个函数时，必须将其保存到一个变量中，以便后续调用。前两种方法返回的是执行结果（即调用即执行），而bind返回的是函数本身。

此外，bind函数中的第一个参数会自动成为返回的新函数的默认参数。在正式调用时，只需提供除第一个参数外的剩余参数即可。


function f(x,y){
 console.log(x+y);
}
f.call(null, [1,1])
var new_f = f.bind(null,1,1)
//return new function
new_f(1)
//return 2

需要注意的是，上述所有示例代码中的thisArg参数均使用null代替。在未指定thisArg对象的情况下，当thisArg为null或undefined时，this指向全局对象，即JavaScript代码的执行环境。

三种方法的综合对比

apply、call与bind的综合比较


var obj = {bar: 'Oops , this is a bad idea' };
 
var foo = {
  get: function() {
    return this.bar;
  }
}
 
var bind = foo.get.bind(obj) ,call = foo.get.call(obj) ,apply = foo.get.apply(obj);
 
console.log(bind(),call,apply);
console.log(bind,call,apply); 
 
console.log(typeof bind,typeof call,typeof apply);
console.log(typeof bind(),typeof call,typeof apply);

JavaScript中this指向与上下文切换

主要区别在于：当你希望改变上下文环境后并非立即执行，而是作为回调函数稍后执行时，应使用bind()方法。而apply和call则会立即执行函数。


apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
bind是返回对应函数，便于稍后调用；apply、call则是立即调用

以上关于JavaScript中call、apply和bind方法区别的详细解析到此结束，希望能为读者提供参考，并欢迎大家支持本站。

作者最新文章

D3.js 比例尺与坐标轴的配置详解

2026-11-05 16:54:46

JavaScript怎么遍历对象的Symbol键和不可枚举属性

2026-11-05 13:13:39

封装一个健壮的JS字符串判空工具函数

2026-11-05 12:16:14

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

2026-11-05 11:22:29

JavaScript立即执行函数(IIFE)是什么及基本语法

2026-11-05 10:51:19