JavaScript中this的全面解析及常见实例

什么是this

在JavaScript中，this关键字代表当前函数执行的上下文环境。它是一个非常重要的概念，经常用来解决程序中的“上下文”问题。但由于this的指向不固定，所以很多开发者会因为混淆了this的指向而导致程序运行出错。

this关键字的指向是在函数被调用时动态绑定的，具体的指向既取决于调用函数的方式，也取决于函数执行时所处的上下文环境。下面让我们一起来看看this的常见用例及其指向规则。

五种常见的this指向

在JavaScript中，this关键字的指向一般有五种常见的情形。

情形一：全局环境中的this指向全局对象

当一个函数在全局环境中被调用时，this关键字会指向全局变量对象window。

function test() {
  console.log(this === window); // true
}
test();

在Node.js环境中，global对象被作为一个全局对象使用。所以在Node.js环境中，以下代码片段将输出true。

function test() {
  console.log(this === global); // true
}
test();

情形二：作为对象方法调用时的this指向该对象

当一个函数作为一个对象的方法被调用时，this关键字会指向该对象。

var obj = {
  name: "Jack",
  sayName: function() {
    console.log(this.name);
  }
};
obj.sayName(); // Jack

情形三：用call和apply方法调用时指定this的指向

当我们调用call和apply方法时，可以传入一个参数来指定函数执行时的this关键字的指向。call和apply方法的不同之处在于它们对参数的处理方式。call方法接受一个参数列表，而apply方法接受一个以数组形式表示的参数列表。

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

var obj1 = {
  name: "Jack"
};

var obj2 = {
  name: "Tom"
};

test.call(obj1); // Jack
test.call(obj2); // Tom

情形四：作为构造函数调用时创建新对象

当一个函数作为构造函数被调用时，通过new运算符创建一个新的对象，并给this关键字指向该新对象。

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

var obj1 = new Person("Jack");
var obj2 = new Person("Tom");

console.log(obj1.name); // Jack
console.log(obj2.name); // Tom

情形五：箭头函数中的this指向

在ES6新特性中引入的箭头函数中，this关键字的指向基于其外部（即定义时）的上下文，在箭头函数内部无法改变其指向。因此，箭头函数中的this指向与外部的上下文相同。

var obj = {
  num: 2,
  test: function() {
    var arr = [1, 2, 3];

    var multiple = arr.map((function(val) {
      return val * this.num;
    }).bind(this));

    console.log(multiple); // [2, 4, 6]
  }
};

obj.test();

在上面的例子中，我们使用了箭头函数的语法写了一个map方法的回调函数，在函数中使用了this.num来访问obj对象中的num属性。由于箭头函数是在定义时就绑定了this的指向，所以它可以正确地访问到obj对象中的属性。

总结

在JavaScript中，this关键字的指向一般有五种常见的情形。正确区分这五种情形非常重要，可以让我们更好地解决程序中的上下文问题。