美文网首页
javascript中的this

javascript中的this

作者: suemi | 来源:发表于2014-11-13 10:31 被阅读42次

    This对象在js中就一直是个坑货,很难判断它到底指向什么,而我们由于来自C++或者python的self的经验,又常常会犯这一类的错误。接下来就详细地讲一下this对象的归属。

    rule1:全局环境的this

    javascript的环境天生就由函数来决定,在js里不能通过代码块隔开上下文,不被函数所包裹的环境就是全局环境,全局环境中的this就指向全局变量window,看下面一个例子

    var name='jjj';
    console.log(this.name);
    //会成功输出jjj
    

    rule2:作为方法调用时的this

    显然这种情况很好判断,与python里的self是一致的,this毫无疑问指向调用方法的对象

    var user={
        name:'kkk'
    };
    user.getName=function(){
        console.log(this.name);
    };
    user.getName();
    //会输出kkk
    

    rule3:作为构造函数时的this

    这时的this也不用我多说,显然是指向新创建的对象,构造函数的运行其实并不创建对象,而仅仅是初始化,对象在运行之前就已经被创建
    下面还是举例说明

    function User(name){
        this.name=name;
    }
    var f1=new User('kkk');
    var f2=User('kkk');
    console.log(f1.name);//kkk
    console.log(f2.name);//undefined没有name属性
    

    rule4:间接调用中的this

    所谓间接调用是指利用apply和call来调用函数,这时的this指向它们参数列表中的第一个参数。

    var setName=function(name){
        this.name=name;
    };
    var user={level:2};
    user.apply(setName,'jjj');
    console.log(user.name);//jjj
    

    rule5:其他情况中的this

    记住其他情况下this均不会被改变,这里也是最容易犯错的地方。

    var name = "clever coder";
    var person = {
        name : "foocoder",
        hello : function(sth){
            var sayhello = function(sth) {
                console.log(this.name + " says " + sth);
            };
            sayhello(sth);
        }
    }
    person.hello("hello world");//clever coder says hello world
    
    

    上面的代码看起来很奇怪,难道this不应该指向person吗?
    我们应该记住被嵌套的函数中的this是不会指向嵌套它的函数,在这个例子里面就是sayhello中的this不会指向hello对应的那个函数。如果我们把例子稍稍改一下变成

    hello:function(sth){
        console.log(this.name + " says " + sth);
    }
    //foocoder says hello world
    

    大家应该已经看明白了,这个时候,sayhello并非在作为方法调用,所以this指向全局对象。。。
    这时候问题来了,用node运行最初的例子会显示undefined says hello world,不知道有没有大神讲解一下。

    rule6:eval破坏所有规则

    最后以一个例子结束

    var name = "clever coder";
    var user={
        name:'kkk'
    };
    user.getName=function(){
        console.log(this.name);
    };
    var get=user.getName;
    get();//clever coder
    

    大家是否明白了?

    相关文章

      网友评论

          本文标题:javascript中的this

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