this绑定丢失的问题

在之前的一篇文章《this绑定》中已经说过this绑定的四种情况,也谈到了this绑定丢失的问题,但是没有解释为什么会出现this绑定的丢失,最近在多次阅读关于this绑定方面的文章之后,发现:

  其实多数情况下,是不会发生this绑定丢失的,只有一种情况下会丢失,函数没有执行,当做值传递了。不管是赋值操作,还是当做回调函数的参数传递。

  从《你不知道的javascript上》截取两个示例:  

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

var obj = {
    a: 2,
    foo: foo
};

var bar = obj.foo; // function reference/alias!

var a = "oops, global"; // `a` also property on global object

bar(); // "oops, global"

  很容易看到,var bar = obj.foo; obj.foo并没有执行,而是直接赋值给了bar,所以在bar调用时,不存在任何上下文执行环境,就应用了默认绑定,非严格模式下,this绑定到window,而严格模式下,绑定到undefined。

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

function doFoo(fn) {
    // `fn` is just another reference to `foo`

    fn(); // <-- call-site!
}

var obj = {
    a: 2,
    foo: foo
};

var a = "oops, global"; // `a` also property on global object

doFoo( obj.foo ); // "oops, global"

  在执行doFoo()函数时,obj.foo是当做参数传递的,并没有发生函数执行的过程,向上查找,obj.foo 其实就等于 foo,所以在doFoo内部调用的时候,依然是默认绑定规则。

  这么理解的话,是不是更容易理解所谓的this绑定的隐式绑定丢失的问题了。

原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/6283066.html