JavaScript 之 “this” 关键字

JavaScript中最古怪的部分之一就是this对象。在我们日常开发中经常使用到 this 关键字，但是我们使用 this 时需要格外小心。

全局环境

在标准函数中，this 引用的是把函数当成方法调用的上下文对象。我们打开浏览器的控制台，输入 this ,我们就能看到 this 当前引用的是 window 对象。同样，当我们输入 this === window 的时候，返回结果也是true。

我们来看一个例子，在一个内部函数打印this,输出的结果是什么？

function someFunction() {
  console.log(this); // 这里打印的 this 是什么？
  return this;
}

你可能会说这里的this 将等于全局对象（或者严格模式下为undefined）。这个答案可能正确也可能不正确，因为this 是在代码执行期间确定的。但是一般来说，变量中的函数（不是对象方法）具有全局对象的this（严格模式下为undefined）：

function someFunction() {
  return this;
}

console.log(someFunction() === window); // true

该函数每次调用都会得到自己的 this 调用，常规调用下会有一个全局对象作为上下文，后面我们会说怎么来使用其他方法调用，使其this 不是全局对象。

常用用法

接下来，我们来看另一个例子。我们创建了一个具有属性和方法的对象，然后在该对象内部访问改对象的属性。

const myObject  = {
   value:66,
   getAnswer(){
       return this.value;
   }
}
const answer = myObject.getAnswer();
console.log(answer); // 66

我们可以看到在对象的方法中，this指向了该对象。就像前面说的this 是在代码执行期间确定的，一般来说，这个this 就是指向方法那个点前面的对象（无论深度多少层，它都是方法左侧最接近的那个对象）。如果函数或方法左侧没有调用对象的话，想象有一个全局对象在调用它（例如 window.someFunction()）
如果你将一个方法分配给另外一个变量，调用它之后，this指向的是新对象。

const myObject = {
  value: 66,
  getAnswer() {
    return this.value;
  },
};

const newObject = {
  value: 8888,
};
newObject.getAnswer = myObject.getAnswer; // 赋值给新的变量

const answer = newObject.getAnswer();
console.log(answer); // 8888

下面这个例子可以验证，当有多层深的对象调用方法时，this指向的是“最接近”的那个对象。

const a = {
    value: 42,
    b: {
      value: 3301,
      getContext: function() {
        console.log(this.value);
        return this;
      }
    }
  };
  
  console.log(a.b.getContext() === a.b); //  3301 true

现在我们返回本文最开始那个例子。有了最新的认识，我们知道，可以将函数赋值给某个对象的属性，在正常调用的情况下，this 指向赋值的那个属性的对象。

function someFunction() {
  return this;
}

const a = {
  b: 42,
  c: someFunction
};

console.log(a.c() === a); // true

棘手的例子

我们一起看下更多关于this 指向的例子。这些问题，还是要认真的应用有关引用和执行上下文的知识。

// 非严格模式下
const a = {
  b: 42,
  c: function () {
    console.log(this.b);
  },
};

(a.c || [])(); // undefined
(a.c)();         // 42
(1, a.c)();    // undefined

我们来一一讨论这三种情况。首先我们需要理解括号：如果将某些内容括在括号中，它将在内部返回一个表达式。所以第一个例子中，内部先执行了一个表达式然后返回它，再然后不带任何参数的执行了这个函数。我们可以将其重写成下面这种形式：

const method = a.c || [];
(method)();

根据前面的知识，我们知道，将方法赋值给变量，然后在函数左边不带任何内容的情况下调用它，就等于是把window 当做 this 的上下文进行调用。因此，除非window.b 有值，否则结果就是undefined。

第二个例子，还是像上面说的，括号不做任何事情，它只是返回内部的内容。所以就是如下的形式:

a.c(); // 方法c  里面的this指向a 对象。

最后一个示例使用了逗号运算符（逗号运算符，它将先计算左边的参数，再计算右边的参数值。然后返回最右边参数的值。），所以可以重写为下面这种形式

const method = a.c;
(method)();

Reference Type 解读

为什么 (a.c || [])(); 会返回 undefined，this 上下文会丢失呢。可以参考下 Reference Type

箭头函数

在 ES6 中新增了一个箭头函数的新功能。箭头函数写起来更简洁，但是更重要的是箭头函数没有自己的this对象，它的this 是外部环境中的this。下面的示例中，我们有使用setTimeout 回调：

const a = {
  b:66,
  c:function(cb){
    setTimeout(function(){
        return cb(this.b)
    },500)
  }
}
a.c(function (value){
  console.log(value);  // undefined
})

这里输出的是undefined，而不是66。根据前面的知识，我们已经知道了，传递的cb 回调函数，并没有绑定上下文，因此回调函数的上下文为全局的this。
怎么解决这个问题呢，在es6 之前，我们可以分配this 一个变量（一般变量名取self 或者 that）,然后我们在闭包中使用这个变量来获取值：

const a = {
  b:66,
  c:function(cb){
    const that = this;
    setTimeout(function(){
        return cb(that.b)
    },500)
  }
}
a.c(function (value){
  console.log(value);  // 66
})

现在我们可以直接使用箭头函数来解决这个问题。
箭头函数没有this, 也可以理解为箭头函数中的this 会继承定义函数时的上下文，还可以理解为和外层函数指向同一个this。

const a = {
  b: 66,
  c: function (cb) {
    setTimeout(() => {
      return cb(this.b);
    }, 500);
  },
};
a.c(function (value) {
  console.log(value); // 66
});