为什么这里的this不同

Question

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

(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有什么不同么？
为什么出现这个情况？
麻烦各位大神指点下。前端小白，感激不尽。

Answer 1

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

Answer 2

两个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)

Answer 3

http://www.jianshu.com/p/d27f1905a7e7

引用别人写的文章

Answer 4

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

window.name = "123"

(function(){
    var name = 'Tom';//在这个自执行的函数中，name属性并没有挂载到window对象上
    console.log(this);//window
    console.log(this.name);//123
})();

Answer 5

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

Answer 6

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

Answer 7

var name = 'Tom';

改成：

this.name = 'Tom';

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

Answer 8

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

Answer 9

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

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

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