[JavaScript]再谈 this

Posted 2021-01-07 小粒旬

再谈this

关于 this，之前有写一篇文章略微涉及到：就是这里。

当时还没理解得很深入，浅尝辄止的感觉，也没有很全面地总结 this 的指向和用法。

直到我昨晚看到了一篇博文，google搜索 js this 出来的第一篇文章，茅塞顿开，对于 this 有了更直观更全面更细致更清晰的了解！我真希望每一个对 this 感到困惑的朋友可以看到这篇文章，写得很好，感谢这位作者和他的文章。

先列举一下他的观点：

1.如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。
2.如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
3.如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。

特殊情况：

this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的。
(当this碰到return时)如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

这样顺着脉络一分析，像下面这种题目，是难不倒我们了：

function X(){
    return object = {
        name: \'object\',
        options: null,
        f1(x){
            this.options = x    // 3.x.f1 被调用后，这里的 this 就是 object,this.options = options
            this.f2()   // 4.x.f1 被调用后，这里的 this 就是 object,所以这里就相当于 object.f2()
        },
        f2(){
            this.options.f2.call(this)  // 5.object.f2() 因为是 object 调用了 f2,所以这里的 this 也是 object ，即 object.options.f2.call(object)
        }
    }
}

var options = {
    name: \'options\',
    f1(){},
    f2(){
        console.log(this) // 6.既然 object 都被当成了 this 传进来了，那这里的 this 毫无以为就是 object
    }
}

var x = X() // 1.x 是 X 的实例，X 被调用后返回一个对象 object，所以 x === object
x.f1(options)   // 2.x 调用了 f1，所以这里的 this 就是 x，也就是 object，这句代码相当于 x.f1.call(object,options)

这下可以理解 this 了吧~

再次感谢这篇博文以及他的作者。