乐趣区

Javascript深入理解this作用域问题以及newletvarconst对this作用域的影响

jiezi

理解 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 作用域与作用域链

退出移动版