【Javascript】深入理解this作用域问题以及new/let/var/const对this作用域的影响

理解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


在这里,getNameFunc return了1个匿名函数,可能你会认为这就是输出值为The Window的原因

但是,我们再来尝试写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())


可以发现,同样是匿名函数,却输出了The Window, My Object

在作用域链中,执行函数时会创建一个称为“运行期上下文(execution context)”的内部对象,运行期上下文定义了函数执行时的环境。

个人认为是因为函数被object.getNameFunc()调用,funAA的作用域链被初始化为undefined即window的[[Scope]]所包含的对象,导致输出结果为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())


可以发现,输出了 My Object, My Object
getNameFunc仍为匿名函数,但是return的是this.funAA(),此时,this.funAA变成了由object调用,验证了我们之前的猜想:

函数执行环境影响了this作用域

new运算符对this作用域对影响

还是实践出真理,我们先来写一段代码

var a = 2
function test(){
    this.a = 1
    console.log(window.a)
}
new test()
test()


可以看出输出结果为2,1
new运算符改变了test函数内this的作用域,改变的原理是通过在函数内创建一个对象obj,并通过test.call(obj),执行obj.test(),这样test的父函数就变成了obj,test复制的是obj的作用域链,而不是window

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的指向取决于函数执行时所创建运行期上下文(execution context)的内部对象,它与当前运行函数的[[scope]]所包含的对象组成了1个新的对象,这个对象就是活动对象,然后此对象会被推入作用域链的前端
2.如果调用的函数,被某一个对象所拥有,那么该函数在调用时,内部的this指向该对象。
3.this指向与匿名函数没有关系,如果函数独立调用,那么该函数内部的this,则指向undefined。但是在非严格模式中,当this指向undefined时,它会被自动指向全局对象。
4.在作用域链中,var定义的变量属于函数作用域,可以被子级作用域下的this访问,而let/const定义的变量属于块级作用域,不允许在其子级作用域中被访问

相关知识点

不理解new的实践可以查看我的这篇文章【Javascript】彻底捋清楚javascript中 new 运算符的实现
对作用域链不是很了解的同学,可以查看这边文章【Javascript】深入理解javascript作用域与作用域链

如果我的文章对你有帮助,欢迎关注我的博客,JS/Python/算法系列,码不停题!!!

Devin前端技术分享
前端技术专栏
30 声望
2 粉丝
0 条评论
推荐阅读
route-resource-preload 拆包,尽最大努力减少首屏幕加载资源,并提供优质的用户体验
route-resource-preload🚀 专注于不影响用户最佳体验的同时,提升应用首屏加载速度,灵感来自NextJS的预加载.gif 效果图正常懒加载.gifroute-resource-preload 预加载.gif从上图可以发现,route-resource-preload ...

daivon阅读 129

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.5k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.2k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.6k评论 6

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木35阅读 6.7k评论 10

30 声望
2 粉丝
宣传栏