前言

this是非常重要的，理解this对我们日后处理业务代码的时候提供很大的帮助。看了很多资料与回答发现讲到this都是晦涩得难以理解，决定自己好好研究一下。

this到底是什么

首先，this是在运行时绑定的，并不是编写时绑定的，他的上下文取决于函数调用时的各种条件。因此，this的绑定和函数声明的位置没有任何关系，而是由调用方式决定的。this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。

调用位置

this指向什么完全取决于函数在哪里被调用。在哪里被调用就是函数在代码中被调用的位置（不是声明的位置）。通常来说，寻找调用位置就是寻找“函数被调用的位置”，但是做起来并没有这么简单，因为某些编程模式可能会隐藏真正的调用位置。最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数)。我们关心的调用位置就在当前正在执行的函数的前一个调用中。调用栈相当于函数调用链，如下面例子：

function one(){
    //当前调用栈是：one，所以调用位置是全局作用域
    console.log('one');
    one();//one的调用位置
}

function two(){
    //当前调用栈是：one > two ，所以调用位置是one
    console.log('two');
    two();//two的调用位置
}

function three(){
    //当前调用栈是：one > two > three，所以调用位置是two
    console.log('three');
}

one(); //one的调用位置

绑定规则

那函数执行时的调用位置是如何决定this的绑定对象的呢。首先我们要找到函数的调用位置，有四条规则可以用来判断this该绑定到哪里，这四条规则分别是：默认绑定、隐式绑定、显式绑定、new绑定。下面来一一介绍：

默认绑定

JavaScript中最常用的函数调用类型是独立函数调用类型：

function default(){
    console.log(this.val);
}

var val = 1;
default(); // 1

当调用default()时，this.val被解析为全局变量val，函数调用时应用了 this 的默认绑定，因此 this 指向全局对象。在代码中，default() 是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，无法应用其他规则。

如果使用严格模式(strict mode)，那么全局对象将无法使用默认绑定，因此 this 会绑定到 undefined:

function default(){
'use strict';
    console.log(this.val);
}

var val = 1;
default(); // TypeError: this is undefined

这里有一个微妙但是非常重要的细节，虽然 this 的绑定规则完全取决于调用位置，但是只有 default() 运行在非 strict mode 下时，默认绑定才能绑定到全局对象;严格模式下与 default() 的调用位置无关。

隐式绑定

这个规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含。

function ninja() { 
    console.log( this.a );

}

var obj = { 
    a: 2,
    ninja: ninja
};

obj.ninja(); // 2

首先需要注意的是 ninja() 的声明方式，及其之后是如何被当作引用属性添加到 obj 中的。但是无论是直接在 obj 中定义还是先定义再添加为引用属性，这个函数严格来说都不属于 obj 对象。

然而，调用位置会使用obj上下文来引用函数，因此你可以说函数被调用时 obj 对象“拥有”或者“包含”它。

当ninja() 被调用时，它的落脚点确实指向 obj 对象。当函数引用有上下文对象时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。因为调用 ninja() 时 this 被绑定到 obj，因此 this.a 和 obj.a 是一样的。对象属性引用链中只有最顶层或者说最后一层会影响调用位置。例如：

function ninja() { 
    console.log( this.a );
}

var obj2 = { 
    a: 11,
    ninja: ninja 
};

var obj1 = { 
    a: 1,
    obj2: obj2 
};

obj1.obj2.ninja(); // 11

隐式丢失

一个最常见的 this 绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说它会应用默认绑定，从而把 this 绑定到全局对象或者 undefined 上，取决于是否是严格模式。

function foo() { 
    console.log( this.a );
}

var obj = { 
    a: 2,
    foo: foo 
};

var bar = obj.foo; // 函数别名!
var a = "oops, global"; // a 是全局对象的属性 bar(); // "oops, global"

虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是 foo 函数本身，因此此时的 bar() 其实是一个不带任何修饰的函数调用，因此应用了默认绑定。

一种更微妙、更常见并且更出乎意料的情况发生在传入回调函数时:

function foo() { 
    console.log( this.a );
}
function doFoo(fn) {
    // fn 其实引用的是 foo 
    fn(); // <-- 调用位置!
}

var obj = { 
    a: 2,
    foo: foo 
};

var a = "oops, global"; // a 是全局对象的属性 
doFoo( obj.foo ); // "oops, global"

参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值，所以结果和上一个例子一样。

如果把函数传入语言内置的函数而不是传入你自己声明的函数，会发生什么呢?结果是一样的，没有区别:

function foo() { 
    console.log( this.a );
}

var obj = { a: 2,

foo: foo };

var a = "oops, global"; // a 是全局对象的属性 
setTimeout( obj.foo, 100 ); // "oops, global"

JavaScript 环境中内置的 setTimeout() 函数实现和下面的伪代码类似:

function setTimeout(fn,delay) { 
    // 等待 delay 毫秒\
    fn(); // <-- 调用位置!
}

显式绑定

可以使用函数的 call(..) 和 apply(..) 方法来进行显式绑定，JavaScript 提供的绝大多数函数以及你自己创建的所有函数都可以使用 call(..) 和 apply(..) 方法。

使用方法

call(..) 和 apply(..)的第一个参数是一个对象，它们会把这个对象绑定到 this，接着在调用函数时指定这个 this。因为你可以直接指定 this 的绑定对象，这就是显式绑定。

function foo(){
    console.log(this.a)
}

var obj = {a:1};

foo.call(obj); //1

通过 foo.call(..)，我们可以在调用 foo 时强制把它的 this 绑定到 obj 上。

如果你传入了一个原始值(字符串类型、布尔类型或者数字类型)来当作 this 的绑定对象，这个原始值会被转换成它的对象形式(也就是new String(..)、new Boolean(..)或者 new Number(..))。这通常被称为“装箱”。但是，显式绑定仍然无法解决之前提出的丢失绑定问题。

解决丢失绑定问题--硬绑定

先上代码：

function foo() { 
    console.log( this.a );
}

var obj = { 
    a:2
};

var bar = function() {
    foo.call( obj );
};

bar(); // 2
setTimeout( bar, 100 ); // 2

// 硬绑定的 bar 不可能再修改它的 this 
bar.call( window ); // 2

解析一下这个代码，首先创建了函数 bar()，并在它的内部手动调用了 foo.call(obj)，因此强制把 foo 的 this 绑定到了 obj。无论之后如何调用函数 bar，它总会手动在 obj 上调用 foo。这种绑定是一种显式的强制绑定，称之为硬绑定。

硬绑定的典型应用场景就是创建一个包裹函数，传入所有的参数并返回接收到的所有值。因为经常会用到硬绑定，在 ES5 中提供了内置的方法 Function.prototype.bind，用法如下：

function pie(args){
    console.log(this.a, args);
    return this.a + args;
}

var obj = {a:2}

var bar = pie.bind(obj);

var b = bar(3); //2 3
console.log(b); //5

bind(..) 会返回一个硬编码的新函数，它会把参数设置为 this 的上下文并调用原始函数。

API调用的“上下文”

第三方库的许多函数，以及 JavaScript 语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，通常被称为“上下文”(context)，其作用和 bind(..) 一样，确保你的回调函数使用指定的 this。

举例来说:

function foo(el) {
    console.log( el, this.id );
}

var obj = {
    id: "awesome"
};

// 调用 foo(..) 时把 this 绑定到 obj 
[1, 2, 3].forEach( foo, obj );
// 1 awesome 2 awesome 3 awesome

这些函数实际上就是通过 call(..) 或者 apply(..) 实现了显式绑定，这样你可以少些一些代码。

new绑定

在介绍new绑定之前，先了解一下构造函数，构造函数是使用new操作符调用的普通函数，使用new来调用函数，或者发生构造函数调用时，会有一下执行步骤：

创建一个全新的对象。
新对象被执行[[prototype]]连接
新对象绑定到函数调用的this
函数若没有返回其他对象，new表达式中的函数调用会自动返回这个新对象

上代码：

function pie(a) { 
    this.a = a;
}

var bar = new pie(2); 
console.log( bar.a ); // 2

使用 new 来调用 pie(..) 时，会构造一个新对象并把它绑定到 pie(..) 调用中的 this 上。new 是最后一种可以影响函数调用时 this 绑定行为的方法，这就是 new 绑定。

绑定优先级问题

最后的最后，讨论一下优先级的问题：

函数是否在new中调用(new绑定)?如果是的话，this绑定的是新创建的对象。

        var bar = new foo()

函数是否通过call、apply(显式绑定)或者硬绑定调用?如果是的话，this绑定的是指定的对象。

var bar = foo.call(obj2)

函数是否在某个上下文对象中调用(隐式绑定)?如果是的话，this 绑定的是那个上下文对象。

var bar = obj1.foo()

如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局对象。

       var bar = foo()

但是凡事总有例外，例外的例外，箭头函数并不是使用 function 关键字定义的，而是使用被称为“胖箭头”的操作符 => 定义的。箭头函数不使用 this 的四种标准规则，而是根据外层(函数或者全局)作用域来决定 this，具体来说，箭头函数会继承外层函数调用的 this 绑定(无论 this 绑定到什么)。

总之，this真的有点麻烦[裂开]。

JavaScript中的this到底是什么？

前言