改变javascript函数内部this指针指向的三种方法，js如何改变this指向

在JavaScript开发中,控制函数执行上下文是高级编程的核心技能。改变javascript函数内部this指针指向的三种方法，分别是使用call()方法、apply()方法和bind()方法。这是解决执行上下文丢失、实现函数借用与模块化开发的基石。 这三种方法虽然目标一致，但在参数传递、执行时机和返回值上存在本质区别，理解并熟练运用这三者，是区分初级开发者与资深工程师的重要分水岭。

三足鼎立的this指向控制权

JavaScript中的this指针动态多变，它总是指向最后调用它的那个对象，但在复杂的应用场景中，我们往往需要强制改变这一指向。call()、apply()、bind()均属于Function原型上的方法，它们能够显式绑定this的指向。

call()和apply()属于立即执行策略，改变指向的同时会立刻运行函数；而bind()属于延迟执行策略，它返回一个新的函数引用，等待后续调用。这是最核心的区别，决定了它们在异步回调和立即处理场景中的不同应用。

call()精准打击的立即执行

call()方法是最直接的this绑定方式，它接受一个参数列表，第一个参数是this要指向的对象，后续参数则是传递给函数的普通参数。

核心语法：function.call(thisArg, arg1, arg2, ...)

1. 立即执行特性：当调用call()时，原函数会立即运行，这适用于需要即时处理数据的场景。
2. 参数逐一传递：这是call()与apply()的主要区别，如果函数需要两个参数，就必须在call中按顺序传入。
3. 典型应用场景：实现继承，在ES6之前，构造函数借用是实现继承的标准模式，子类构造函数中通过Parent.call(this, arguments)，将父类的属性继承到子类实例中。

专业示例：

function Product(name, price) {
  this.name = name;
  this.price = price;
}
function Food(name, price, category) {
  // 关键点：使用call将Product的this指向Food的实例
  Product.call(this, name, price);
  this.category = category;
}
const cheese = new Food('feta', 5, 'dairy');
// cheese.name为'feta'，成功继承了Product的属性

这种模式在源码分析和老旧项目维护中极为常见,体现了call()在对象属性扩充方面的权威性。

apply()数组驱动的函数借用

apply()方法与call()极为相似，唯一的区别在于参数的形式。apply()接受两个参数：this指向的对象和一个参数数组。

核心语法：function.apply(thisArg, [argsArray])

1. 数组参数特性：当函数参数已经存在于一个数组中时，apply()是最佳选择，它避免了将数组拆解为参数列表的繁琐过程。
2. 典型应用场景：数学计算与数组操作，在ES6展开运算符出现之前，Math.max()无法直接接收数组，必须依赖apply()。
3. 函数借用机制：这是JavaScript高阶技巧的体现，对象可以借用其他对象的方法，而无需通过原型链继承。

权威解决方案：

const numbers = [5, 6, 2, 3, 7];
// 借用Math对象的max方法，this指向Math，参数为数组
const max = Math.max.apply(null, numbers); 
// 输出7

在这个案例中,null作为第一个参数，因为在非严格模式下，null会被转换为全局对象，而Math.max内部并不依赖this，这是一种利用语言特性的专业写法。apply()在处理不定长参数列表时展现出了极高的灵活性。

bind()预设上下文的延迟绑定

bind()方法是ES5引入的重要特性，它与其他两者的最大区别在于：它不立即执行函数，而是返回一个新的函数。 这个新函数的this被永久绑定到指定的对象上。

核心语法：let boundFunc = func.bind(thisArg, arg1, arg2, ...)

1. 返回新函数：这被称为“柯里化”的部分实现，原函数保持不变，生成了一个具备预设this的新函数。
2. 典型应用场景：事件处理与异步回调，在React类组件开发或DOM事件监听中，经常需要将类的方法作为回调函数传递，此时this容易丢失，bind()是解决这一问题的标准方案。
3. 不可变性：一旦通过bind()绑定了this，无论后续如何调用新函数，this指向都不会改变。

实战代码解析：

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};
const unboundGetX = module.getX;
// 此时this指向全局对象，调用unboundGetX()通常返回undefined
const boundGetX = unboundGetX.bind(module);
// 强制绑定this为module对象
console.log(boundGetX()); // 输出 42

bind()提供了稳定的上下文环境，是构建健壮事件驱动程序的基石。

深度对比与最佳实践

为了更直观地理解这三种方法,我们需要从执行时机和参数形式两个维度进行对比。

执行时机对比：

• call / apply：“借刀杀人”，借用别人的方法，立刻处理当前的数据，适合一次性操作。
• bind：“未雨绸缪”，提前准备好工具（函数），等到特定时机（如点击事件触发）再使用，适合回调函数。

参数形式对比：

• call / bind：参数列表，如 (obj, arg1, arg2)。
• apply：参数数组，如 (obj, [arg1, arg2])。

性能考量：
在现代JavaScript引擎优化下，三者的性能差异微乎其微，但在处理极大量数据时，call和bind由于直接传递参数，通常比apply的数组解构略快，代码的可读性和语义化通常比微小的性能差异更重要。

常见误区与避坑指南：

1. 连续绑定无效：bind返回的函数再次调用bind或call，this指向不会改变。bind是“硬绑定”。
2. new操作符优先级更高：如果使用new关键字调用bind返回的函数，this会指向新创建的实例，而非bind绑定的对象，这是原型链继承机制的体现。

掌握改变javascript函数内部this指针指向的三种方法，不仅是语法层面的记忆，更是对JavaScript执行上下文、作用域链及原型链深刻理解的体现，开发者应根据是否需要立即执行、参数的数据结构以及是否需要复用函数，来灵活选择最合适的方案。

相关问答

在React类组件中，为什么经常需要在构造函数constructor中绑定this？

解答： 在React中，当你将一个类的方法作为回调函数传递给事件处理器（如onClick={this.handleClick}）时，该方法在触发时会脱离原本的类上下文，导致this指向undefined（严格模式下），在构造函数中使用this.handleClick = this.handleClick.bind(this)，实际上是利用bind方法创建了一个新的函数实例，该实例的this被永久绑定到当前组件实例，这确保了无论事件何时触发，方法内部的this始终指向正确的组件，从而能够访问this.state和this.props。

call、apply和bind方法在严格模式和非严格模式下，第一个参数传入null或undefined时，行为有何不同？

解答： 这是一个考察JavaScript底层机制的细节问题，对于call和apply：

• 非严格模式：如果第一个参数传入null或undefined，函数内部的this会指向全局对象（浏览器中是window，Node.js中是global）。
• 严格模式：函数内部的this会严格保持为null或undefined，不会进行自动装箱。

对于bind方法：

• 无论是严格模式还是非严格模式,如果bind的第一个参数是null或undefined，被绑定后的函数在调用时，其this都会指向全局对象（非严格模式）或保持undefined（严格模式），具体取决于被绑定函数执行时的环境模式，但通常建议始终显式传递一个具体的对象，以避免不可预期的行为。

如果您在JavaScript开发中遇到过this指向丢失的诡异Bug，或者有独特的apply妙用技巧，欢迎在评论区分享您的实战经验。