一文详解JavaScript中this指向的问题

JavaScript中的this是一个经常让人困惑的概念。它在不同的上下文中指向不同的值，这使得它的行为非常难以预测。本文将详细讲解JavaScript中this的几种不同情况及其原因。

什么是this？

首先，让我们明确一下this的定义。在JavaScript中，this的值取决于代码执行时的上下文。换句话说，它是由代码语境所定义的关键字，表示对当前代码执行环境的引用。因为this的值在执行代码的时候才确定，所以我们称之为动态上下文关键字。

全局上下文中的this

在全局上下文中，this的值是全局对象，即window对象（在浏览器中）。例如，以下代码输出的结果将是window对象：

console.log(this); // window

函数中的this

在函数中，this的值取决于它被如何调用。以下是几种不同场景下的函数调用方式以及对应的this值：

1.默认绑定

当函数被独立调用时，例如以下代码：

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

此时，test函数中的this将会指向全局对象window（在浏览器中）。这是因为test函数是在全局上下文中被执行的，所以this的值是全局对象。

2.对象方法调用

当我们将函数作为对象的方法调用时，如下所示：

var obj = { 
  name: 'Tom', 
  getName: function() {
    console.log(this)
  }
};
obj.getName();

此时，obj本身就是this的值，因为getName是作为obj的方法被调用的。因此，上面的代码将会输出obj对象。

3.构造函数调用

当我们使用new关键字创建一个新的实例时，构造函数中的this将指向新创建的实例对象。例如：

function Person(name) {
  this.name = name;
}
var p = new Person('Tom');
console.log(p); // Person{name: 'Tom'}

在上面的代码中，Person函数通过new关键字创建了一个新的实例对象，函数中的this指向的就是这个新创建的实例对象。

4.apply、call、bind调用

apply、call和bind都是用来显式地设置函数中的this的值。其中，apply和call的区别在于传递参数的方式不同。

var obj = { 
  name: 'Tom', 
  getName: function() {
    console.log(this.name)
  }
};
var obj2 = { name: 'Jerry' };

obj.getName(); // Tom

obj.getName.call(obj2); // Jerry

var getName2 = obj.getName.bind(obj2);
getName2(); // Jerry

以上代码中，我们通过call方法修改了obj.getName方法中的this指向，并将它修改为了obj2对象；通过bind方法创建一个新函数getName2，并将其this绑定到obj2对象。因此，调用getName2函数时，输出的结果将会是Jerry。

总结

在JavaScript中，this的值在不同的上下文中指向不同的对象。在全局上下文中，它指向全局对象window；在函数、对象方法、构造函数以及apply、call、bind调用中，它的指向则取决于代码的调用方式。通过掌握不同的this指向情况，我们可以避免产生预料之外的结果。

示例

以下是更多的示例，可以帮助你更好地理解this指向：

示例1. 默认绑定

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

var a = 1;
foo(); // 1

示例2. 隐式绑定

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

var obj = {
  a: 2,
  foo: foo
};

obj.foo(); // 2

示例3. 显式绑定

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

var obj = {
  a: 2
};

foo.call(obj); // 2

在以上示例中，我们可以看到不同的绑定方式都会影响this的指向。第一个示例中，函数foo作为独立函数被调用，因此this的值绑定到了全局对象；第二个示例中，函数foo作为对象obj的方法被调用，this的值绑定到了对象obj本身；第三个示例中，我们使用了call方法，显式地将函数foo中的this绑定到了obj对象。