JavaScript之this学习心得

Posted 2020-07-20 默语

this在运行时绑定，并不是在编写时绑定，它的上下文取决于函数调用的各种条件。this既不指向自身，也不指向函数的词法作用域。this是在函数被调用时发生的绑定，指向什么完全取决于函数在哪里被调用。

this绑定规则 

1. 默认绑定：this绑定在函数调用的位置。只在非严格模式下，才能绑定到调用位置，严格模式下与调用位置无关。 

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

2. 隐式绑定：this绑定需要考虑调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含。this绑定到函数引用的上下文对象上。

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

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

隐式丢失：被隐式绑定的对象会丢失，然后采用默认绑定，从而把this绑定到全局对象或undefined上，取决于是否是严格模式。其根源是函数对象传递是传的引用，不是复制，与中间经过的各种历程无关，只是与初始定义有关 。

function foo(){
    console.log(this.a); 
}
var obj = {
    a:0,
    foo:foo
};
var bar = obj.foo; // 函数别名
var a = "global";
bar(); // "global"

3. 显式绑定：使用函数的call()/apply()方法进行this绑定。它们的第一个参数是一个对象，会把这个对象绑定到this。

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

call(obj,var1,var2,···),apply(obj,[var1,var2,···]) 
4. new绑定：使用new调用函数（构造函数调用），将this绑定到新构建的对象上。

function foo(){
    this.a = a; 
}
var bar = new foo(0);
console.log(bar.a);  // 0

new操作的执行过程：

1. 创建一个全新的对象；
2. 新对象被执行[[原型]]连接；
3. 新对象绑定到函数调用的this；
4. 若函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。 

this绑定判断流程 

1. 由new调用？绑定到新建的对象； 
2. 由call/apply/bind调用？绑定到指定的对象； 
3. 由上下文对象调用？绑定到那个上下文对象； 
4. 默认：在严格模式下绑定到undefined，否则绑定到全局对象。