理解this作用域
《javascript高级程序设计》中有说到:
this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数被作为某个对象调用时，this等于那个对象。不过，匿名函数具有全局性，因此this对象同常指向window
针对于匿名函数this具有全局性的观点仍是有争议的，可参考 https://www.zhihu.com/questio…
关于闭包经常会看到这么一道题：
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
console.log(object.getNameFunc()());//result:The Window
<font color=”green”>在这里，getNameFunc return了1个匿名函数,可能你会认为这就是输出值为<font color=”blue”>The Window</font>的原因 </font>
但是，我们再来尝试写1个匿名函数
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return this.funAA;
},
funAA:function(){
return this.name
}
};
console.log(object.getNameFunc()(),object.funAA())
可以发现，同样是匿名函数,却输出了<font color=”blue”>The Window, My Object</font>
在作用域链中，执行函数时会创建一个称为“运行期上下文(execution context)”的内部对象，运行期上下文定义了函数执行时的环境。
个人认为是因为<font color=”red”>函数执行在window作用域</font>下，getNameFunc的作用域链被初始化为<font color=”red”>window的[[Scope]]</font>所包含的对象,导致输出结果为window.name
对作用域链不是很了解的同学，可以查看这边文章【Javascript】深入理解javascript作用域与作用域链
实践是检验真理的唯一标准，让我们用代码测试一下
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return this.funAA();
},
funAA:function(){
return this.name
}
};
console.log(object.getNameFunc(),object.funAA())
可以发现，输出了 <font color=”blue”>My Object, My Object</font>
getNameFunc仍为匿名函数，但是return的是this.funAA(),此时,this.funAA变成了在getNameFunc作用域中执行，而不是在window下，验证了我们之前的猜想：
函数执行环境影响了this作用域
new运算符对this作用域对影响
还是实践出真理，我们先来写一段代码
var a = 2
function test(){
this.a = 1
console.log(window.a)
}
new test()
test()
可以看出输出结果为<font color=”blue”>2,1</font>
new运算符改变了test函数内this的志向,改变的原理是通过在函数内创建一个对象obj,并将test内this作用域指向了obj
类似于
function subNew(){
var obj = {}
var res = test.call(obj,...arguments)
}
subNew() // 作用等于new test()let/var/const对this作用域的影响
继续写代码通过事实来说明
var a = 1 //函数作用域
let b =1 //块级作用域
const c = 1 //块级作用域
function fn(){
this.a = 2
this.b = 2
this.c =2
console.log(this.a,this.b,this.c)
console.log(a,b,c)
//this指向全局作用域 this === window //true
}
fn()
var声明的变量属于函数作用域,let/const声明的变量属于块级作用域
可以发现，全局作用域中的a变量被改变，b变量与c变量都没有被改变,说明在fn()中通过this访问不到window作用域中的b/c变量
<font color=”red”>注:这里说的访问不到与const定义的变量是常量没有关系，因为如果访问到的话，是会报typeError的</font>
总结
1.this的指向取决于<font color=”red”>函数执行时</font>所创建运行期上下文(execution context)的内部对象,它会复制父函数的作用域链，再在前端插入自己的活动对象,与是否是匿名函数无关
2.在作用域链中，var定义的变量属于函数作用域,可以被子级作用域下的this访问,而let/const定义的变量数据块级作用域，不允许在其子级作用域中被访问
相关知识点
不理解new的实践可以查看我的这篇文章【Javascript】彻底捋清楚javascript中 new 运算符的实现
对作用域链不是很了解的同学，可以查看这边文章【Javascript】深入理解javascript作用域与作用域链
发表回复