JavaScript中的this

函数的this在严格模式和非严格模式下会有所不同
严格模式：是采用具有限制性JavaScript变体的一种方式，从而使代码显示地 脱离“马虎模式/稀松模式/懒散模式“（sloppy）模式。

• 严格模式不仅仅是一个子集：它的产生是为了形成与正常代码不同的语义。
• 不支持严格模式与支持严格模式的浏览器在执行严格模式代码时会采用不同行为。
• 所以在没有对运行环境展开特性测试来验证对于严格模式相关方面支持的情况下，就算采用了严格模式也不一定会取得预期效果。严格模式代码和非严格模式代码可以共存，因此项目脚本可以渐进式地采用严格模式。
• 严格模式对正常的 JavaScript语义做了一些更改。

1. 严格模式通过抛出错误来消除了一些原有静默错误。
2. 严格模式修复了一些导致 JavaScript引擎难以执行优化的缺陷：有时候，相同的代码，严格模式可以比非严格模式下运行得更快。
3. 严格模式禁用了在ECMAScript的未来版本中可能会定义的一些语法

在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值，而不用考虑函数如何被调用的。ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this 的值将保持为闭合词法上下文的值）。

普通函数

const test = {
  prop: 42,
  func: function() {
    return this.prop;
  },
};
console.log(test.func()); // 42

箭头函数

const test = {
  prop: 42,
  func: () => {
    return this.prop;
  },
};
console.log(test.func()); // undefined

this概念

当前执行上下文（global、function 或 eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值

全局上下文

无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。

• 在执行全局代码之前将window确定为全局执行上下文
• 对全局数据进行预处理
  • var定义的全局变量==>undefined，添加为window属性
  • function声明的全局函数==>复制（fun），添加为window方法
  • this==>赋值（window）
• 开始执行全局代码

函数上下文

在函数内部，this的值取决于函数被调用的方式。
因为下面的代码不在严格模式下，且 this 的值不是由该调用设置的，所以 this 的值默认指向全局对象，浏览器中就是 window。
然而，在严格模式下，如果进入执行环境时没有设置 this 的值，this 会保持为 undefined
如果要想把 this 的值从一个环境传到另一个，就要用 call 或者apply 方法。

• 在调用函数，准备执行函数体之前，创建函数执行上下文对象（虚拟对象，存在于栈中）
• 对局部数据进行预处理
• 形参变量赋值给实参，实参添加为执行上下文的属性
• arguments==>赋值（实参列表），添加为执行上下文的属性
• var定义的局部变量==>undefined，添加为执行上下文的属性
• function声明的函数==>赋值（fun），添加执行上下文的方法
• this==>赋值（调用函数的对象）
• 开始执行函数体代码

函数上下文中的this

var obj = {a: 'Custom'};
var a = 'Global';
function whatsThis() {
	return this.a;
}
whatsThis(); // Global
whatsThis.call(obj); // Custom
whatsThis.apply(obj); // Custom

类上下文

this 在 类 中的表现与在函数中类似，因为类本质上也是函数，但也有一些区别和注意事项。
在类的构造函数中，this 是一个常规对象。类中所有非静态的方法都会被添加到 this 的原型中
静态方法不是 this 的属性，它们只是类自身的属性。

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

this和对象转化

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 第一个参数是用作“this”的对象
// 其余参数用作函数的参数
add.call(o, 5, 7); // 16

// 第一个参数是用作“this”的对象
// 第二个参数是一个数组，数组中的两个成员用作函数参数
add.apply(o, [10, 20]); // 34

在非严格模式下使用 call 和 apply 时，如果用作 this 的值不是对象，则会被尝试转换为对象。null 和 undefined 被转换为全局对象。原始值如 7 或 ‘foo’ 会使用相应构造函数转换为对象。因此 7 会被转换为 new Number(7) 生成的对象，字符串 ‘foo’ 会转换为 new String(‘foo’) 生成的对象。

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call('foo'); // [object String]
bar.call(undefined); // [object global]

this和对象转化

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 第一个参数是用作“this”的对象
// 其余参数用作函数的参数
add.call(o, 5, 7); // 16

// 第一个参数是用作“this”的对象
// 第二个参数是一个数组，数组中的两个成员用作函数参数
add.apply(o, [10, 20]); // 34

在非严格模式下使用 call 和 apply 时，如果用作 this 的值不是对象，则会被尝试转换为对象。null 和 undefined 被转换为全局对象。原始值如 7 或 ‘foo’ 会使用相应构造函数转换为对象。因此 7 会被转换为 new Number(7) 生成的对象，字符串 ‘foo’ 会转换为 new String(‘foo’) 生成的对象

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call('foo'); // [object String]
bar.call(undefined); // [object global]

bind方法

ECMAScript 5 引入了 Function.prototype.bind()。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var h = g.bind({a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty

var o = {a:37, f:f, g:g, h:h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

箭头函数

在箭头函数中，this与封闭词法环境的this保持一致。在全局代码中它将被设置为全局对象。

var globalObject = this
var foo = (() => this)
console.log(foo() === globalObject) // true

注意：如果将this传递给call、bind、或者apply来调用箭头函数，它将被忽略，如果非要使用，那么第一个参数要设置为null

原型链中的this

对于在对象原型链上某处定义方法，同样的概念也适用。如果该方法存在于一个对象的原型上，那么this指向的是这个调用方法的对象。

var obj = {
f: function() {
	return this.a + this.b
}
};
var p = Object.create(o)
p.a = 1
p.b = 4
console.log(p.f()) // 5

更多内容请参见