JavaScript 中 this 是什么？

一提到this感觉整个人都不好了，之前对于this总是弄不清。有时候弄不清楚也不太确定它的指向的时候，为了保险起见总在当前的作用范围中使用const _this = this;然后在后文中使用_this来进行操作。不知道有没有和我一样的小伙伴呢，今天就再把恼人的this整理一下，概要理解和掌握的还是需要深究。以免以后再掉入this的坑里。

为什么会有 this

this机制提供了更优雅的方式来隐含地“传递”一个对象引用，有更加干净的API设计和更容易的复用。

一起看下下面这段代码

function identify() {
  return this.name.toUpperCase();
}

function speak() {
  var greeting = "Hello, I'm " + identify.call(this);
  console.log(greeting);
}

var me = { name: 'xiaoqiang' };
var you = { name: 'Edwin' };

identify.call(me); // XIAOQIANG
identify.call(you); // EDWIN
speak.call(me); // Hello, I'm XIAOQIANG
speak.call(you); // Hello, I'm EDWIN

这个代码片段允许identify()和speak()函数对多个环境对象（me和you）进行复用，而不是针对每个对象定义函数的分离版本。

与使用this相反地，你可以明确地将环境对象传递给identify()和speak()。

function identify(context) {
    return context.name.toUpperCase();
}

function speak(context) {
    var greeting = "Hello, I'm " + identify(context);
    console.log(greeting);
}

identify(you); // EDWIN
speak(me); // Hello, I'm XIAOQIANG

通过对比发现this机制提供了更优雅的方式来隐含地“传递”一个对象引用，导致更加干净的API设计和更容易的复用。

你的使用模式越复杂，你就会越清晰地看到：将执行环境作为一个明确参数传递，通常比传递this执行环境要乱。当我们探索对象和原型时，你将会看到一组可以自动引用恰当执行环境对象的函数是多么有用。

this不是编写时绑定，而是运行时绑定。

在函数内部，this的值取决于函数被调用的方式。它依赖于函数调用的上下文条件。this绑定和函数声明的位置无关，反而和函数被调用的方式有关。

this的调用主要有下面几种情况

纯粹的函数调用

这是最常见的调用方式，这是函数内部指向的是全局对象。然而在非严格模式和严格模式('use strict')下全局对象却不同。所以运行结果也不同

var name = 'xiaoqiang';
function showName () {
    // 'use strict'
    console.log(this.name);
}
showName(); 
// 非严格模式 => 'xiaoqiang'
// 严格模式 => 报错(Cannot read property 'name' of undefined)

作为对象方法的调用

函数还可以作为某个对象的方法调用，这时this就指调用此方法的对象。

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

var foo = {};
foo.name = 'hello';
foo.showName = showName;

foo.showName(); // => 'hello'
// 这里因为是对象foo调用了showName, 因此showName中的this指向的foo所以输出的就是foo.name, 也就是'hello'

作为构造函数调用

所谓构造函数，就是通过这个函数，可以生成一个新对象。这种情况，this就指这个新对象。

var defaultName = '全局对象';
function User () {
    this.defaultName = '新用户';
}

var s1 = new User();
console.log(s1.defaultName); // => '新用户'
console.log(defaultName); // => '全局对象'

通过apply call 等方法调用

apply() call是函数的一个方法，作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此，这时this指的就是这第一个参数。

apply() call的参数为空时，默认调用全局对象。

var name = 'global name';
function test() {
　console.log(this.name);
}

var obj = {};
obj.name = 'obj name';
obj.m = test;

obj.m.apply() // => 'global name'
obj.m.apply(obj); // => 'obj name'
obj.m.apply({ name: 'new object name'}); // => 'new object name'

this的指向的确定主要是确定其运行的上下文环境和调用的对象，我想只要分析出代码执行时候this的运行上下文环境就可以确定其正确的值。当然还需要注意在函数内部严格模式和非严格模式时this如果指向的是全局对象，则其值会有所不同。

参考文章

你不懂JS: this 与对象原型

this - mdn