说一说这“this”

作者: 夏夜星语 | 来源:发表于2016-03-31 12:14 被阅读214次

    JS中不容易懂的概念除了闭包之外,还有一个应该是首当其冲:this ,这个东西经常让人搞混,那么今天我们就来好好看看它的庐山真面目。

    定义一个对象:

    var Charles = {
        living: true,
        age:23,
        gender:male,
        getGender:function(){
            return Charles.gender;
        }
    };
    console.log(Charles.getGender());  //输出:male
    

    下面的代码有一样的效果:

    var Charles = {
        living: true,
        age:23,
        gender:male,
        getGender:function(){
            return this.gender;  //注意“this”
        }
    };
    console.log(Charles.getGender());  //输出:male
    

    那么,this究竟在代码里指代的是什么?我们该怎么分析,因为在具体的环境里有时很难分清this指代的真面目。那么,现在,需要记住一句话:
    this值的宿主函数被封装在另一个函数里面,或者在另一个函数的上下文中被调用时,this值永远是对全局(head/window)对象的引用
    也就是说,this值在嵌套函数里面,对于ES5永远指向window

    var myObject = {
        myProperty: 'I can see the light',
        myMethod: function(){
            var that = this;
            console.log(this);  //输出:'Object(这里是myObject)'
            var helperFunction = function(){
                console.log(that.myProperty); // 输出'I can see the light'
                console.log(this);  //如果不使用`that`,则输出'window',因为是在嵌套函数里面
            }();  //立即执行
        }
    }
    myObject.myMethod(); //调用 myMethod
    

    结合上面的那句话,对于ES5来说,this也就是这个情况:

    var myObject = {
        func1: function(){
            console.log(this);  //输出 'Object'(第一层函数)
            var func2= function(){
                console.log(this);  //从此处开始,this都是window(第二层函数)
                var func3= function(){
                    console.log(this); //当然是window
                }();
            }();
        }
    }
    myObject.func1();
    
    如图
    当然也有特例,当遇上eval函数时,就会发生不一样的情况:在这里要感谢小睿7777777同学!
    var a='aaaaaaaaa';
    var c={
        a:'bbbbbbbbb' ,
        b:function(){
            eval("alert(this.a)");
        }
    }
    c.b();  //输出:'bbbbbbbbb'
    

    到这里,应该明白了this在JS中的位置,相信以后不会再分不清楚了。

    本篇完

    相关文章

      网友评论

      • 小睿7777777:”也就是说,this值在嵌套函数里面,对于ES5永远指向window。“ 不全对,楼主可以看一下eval()在不同情况下的this值,会有不同哟 :smirk:
        夏夜星语:@小睿7777777果然这样,谢谢啦! :smile:
        小睿7777777:@Charles_ln 哥们试试这个
        var a='aaaaaaaaa';
        var c={
        a:'bbbbbbbbb' ,
        b:function(){
        eval("alert(this.a)");
        }
        }
        c.b();
        夏夜星语:@小睿7777777 eval()函数不过是会执行字符串,将字符串解析为代码,刚才试了一下,并没有什么不同啊?
      • 一俢:收藏

      本文标题:说一说这“this”

      本文链接:https://www.haomeiwen.com/subject/dguelttx.html