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 的调用位置

绑定规则

默认绑定

无法应用其他规则时的默认规则。

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

var a = 1;
foo();//1

调用foo()时，应用了this的默认绑定，因此this指向全局对象。foo()是直接使用不带任何修饰的函数引用进行调用，所以只能使用默认绑定，无法应用其他规则。

严格模式，全局对象无法使用默认绑定。

隐式绑定

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

var obj = {
    a:2,
    foo: fpp
}
obj.foo();//2

当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。对象属性引用链中只有最顶层或则说最后一层会影响调用位置。

隐式丢失

函数别名调用，参数传递（隐式赋值），回调函数都会丢失this绑定。被隐式绑定的函数丢失绑定对象，会应用默认绑定。

显式绑定

call(…),apply(…)方法，第一个参数是一个对象，它们会把这个对象绑定定到this，接着在调用函数时指定这个this。

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

var obj = {
    a = 2
}
foo.call(obj);//2

解决丢失绑定方法：

硬绑定
API调用的“上下文”

new绑定

在JavaScript中，构造函数只是使用new操作符时被调用的函数。它们并不会属于某个类，也不会实例化一个类。只是被new操作符调用的普通函数。

发生构造函数调用时：

创建一个全新的对象。
该对象会被执行【原型】连接。
该对象会绑定到函数调用的this。
若函数未返回其它对象，那么new表达式中的函数会自动返回这个新对象。

判断this

函数是否在 new 中调用（new 绑定）？如果是的话 this 绑定的是新创建的对象。var bar = new foo()
函数是否通过 call、 apply（显式绑定）或者硬绑定调用？如果是的话， this 绑定的是指定的对象。var bar = foo.call(obj2)
函数是否在某个上下文对象中调用（隐式绑定）？如果是的话， this 绑定的是那个上下文对象。var bar = obj1.foo()
如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到全局对象。var bar = foo()

绑定例外

被忽略的this

把null或者undefined作为this的绑定对象传入call，apply或者bind，这些值在调用时会被忽略，实际应用默认绑定规则。

间接引用

创建一个函数的“间接引用”，调用该函数时会应用默认绑定。

软绑定

对指定的函数进行封装，首先检查调用时的 this，如果 this 绑定到全局对象或者 undefined，那就把指定的默认对象 obj 绑定到 this，否则不会修改 this。

小结

this判断：1.由 new 调用？绑定到新创建的对象。2.由 call 或者 apply（或者 bind）调用？绑定到指定的对象。3.由上下文对象调用？绑定到那个上下文对象。4.默认：在严格模式下绑定undefined，否则绑定到全局对象。
ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定this，具体来说，箭头函数会继承外层函数调用的 this 绑定（无论 this 绑定到什么）。

《你不知道的javascript》--读书笔记(8)