this

全局上下文

无论是否在严格模式下，在全局执行上下文中（在任何函数体外部）this 都指代全局对象。
函数上下文
在函数内部，this的值取决于函数被调用的方式。

简单调用

不在严格模式下，且 this 的值不是由该调用设置的，所以 this 的值默认指向全局对象。

function f1() {
return this;
}
//在浏览器中：
f1() === window; //在浏览器中，全局对象是window
//在Node中：
f1() === global;

在严格模式下，this将保持他进入执行上下文时的值。如果 this 没有被执行上下文（execution context）定义，那它将保持为 undefined。

function f2() {
"use strict"; // 这里是严格模式
return this;
}
f2() === undefined; // true

如果要想把 this 的值从一个上下文传到另一个，就要用 call 或者apply方法。

// 将一个对象作为call和apply的第一个参数，this会被绑定到这个对象。
var obj = { a: 'Custom' };
// 这个属性是在global对象定义的。
var a = 'Global';
function whatsThis(arg) {
return this.a; // this的值取决于函数的调用方式
}

console.log(whatsThis()); // 'Global'
console.log(whatsThis.call(obj)); // 'Custom'
console.log(whatsThis.apply(obj)); // 'Custom'

当一个函数在其主体中使用 this 关键字时，可以通过使用函数继承自Function.prototype 的 call 或 apply 方法将 this 值绑定到调用中的特定对象。

function add(c, d) {
return this.a + this.b + c + d;
}
var o = { a: 1, b: 3 };
// 第一个参数是作为‘this’使用的对象
// 后续参数作为参数传递给函数调用
console.log(add.call(o, 5, 7)); // 1 + 3 + 5 + 7 = 16
// 第一个参数也是作为‘this’使用的对象
// 第二个参数是一个数组，数组里的元素用作函数调用中的参数
console.log(add.apply(o, [10, 20])); // 1 + 3 + 10 + 20 = 34

使用 call 和 apply 函数的时候要注意，如果传递给 this 的值不是一个对象，JavaScript 会尝试使用内部 ToObject 操作将其转换为对象。

function bar() {
console.log(Object.prototype.toString.call(this));
} //原始值 7 被隐式转换为对象
console.log(bar.call(7)); // [object Number]

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

function f() {
return this.a;
} v
ar 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保持一致。在全局代码中，它将被设置为全局对象：

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

注意：如果将this传递给call、bind、或者apply，它将被忽略。不过你仍然可以为调用添加参数，不过第一个参数（thisArg）应该设置为null。

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true
// 作为对象的一个方法调用
var obj = { foo: foo };
console.log(obj.foo() === globalObject); // true
// 尝试使用call来设定this
console.log(foo.call(obj) === globalObject); // true
// 尝试使用bind来设定this
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

// 创建一个含有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

在上面的例子中，一个赋值给了 obj.bar的函数（称为匿名函数 A），返回了另一个箭头函数（称为匿名函数 B）。因此，在 A 调用时，函数B的this被永久设置为obj.bar（函数A）的this。当返回的函数（函数B）被调用时，它this始终是最初设置的。在上面的代码示例中，函数B

的this被设置为函数A的this，即obj，所以即使被调用的方式通常将其设置为 undefined 或全局对象（或者如前面示例中的其他全局执行上下文中的方法），它的 this 也仍然是 obj 。

作为对象的方法
当函数作为对象里的方法被调用时，它们的 this 是调用该函数的对象。

var o = {
　　prop: 37,
　　f: function () {
　　　　return this.prop;
　　}
};

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

var o = { prop: 37 };
function independent() {
　　return this.prop;
} 
o.f = independent;
console.log(o.f()); // logs 37

this 的绑定只受最靠近的成员引用的影响

var o = { prop: 37 };
function independent() {
　　return this.prop;
}

o.b = { g: independent, prop: 42 };
console.log(o.b.g()); // 42

原型链中的 this

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

var o = {
    f: function () {
        return this.a + this.b;
    }

};

var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); // 5

Object.create()是将对象继承到__proto__属性上。

Object.create()方法接受两个参数:Object.create(obj,propertiesObject) ;

obj:一个对象，应该是新创建的对象的原型。

propertiesObject：可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符。

getter 与 setter 中的 this

用作 getter 或 setter 的函数都会把 this 绑定到设置或获取属性的对象。

function sum() {
return this.a + this.b + this.c;} 
var o = {
　　a: 1,
　　b: 2,
　　c: 3,
　　get average() {
　　　　return (this.a + this.b + this.c) / 3;
　　}
};
Object.defineProperty(o, 'sum', {
　　get: sum,
　　enumerable: true,
　　configurable: true
});
console.log(o.average, o.sum); // 2, 6

作为构造函数
当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。

function C() {
    this.a = 37;
} 
var o = new C();
console.log(o.a); // logs 37
function C2() {
    this.a = 37;
    return { a: 38 };
} 
o= new C2();
console.log(o.a); // logs 38

在刚刚的例子中（C2），因为在调用构造函数的过程中，手动的设置了返回对象，与this绑定的默认对象被丢弃了。（这基本上使得语句“this.a = 37;”成了“僵尸”代码，实际上并不是真正的“僵尸”，这条语句执行了，但是对于外部没有任何影响，因此完全可以忽略它）。
作为一个DOM事件处理函数
当函数被用作事件处理函数时，它的this指向触发事件的元素（一些浏览器在使用非addEventListener的函数动态添加监听函数时不遵守这个约定）。

// 被调用时，将关联的元素变成蓝色
function bluify(e) {
    console.log(this === e.currentTarget); // 总是 true
    //当 currentTarget 和 target 是同一个对象时为 true
    console.log(this === e.target);
    this.style.backgroundColor = '#A5D9F3';
} 
// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');
// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', bluify, false);
}

作为一个内联事件处理函数

当代码被内联on-event 处理函数调用时，它的this指向监听器所在的DOM元素

<button onclick="alert(this.tagName.toLowerCase());">
    Show this
</button>
// button
<button onclick="alert((function(){return this})());">
    Show inner this
</button>0.
//[object window]

没有设置内部函数的this时，它指向 global/window 对象（即非严格模式下调用的函数未设置this时指向的默认对象）。