标签：代码   探讨   var   用法   包含   cal   看到了   htm   博文   

再谈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 了吧~

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

[JavaScript]再谈 this

标签：代码   探讨   var   用法   包含   cal   看到了   htm   博文   

原文地址：https://www.cnblogs.com/No-harm/p/9685975.html