为什么这里的this不同

在撸代码的时候遇见这个问题了。各位大神请帮我看下。谢谢了。

(function(){
    var name = 'Tom';
    console.log(this);//window--------------------------(1)
    console.log(this.name);//空-------------------------(2)
})();
var age = "22"
console.log(this);//window------------------------------(3)
console.log(this.age);//22------------------------------(4)

为什么(2)这个地方会输出是空?而不是Tom
为什么(4)这个地方会输出22?
打印出来的this都是window。这两个this有什么不同么?
为什么出现这个情况?
麻烦各位大神指点下。前端小白,感激不尽。

阅读 929
评论 更新于 2017-11-28
    9 个回答

    function中的this指向的是调用该function的对象,比如:

    var name='window';
    var obj={
        name:'obj',
        foo:foo
    }
    function foo(){
        console.log(this.name);
    }
    obj.foo();                 //obj,调用foo的对象是obj,所以输出obj
    foo();                     //name,调用foo的对象是全局对象window,所以输出window

    注:全局环境下var,function声明的变量会自动成为全局对象的属性,函数内的var,function声明不会挂载到全局对象上。

    var name='window';      //相当于js内部定义了window.name='window';
    function foo(){}        //相当与window.foo=function foo(){} ;即foo()你可以看为是window.foo()
    
    this===window          //全局环境下this指向全局对象window
    
    

    匿名函数调用的对象是window,所以内部的this指向window对象,(2)中this.name相当于window.name,window有个name属性默认是空字符串,所以输出'',(4)中this.age相当于window.age,所以是22

    评论 赞赏 2017-11-28

      两个this都是window
      第一个this.name为空是因为没有window.name,里面的name是局部变量,不是window.name
      第二个this.age为22是因为age是全局变量,相当于window.age

      var window.age;
      (function(){
          var name = 'Tom'; //这里name 是局部变量,不会变量提升
          console.log(this);//window--------------------------(1)
          console.log(this.name);//空-------------------------(2)
      })();
      window.age = "22";
      console.log(this.age);//22------------------------------(4)
      评论 赞赏 2017-11-27
        http://www.jianshu.com/p/d27f1905a7e7

        引用别人写的文章

        评论 赞赏 2017-11-27

          window.name没有赋值呀,你给window.name赋值之后再运行,就可以访问到了

          window.name = "123"
          
          (function(){
              var name = 'Tom';//在这个自执行的函数中,name属性并没有挂载到window对象上
              console.log(this);//window
              console.log(this.name);//123
          })();
          
          
          评论 赞赏 2017-11-27

            楼上讲得很明白了
            涉及到了JS作用域(链)+ 闭包的内容
            题主抽时间可以去找资料看看

            评论 赞赏 2017-11-27
              fish
              • 3.8k

              注意下,JavaScript(这里指 ES5)是 函数级作用域,所以匿名函数里的变量是局部的,自然不能被全局访问。

              评论 赞赏 2017-11-27
                var name = 'Tom';

                改成:

                this.name = 'Tom';

                应该会出现你想要的效果,试试看

                评论 赞赏 2017-11-27

                  很显然,无论是function外部还是内部this绑定的都是window
                  1.function内var定义变量属于局部变量,不会绑定到window上,故this.name不存在
                  2.function外定义的变量为全局变量,会绑定到window对象上,所以this.age有值

                  评论 赞赏 2017-11-28
                    隔壁家的猫
                    • 2
                    • 新手请关照

                    楼上讲得很清楚了,主要是涉及到了JS作用域(链)+ 闭包的内容
                    (function(){

                    var name = 'Tom';
                    console.log(this);//window--------------------------(1)
                    console.log(this.name);//空-------------------------(2)

                    })();
                    这段代码要加个 var self = this,这样的话就可以了,或者直接用es6的写法,还有一个办法就是将name变量放到外面进行初始化 ,当访问的时候this.name这样也是可以的,

                    评论 赞赏 2017-11-28
                      撰写回答

                      登录后参与交流、获取后续更新提醒