《你不知道的JavaScript(上)-this》学习笔记

1.3 this到底是什么

this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。
当一个函数被调用时，会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this 就是记录的其中一个属性，会在函数执行的过程中用到。

2.1 调用位置

在理解 this 的绑定过程之前，首先要理解调用位置:调用位置就是函数在代码中被调用的位置(而不是声明的位置)。只有仔细分析调用位置才能回答这个问题:这个 this 到底引用的是什么?
通常来说，寻找调用位置就是寻找“函数被调用的位置”，但是做起来并没有这么简单，因为某些编程模式可能会隐藏真正的调用位置。
最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数)。我们关心的调用位置就在当前正在执行的函数的前一个调用中。
下面我们来看看到底什么是调用栈和调用位置:

function baz() {
// 当前调用栈是:baz
// 因此，当前调用位置是全局作用域
    console.log( "baz" );
bar(); // <-- bar 的调用位置 
}
function bar() { 82
// 当前调用栈是 baz -> bar
// 因此，当前调用位置在 baz 中
    console.log( "bar" );
    foo(); // <-- foo 的调用位置 
}
function foo() {
// 当前调用栈是 baz -> bar -> foo // 因此，当前调用位置在 bar 中
    console.log( "foo" );
}
baz(); // <-- baz 的调用位置

2.2 绑定规则(优先级从低到高)

2.2.1 默认绑定

this 指向全局对象或undefined（严格模式）
对于默认绑定来说，决定 this 绑定对象的并不是调用位置是否处于严格模式，而是函数体是否处于严格模式。如果函数体处于严格模式，this 会被绑定到 undefined，否则 this 会被绑定到全局对象。
例：

function foo() { 
    console.log( this.a );
}
var a = 2; 
foo(); // 2

function foo() { 
    "use strict";
    console.log( this.a );
}
var a = 2;
foo(); // TypeError: this is undefined

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

function foo() {
    console.log( this.a );
}
var a = 2;
(function(){
"use strict";
    foo(); // 2
})();

*通常来说你不应该在代码中混合使用 strict mode 和 non-strict mode。整个程序要么严格要么非严格。然而，有时候你可能会用到第三方库，其严格程度和你的代码有所不同，因此一定要注意这类兼容性细节。

2.2.2 隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含。

function foo() { 
    console.log( this.a );
}
var obj = { 
    a: 2,
    foo: foo 
};
obj.foo(); // 2

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

function foo() { 
    console.log( this.a );
}
var obj2 = { 
    a: 42,
    foo: foo };
var obj1 = { 
    a: 2,
    obj2: obj2 
};
obj1.obj2.foo(); // 42

隐式丢失

一个最常见的 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"

2.2.3 显式绑定

可以使用函数的 call(..) 、 apply(..) 、bind(..)方法。

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


function foo(something) { 
    console.log( this.a, something ); 
    return this.a + something;
}
var obj = { 
    a:2
};
var bar = foo.bind( obj );
var b = bar( 3 ); // 2 3 
console.log( b ); // 5

上面例子的原理：

function foo(something) { 
    console.log( this.a, something ); 
    return this.a + something;
}
// 简单的辅助绑定函数 
function bind(fn, obj) {
    return function() {
    return fn.apply( obj, arguments );
}; }
var obj = { 
    a:2
};
var bar = bind( foo, obj );
var b = bar( 3 ); // 2 3 
console.log( b ); // 5

2.2.4 new绑定

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

创建(或者说构造)一个全新的对象。
这个新对象会绑定到函数调用的this。
这个新对象会被执行[[原型]]连接，即这个对象继承构造函数的prototype。
执行构造函数，进行赋值。
如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

ps：实际上并不存在所谓的“构造函数”，只有对于函数的“构造调用”。

判断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()

不过......凡事总有例外。(看下面)

2.4 绑定例外

2.4.1 被忽略的this

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

function foo() { 
    console.log( this.a );
}
var a = 2;
foo.call( null ); // 2

更安全的this

如果我们在忽略 this 绑定时总是传入一个 DMZ(demilitarized zone，非军事区)对象，那就什么都不用担心了，因为任何对于 this 的使用都会被限制在这个空对象中，不会对全局对象产生任何影响。

function foo(a,b) {
    console.log( "a:" + a + ", b:" + b );
}
// 我们的 DMZ 空对象
var ø = Object.create( null ); // 把数组展开成参数
foo.apply( ø, [2, 3] ); // a:2, b:3
// 使用 bind(..) 进行柯里化 
var bar = foo.bind( ø, 2 ); 
bar( 3 ); // a:2, b:3

2.4.2 间接引用

另一个需要注意的是，你有可能(有意或者无意地)创建一个函数的“间接引用”，在这种情况下，调用这个函数会应用默认绑定规则。
间接引用最容易在赋值时发生:

function foo() { 
    console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)(); // 2

赋值表达式 p.foo = o.foo 的返回值是目标函数的引用，因此调用位置是 foo() 而不是 p.foo() 或者 o.foo()。根据我们之前说过的，这里会应用默认绑定。

2.5 箭头函数(this绑定原理不同)

箭头函数不使用 this 的四种标准规则，而是根据外层(函数或者全局)作用域来决定 this。箭头函数的绑定无法被修改。(new 也不行!)
我们来看看箭头函数的词法作用域:

function foo() {
    // 返回一个箭头函数 
    return (a) => {
        //this 继承自 foo()
        console.log( this.a ); 
    };
}
var obj1 = { 
    a:2
};
var obj2 = { 
    a:3
};
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, 不是 3 !

实际上，在 ES6 之前我们就已经在使用一种几乎和箭头函数完全一样的模式。箭头函数与 self = this 机制一样。

function foo() {
    var self = this; // lexical capture of this 
    setTimeout( function(){
        console.log( self.a );
    }, 100 );
}
var obj = { 
    a: 2
};
foo.call( obj ); // 2

附：箭头函数的资料

箭头函数的this对象是绑定定义时所在的作用域。
普通函数的this对象是绑定使用时所在的作用域。

参考链接： https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001438565969057627e5435793645b7acaee3b6869d1374000
参考链接： http://es6.ruanyifeng.com/#docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0

2.6 小结

如果要判断一个运行中函数的 this 绑定，就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断 this 的绑定对象。

由new调用?绑定到新创建的对象。

由call或者apply(或者bind)调用?绑定到指定的对象。

由上下文对象调用?绑定到那个上下文对象。

默认:在严格模式下绑定到undefined，否则绑定到全局对象。

一定要注意，有些调用可能在无意中使用默认绑定规则。如果想“更安全”地忽略 this 绑定，你可以使用一个 DMZ 对象，比如 ø = Object.create(null)，以保护全局对象。
ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定 this，具体来说，箭头函数会继承外层函数调用的 this 绑定(无论 this 绑定到什么)。这其实和 ES6 之前代码中的 self = this 机制一样。