JavaScript 判断函数的this 绑定

Posted 2021-05-27 超帅的轻省回望

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

function fun(){
    this.age = 23;
}
var obj = new fun();

console.log(window.age);        //undefined
console.log(obj.age);        //23

 

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

var obj = {};
function fun(){
    console.log(this === obj);
}

fun();        //false
fun.apply(obj);        //true
fun.call(obj);        //true
fun.bind(obj)();        //true

 

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

var obj = {
    fun : function(){
        console.log(this === obj);
    }
};

obj.fun();    //true

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

function fun(){
    console.log(this === obj1);
}
var obj1 = {
    fun : fun
}
var obj2 = {
    obj1 : obj1
}
var obj3 = {
    obj2 : obj2
}

obj3.obj2.obj1.fun();        //true

 

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

function fun(){
    console.log(this === window);
}

fun();    //true


function fun(){
    \'use strict\';
    console.log(this === undefined);
}

fun();    //true

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

function fun(){
    console.log(this === window);
}

(function(){
    \'use strict\';
    fun();
})();            //true

 

如果某个函数的调用位置应用了多条规则，那么将按照：new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定 的优先级来决定哪条规则会生效。

一定要注意，有些调用可能在无意中使用默认绑定规则。如果想“更安全”地忽略 this 绑

定，你可以使用一个 DMZ 对象，比如 ø = Object.create(null) ，以保护全局对象。

 

ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定

this ，具体来说，箭头函数会继承外层函数调用的 this 绑定（无论 this 绑定到什么）。这

其实和 ES6 之前代码中的 self = this 机制一样。