this全面解析

调用位置

在理解 this 的绑定过程之前，首先要理解调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置）。函数调用位置的不同会造成 this 绑定对象的不同

最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数）。我们关心的调用位置就在当前正在执行的函数的前一个调用中。

function baz() {

// 当前调用栈是：baz

// 因此，当前调用位置是全局作用域

console.log( "baz" );

bar(); // <-- bar 的调用位置

}

function bar() {

// 当前调用栈是 baz -> bar

// 因此，当前调用位置在 baz 中

console.log( "bar" );

foo(); // <-- foo 的调用位置

}

function foo() {

// 当前调用栈是 baz -> bar -> foo

// 因此，当前调用位置在 bar 中

console.log( "foo" );

}

baz(); // <-- baz 的调用位置

调用规则

   1.默认绑定

        独立函数调用。可以把这条规则看作是无法应用

        function foo() {

           console.log( this.a );

         }

         var a = 2;

         foo(); // 2

    2.隐式绑定

        对象属性引用链中只有最顶层或者说最后一层会影响调用位置。

function foo() {

console.log( this.a );

}

var obj2 = {

a: 42,

foo: foo

};

var obj1 = {

a: 2,

obj2: obj2

};

obj1.obj2.foo(); // 42

隐式丢失

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() 其实是一个不带任何修饰的函数调用，因此应用了默认绑定。

3.显式绑定

function foo() {

console.log( this.a );

}

var obj = {

a:2

};

foo.call( obj ); // 2

    硬绑定

    API调用的“上下文”

    都是用CALL APPLY;

4 .new绑定

   用 new 来调用，这种函数调用被称为构造函数调用

   使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

1. 创建（或者说构造）一个全新的对象。

2. 这个新对象会被执行 [[ 原型 ]] 连接。

3. 这个新对象会绑定到函数调用的 this。

4. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。

优先级

1. 函数是否在 new 中调用（new 绑定）？如果是的话 this 绑定的是新创建的对象。

    var bar = new foo()

2. 函数是否通过 call、apply（显式绑定）或者硬绑定调用？如果是的话，this 绑定的是指定的对象。

var bar = foo.call(obj2)

3. 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上下文对象。

var bar = obj1.foo()

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

var bar = foo()

被忽略的this

如果你把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind

箭头函数

1. 只使用词法作用域并完全抛弃错误 this 风格的代码；

2. 完全采用 this 风格，在必要时使用 bind(..)，尽量避免使用 self = this 和箭头函数。