JavaScript中改变函数内部this指向的三种方法

理解函数的本质与默认绑定

在探讨如何改变 this 之前，必须明确一个概念：函数在JavaScript中本质上是一种特殊的变量。无论是通过函数声明定义，还是通过变量赋值定义的匿名函数，其本身只是一个可执行的代码块。

function a() {
  console.log(this);
}

var b = function() {
  console.log(this);
};

在没有明确绑定关系时，全局环境下独立调用的函数，其 this 默认指向全局对象（在非严格模式下为 window）。此外，需要注意嵌套函数的 this 不会继承外层函数的 this，而是遵循自身的绑定规则，通常也指向全局对象。这种特性决定了我们必须主动管理 this 的流向。

方法一：通过对象属性隐式绑定

这是最直观的绑定方式。当一个函数作为某个对象的属性被调用时，该对象会自动成为函数内部的 this 指向。这就是所谓的“隐式绑定”。

操作说明：将函数赋值给对象的某个属性，然后通过该对象调用此函数。

var obj = {
  name: 'Object A',
  fn: function() {
    console.log(this === obj); // true
    console.log(this.name);    // 'Object A'
  }
};

obj.fn(); // 此时 this 指向 obj

关键点：这种绑定不是传递性的。如果将该函数提取出来单独调用，它将失去原有的 this 指向，回归到默认的全局绑定状态。

方法二：通过 new 关键字显式实例化

当函数作为构造函数使用，前面加上 new 关键字时，JavaScript引擎会创建一个全新的空对象，并将这个新对象的内部原型链接到构造函数的 prototype，同时将该新对象绑定为函数内部的 this。

执行过程拆解：

1. 创建一个空对象 {}。
2. 将该对象的 [[Prototype]] 链接到构造函数的 prototype 属性上。
3. 将 this 指向这个新创建的对象，并执行函数体以初始化属性。
4. 返回这个新对象（除非函数显式返回了一个非对象类型的值）。

function Person(name) {
  this.name = name;
}

var p = new Person('Alice');
console.log(p.name); // 'Alice'

方法三：通过 call、apply 和 bind 强制绑定

这是最灵活且常用的改变 this 指向的手段。这三个方法的第一个参数都用于指定函数执行时 this 要指向的目标对象。

• apply: 接受两个参数，第一个是 this 指向，第二个是一个参数数组。
  
  

  function greet(city, country) {
    console.log(this.name + ' lives in ' + city + ', ' + country);
  }
  var user = { name: 'Bob' };
  greet.apply(user, ['Beijing', 'China']); // Bob lives in Beijing, China

• call: 功能与 apply 相同，但后续参数需要逐个列出。
  
  

  greet.call(user, 'Tokyo', 'Japan'); // Bob lives in Tokyo, Japan

• bind: 与上述两者不同，bind 返回的是一个新函数，而不是直接执行原函数。这个新函数的 this 会被永久绑定到指定对象，无论之后如何调用，this 都不会再改变。

实际应用：实现类数组对象的遍历

在实际开发中，我们常利用这种灵活性来处理类似数组的对象（如 arguments 或 DOM集合）。下面演示一个简单的模拟 jQuery each 方法的原理，通过 apply 将回调函数的 this 绑定到当前遍历的元素上。

function forEach(links, callback) {
  for (var i = 0; i < links.length; i++) {
    // 将每个 link 元素作为 this 传递给回调函数
    callback.apply(links[i]);
  }
}

// 获取页面上所有的链接
var anchors = document.getElementsByTagName('a');

forEach(anchors, function() {
  // 这里的 this 就是当前的  元素
  this.style.color = 'red';
});

通过这种方式，开发者可以在不改变循环逻辑的前提下，让回调函数拥有对当前元素的直接访问权限，极大地提升了代码的可读性和复用性。

总结

JavaScript 的 this 机制看似复杂，实则遵循严格的调用栈规则。通过对象点语法触发隐式绑定，通过 new 构建新实例，或通过 call/apply/bind 手动强制定向，是解决 this 问题的三大基石。理解并熟练运用这三种方法，能够显著提升代码的控制力和健壮性。

以上就是JavaScript中改变函数内部this指向的三种方法的详细内容，更多关于JavaScript this指向的资料请关注本站其它相关文章！