JavaScript中this的所有指向

全局上下文

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

console.log(this === window) // true
this.a = 1
console.log(window.a) // 1

函数上下文

在函数内部，this的值取决于函数被调用的方式。

• 简单调用

function fn1() {
    return this
}
function fn2() {
    "use strict"
    return this
}
console.log(fn1()) // window
console.log(fn2()) // undefined

• call/apply调用
  如果要想把 this 的值从一个上下文传到另一个，就要用 call 或者apply 方法。如果传递给 this 的值不是一个对象，JavaScript 会尝试使用内部 ToObject 操作将其转换为对象。

// 将一个对象作为call和apply的第一个参数，this会被绑定到这个对象。
var obj = {a: 'Custom'};

// 这个属性是在global对象定义的。
var a = 'Global';

function whatsThis(arg) {
  return this.a;  // this的值取决于函数的调用方式
}

whatsThis();          // 'Global'
whatsThis.call(obj);  // 'Custom'
whatsThis.apply(obj); // 'Custom'
whatsThis.apply(1); // 等价于 whatsThis.apply(new Number(1))

• 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.f(), o.g(), o.h()); // 37, azerty, azerty

• 箭头函数
  在箭头函数中，this与封闭词法上下文（外层函数）的this保持一致。在全局代码中，它将被设置为全局对象

// 创建一个含有bar方法的obj对象，
// bar返回一个函数，
// 这个函数返回this，
// 这个返回的函数是以箭头函数创建的，
// 所以它的this被永久绑定到了它外层函数的this。
// bar的值可以在调用中设置，这反过来又设置了返回函数的值。
var obj = {
  bar: function() {
    var x = (() => this);
    return x;
  }
};

// 作为obj对象的一个方法来调用bar，把它的this绑定到obj。
// 将返回的函数的引用赋值给fn。
var fn = obj.bar();

// 直接调用fn而不设置this，
// 通常(即不使用箭头函数的情况)默认为全局对象
// 若在严格模式则为undefined
console.log(fn() === obj); // true

// 但是注意，如果你只是引用obj的方法，
// 而没有调用它
var fn2 = obj.bar;
// 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。
console.log(fn2()() == window); // true

• 作为对象的方法
  当函数作为对象里的方法被调用时，它们的 this 是调用该函数的对象，且不受函数定义方式或位置的影响,表明函数是从o的f成员调用的才是重点。

var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // logs 37

• 作为构造函数
  当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。
• 作为一个DOM事件处理函数
  当函数被用作事件处理函数时，它的this指向触发事件的元素
• 作为一个内联事件处理函数
  当代码被内联on-event 处理函数调用时，它的this指向监听器所在的DOM元素