this疏通 二

该笔记参考自《你不知道的JavaScript上卷》

一.this全面解析

1.调用位置

function baz(){
    //当前调用栈是：baz
    //当前调用位置是全局作用域

    bar();// --> bar()函数的调用位置
}
function bar(){
    //当前调用栈是：baz -> bar
    //当前调用位置是在baz()函数中

    foo();// --> foo()函数的调用位置
}
function foo(){
    //当前调用栈是：baz -> bar -> foo
    //当前调用位置是在bar()函数中
}
baz();// --> baz()函数的调用位置

①调用栈是什么？

• 为了到达当前执行位置所调用的所有函数。调用栈中"最上面"的一个函数即为当前执行函数。

②调用位置：在当前执行的函数的前一个调用函数中。

2.绑定规则

2.1默认绑定

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

①这是最常见的函数调用类型：独立函数调用。可以把这条规则看做无法应用其他规则时的默认规则。

②那怎么判断它就是默认绑定呢？

• foo()函数调用是"干干净净"的，不带有任何修饰的函数引用。如：foo();

③默认绑定，那么this绑定谁呢？

• 全局对象

④上述描述并不严谨，需要考虑严格模式的影响：

• 若函数的调用位置处于严格模式下，this仍绑定全局对象：

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

• 若该函数的函数体处于严格模式，this会绑定到undefined：

function foo(){
    'use strict'
    console.log(this.a);
}
var a = 2;
foo();
>>>Uncaught TypeError: Cannot read property 'a' of undefined

2.2隐式绑定

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

①当foo()函数被调用时，它前面加上了对obj的引用。当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。上述代码中，因为调用foo()时this被绑定到obj对象，因此this.a和obj.a是一样的。

②对象属性引用链只有最后一层在调用位置中才起作用：

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

③一个最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说他会转换为默认绑定。

function foo(){
    console.log(this.a);
}
var obj1 = {
    a: 'obj1',
    foo: foo
};
var bar = obj1.foo;
var a = 'global';
bar();
>>>global

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

④

function foo(){
    console.log(this.a);
}
function doFoo(fn){
    fn();
}
var obj1 = {
    a: 'obj1',
    foo: foo
};
var a = 'global';
doFoo(obj1.foo);
>>>global

参数传递其实就是一种隐式赋值，因此，当我们传入函数时，也会被隐式赋值。在上述代码中，fn虽然是obj1.foo的引用，实际上它引用的是foo()函数本身，所以转换为默认绑定。

⑤如果把函数传入JavaScript内置的函数而不是自己声明的函数，会发生什么？

function foo(){
    console.log(this.a);
}
var obj1 = {
    a: 'obj1',
    foo: foo
};
var a = 'global';
setTimeout(obj1.foo,100);
>>>global

• 事实证明：一样样的

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

function setTimeout(fn,delay){
    //等待delay毫秒
    fn();
}

⑥小结

• 当我们在分析隐式绑定时，我们必须在一个对象内部包含一个指向函数的属性，并通过这个属性间接引用函数，从而把this间接（隐式）绑定到这个对象上。

2.3显式绑定

function foo(){
    console.log(this.a);
}
var obj = {
    a: 'obj'
};
foo.call(obj);
>>>obj

①隐式绑定的机制是：在对象内部包含函数引用。

• 那我想在某个对象上强制调用函数怎么办？

②这个时候apply()和call()方法就登场了，它们的第一个参数是一个对象，就是专门为this准备的，在调用函数时将其绑定到this。

③因为可以直接指定this的绑定对象，因此称为显式绑定。

④什么是硬绑定？

• 硬绑定是为了解决显式绑定的丢失绑定问题。

• 显式绑定的丢失绑定是啥？

function foo(){
    console.log(this.a);
}
var obj = {
    a: 'obj'
};
var a = 'global';
foo.call(window);
>>>global

3.硬绑定机制？

function foo(){
    console.log(this.a);
}
function bar(){
    return foo.call(obj);
}
var obj = {
    a: 'obj'
};
bar();
>>>obj

setTimeout(bar,1000);
36
>>>obj

bar.call(window);
>>>obj

首先创建一个foo.call(obj)，然后将其"硬塞进"一个函数中，这样以来，无论以后如何调用该函数，它总会手动地在obj对象上调用foo()函数。

2.4 new绑定

①在JavaScript中，构造函数只是一些使用new操作符时被调用的普通函数。

function foo(content){
    this.a = content;
}
var bar = new foo(2);
bar.a;
>>>2

• 使用new操作符来调用foo()函数，会创建一个全新的对象，这个新的对象会绑定到foo()函数中的this。

3.优先级

①显式绑定>隐式绑定

function foo(){
    return this.a;
}
var obj1 = {
    a: 1,
    foo: foo
};
var obj2 = {
    a: 2,
    foo: foo
};
var a = 'global';
obj1.foo();
>>>1

obj1.foo.call(obj2);
>>>2

②new绑定>隐式绑定

function foo(content){
    this.a = content;
}
var obj1 = {
    foo: foo
};
obj1.foo('隐式绑定');
obj1.a;
>>>"隐式绑定"

var bar = new obj1.foo('new绑定');
bar.a;
>>>"new绑定"

③new绑定> 显式绑定

function foo(content){
    this.a = content;
}
var obj1 = {};
foo.call(obj1,'显式绑定');
obj1.a;
>>>"显式绑定"

var bar = foo.bind(obj1);
var baz = new bar('new绑定');
obj1.a;
>>>"显式绑定"

baz.a;
>>>"new绑定"

④小结

• 四种绑定规则的优先级：new绑定>显式绑定>隐式绑定>默认绑定

总结：

• 如需判断一个运行中的函数的this绑定，则首先需要找到这个函数的直接调用位置。找到之后就可以依次按照以下四条规则来判断this的绑定对象：

①由new调用？绑定到新创建的对象。
②由call或apply（或bind）调用？绑定到指定的对象。
③由上下文对象调用？绑定到那个上下文对象。
④默认：在严格模式下绑定到undefined，否则绑定到全局对象。