js中作用域的理解?

这篇具有很好参考价值的文章主要介绍了js中作用域的理解?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.作用域

作用域,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合
换句话说,作用域决定了代码区块中变量和其他资源的可见性

举个例子

function myFunction() {
    let inVariable = "函数内部变量";
}
myFunction();//要先执行这个函数,否则根本不知道里面是啥
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined
function myFunction() {
    let inVariable = "函数内部变量";
}
myFunction();//要先执行这个函数,否则根本不知道里面是啥
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

上述例子中,函数myFunction内部创建一个inVariable变量,当我们在全局访问这个变量的时候,系统会报错

这就说明我们在全局是无法获取到(闭包除外)函数内部的变量

我们一般将作用域分成:

  • 全局作用域

  • 函数作用域

  • 块级作用域

全局作用域

任何不在函数中或是大括号中声明的变量,都是在全局作用域下,全局作用域下声明的变量可以在程序的任意位置访问

// 全局变量
var greeting = 'Hello World!';
function greet() {
  console.log(greeting);
}
// 打印 'Hello World!'
greet();

函数作用域
函数作用域也叫局部作用域,如果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问,不能在函数以外去访问

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}
// 打印 'Hello World!'
greet();
// 报错: Uncaught ReferenceError: greeting is not defined
console.log(greeting);

可见上述代码中在函数内部声明的变量或函数,在函数外部是无法访问的,这说明在函数内部定义的变量或者方法只是函数作用域

块级作用域

S6引入了let和const关键字,和var关键字不同,在大括号中使用let和const声明的变量存在于块级作用域中。在大括号之外不能访问这些变量

{
  // 块级作用域中的变量
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}
// 变量 'English'
console.log(lang);
// 报错:Uncaught ReferenceError: greeting is not defined
console.log(greeting);

二、词法作用域

词法作用域,又叫静态作用域,变量被创建时就确定好了,而非执行阶段确定的。也就是说我们写好代码时它的作用域就确定了,JavaScript 遵循的就是词法作用域

var a = 2;
function foo(){
    console.log(a)
}
function bar(){
    var a = 3;
    foo();
}
bar()

上述代码改变成一张图
js中作用域的理解?,javascript,前端,开发语言
由于JavaScript遵循词法作用域,相同层级的 foo 和 bar 就没有办法访问到彼此块作用域中的变量,所以输出2

三、作用域链

当在Javascript中使用一个变量的时候,首先Javascript引擎会尝试在当前作用域下去寻找该变量,如果没找到,再到它的上层作用域寻找,以此类推直到找到该变量或是已经到了全局作用域

如果在全局作用域里仍然找不到该变量,它就会在全局范围内隐式声明该变量(非严格模式下)或是直接报错

这里拿《你不知道的Javascript(上)》中的一张图解释:

把作用域比喻成一个建筑,这份建筑代表程序中的嵌套作用域链,第一层代表当前的执行作用域,顶层代表全局作用域

js中作用域的理解?,javascript,前端,开发语言
变量的引用会顺着当前楼层进行查找,如果找不到,则会往上一层找,一旦到达顶层,查找的过程都会停止

下面代码演示下:

var sex = '男';
function person() {
    var name = '张三';
    function student() {
        var age = 18;
        console.log(name); // 张三
        console.log(sex); // 男 
    }
    student();
    console.log(age); // Uncaught ReferenceError: age is not defined
}
person();

上述代码主要主要做了以下工作:文章来源地址https://www.toymoban.com/news/detail-675285.html

  • student函数内部属于最内层作用域,找不到name,向上一层作用域person函数内部找,找到了输出“张三”
  • student内部输出sex时找不到,向上一层作用域person函数找,还找不到继续向上一层找,即全局作用域,找到了输出“男”
  • 在person函数内部输出age时找不到,向上一层作用域找,即全局作用域,还是找不到则报错

到了这里,关于js中作用域的理解?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 深入理解JavaScript堆栈、事件循环、执行上下文和作用域以及闭包

    在JavaScript中,内存堆是内存分配的地方,调用栈是代码执行的地方。 原始类型的保存方式:在变量中保存的是值本身,所以原始类型也被称之为值类型。 对象类型的保存方式:在变量中保存的是对象的“引用”,所以对象类型也被称之为引用类型。 调用栈理解非常简单,当

    2024年02月03日
    浏览(51)
  • 【前端|Javascript第3篇】探秘JavaScript的作用域与作用域链:小白也能轻松搞懂!

    大家好!欢迎来到本篇博客,今天我们将解开JavaScript编程世界中的一道神秘面纱:作用域与作用域链。很多Javascript开发者并不真正理解它们,但这些概念对掌握Javascript至关重要。如果你对这些概念感到困惑,不要担心!本文将以通俗易懂的方式,用趣味横生的例子,为你详

    2024年02月13日
    浏览(42)
  • 大型医院云HIS系统:采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发 融合B/S版电子病历系统

    一套医院云his系统源码 采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发。融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知识产权。 文末卡片获取联系! 基于云计算技术的B/S架构的医院管理系统(简称云HIS),采用前后

    2024年02月03日
    浏览(50)
  • 前端jd要求:了解一门后端开发语言优先 解决方案之Node.js

    作为前端开发者,了解一门后端开发语言可以为我们提供更多的职业机会和技术优势。在当今的技术领域中,前后端分离的开发模式已经成为主流,前端和后端的协作和沟通变得越来越紧密。因此,作为前端开发者,学习一门后端语言已经成为提高自己技能的重要途径。 以下

    2024年02月12日
    浏览(51)
  • 前端理解的HTTP缓存(作用、缓存策略、缓存控制机制、应用)

    目录 一、HTTP缓存有什么作用? 二、 浏览器的缓存策略有哪些? 1、强缓存(Expires、Cache-control) 2、协商缓存(Last-Modified、ETag) 3、缓存过程是什么? 三、浏览器缓存控制机制有哪些? 1、使用HTML Meta 标签 2、使用HTTP头信息控制缓存 四、哪些请求不能被缓存? 五、部署时

    2024年02月15日
    浏览(39)
  • 除了three.js,还有许多其他前端开发语言和库可以用于创建3D可视化大屏

    hello老铁们...本人熟悉html5,vue对bootsrap,uniapp,layui,element,vite,antd,echarts,jq响应式尤其擅长,ui设计等技能,如果ui前端工作中有遇到烦恼可私信关注评论我们共同交流进步!谢谢       随着前端技术的飞速发展,3D可视化已经成为许多应用场景中不可或缺的一部分。在

    2024年03月15日
    浏览(71)
  • Spring Bean 作用域的定义

            在 Spring 配置中,我们可以通过 scope 属性来定义 Spring Bean 的作用域,可以接受 5 个内建的值,分别代表 5 种作用域类型,下面给大家详细总结一下: 1、singleton,用来定义一个 Bean 为单例,也就是说在 Spring loC 容器中仅有唯一 的一个实例对象,Spring 中的 Bean 默认

    2024年02月12日
    浏览(36)
  • 前端理解的HTTP缓存(缓存的过程/策略/控制机制/作用和应用)

    目录 一、HTTP缓存有什么作用? 二、 浏览器的缓存策略有哪些? 1、强缓存(Expires、Cache-control) 2、协商缓存(Last-Modified、ETag) 3、缓存过程是什么? 三、浏览器缓存控制机制有哪些? 1、使用HTML Meta 标签 2、使用HTTP头信息控制缓存 四、哪些请求不能被缓存? 五、部署时

    2024年02月16日
    浏览(40)
  • Go语言代码块与作用域理解

    如果不深入理解 Go 语言的代码块作用域,程序将产生我们无法理解的行为,比如说在循环中创建 goroutine func, 为什么需要传递参数至 goroutine 内部,否则所有的 func 使用的变量参数都是循环的最后一个值。 看下边这个 demo, 就需要深入理解 Go 语言代码块的作用域才能理直气壮

    2024年02月11日
    浏览(37)
  • 【JavaScript】深度理解js的函数(function、Function)

    学了这么久的JavaScript,函数在JavaScript中最常用之一,如果你不会函数,你就不会JavaScript。 函数就是Function对象,一个函数是可以通过外部代码调用的一个“子程序”,它是头等(first-class)对象,因为它们可以像任何其他对象一样具有属性和方法 。瞧瞧它的定义,注定它能

    2024年01月21日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包