码迷,mamicode.com
首页 > 编程语言 > 详细

[JavaScript]再谈 this

时间:2018-09-21 13:33:39      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:代码   探讨   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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!