JavaScript作用域实战

● 首先,我们先创建一个函数,和以前一样,计算一个年龄的

function calcAge(birthYear) {const age = 2037 - birthYear;return age;
}

● 然后我们创建一个全局变量,并调用这个函数

const firstName = "IT知识一享";
calcAge(1998);

● 因为firstName是一个全局变量,所以在函数中,我们也可以调用这个变量

function calcAge(birthYear) {const age = 2037 - birthYear;console.log(firstName);return age;
}

在这里插入图片描述

注:这里函数首先会在自己的作用域中找这个变量,如果找不到,会向上从作用域链中寻找这个变量,直到找到为止,如果找不到的话就会报错!

● 现在我们在函数内再添加一个函数

function calcAge(birthYear) {const age = 2037 - birthYear;function printAge() {const output = `${age}岁了,出生于${birthYear}`;console.log(output);}printAge();return age;
}

在这里插入图片描述

注:printAge函数中调用了age变量,但是再函数作用域中并未找到,所以就通过作用域链再父范围去寻找,最终找到打印出来,但是age变量只能再calcAge整个函数内部使用,外部无法使用这个变量

function calcAge(birthYear) {const age = 2037 - birthYear;function printAge() {const output = `${age}岁了,出生于${birthYear}`;console.log(output);}printAge();return age;
}const firstName = 'IT知识一享';
calcAge(1998);
console.log(age);

在这里插入图片描述

记住,翻译链是单项的,只能内部访问外部,外部无法访问到内部!
● 当然,在函数中,我们也可以把firstName加上,因为他是全局变量

 function printAge() {const output = `${firstName},你${age}岁了,出生于${birthYear}`;console.log(output);}printAge();return age;
}

在这里插入图片描述

● 现在,我们在printAge中添加if判断

 function printAge() {const output = `${firstName},你${age}岁了,出生于${birthYear}`;console.log(output);}if(birthYear >= 1981 && birthYear <= 1996) {const str = `哇哦,你是千禧一代的人,${firstName}`;console.log(str);}printAge();return age;
}

在这里插入图片描述

因为firstName是全局变量,所以if条件仍然可以通过作用域链找到这个变量。

● 但是str的变量在if之外的区域则无法被访问

function printAge() {const output = `${firstName},你${age}岁了,出生于${birthYear}`;console.log(output);}if (birthYear >= 1981 && birthYear <= 1996) {const str = `哇哦,你是千禧一代的人,${firstName}`;console.log(str);}console.log(str);printAge();return age;
}

在这里插入图片描述

因为let和const是块作用域,所以上述才能生效
● 现在我们使用var创建一个变量

 if (birthYear >= 1981 && birthYear <= 1996) {var millenial = true;const str = `哇哦,你是千禧一代的人,${firstName}`;console.log(str);}console.log(millenial);

在这里插入图片描述

因为var并不是块级作用域,而是函数作用域,它知识在函数中调用可以,但是全局中或者脱离上一级函数情况下仍然不可以,这是还是要符合作用域链的;
● 当然,现在我们在if中创建一个功能函数,仍然是块级区域,无法在外部访问

 if (birthYear >= 1981 && birthYear <= 1996) {var millenial = true;const str = `哇哦,你是千禧一代的人,${firstName}`;console.log(str);function add(a, b) {return a + b;}}console.log(millenial);console.log(add(2, 3));

在这里插入图片描述

注:这仅仅是在严格模式下
在这里插入图片描述

● 但是如果我们把严格模式去除的话,则会被正常调用
在这里插入图片描述

但是我们使用会用严格模式去编写我们的代码,这样会让代码出现奇奇怪怪的的情况变得很少!
● 如果我们在if条件中去声明姓名变量的话,会发生什么情况呢?

 if (birthYear >= 1981 && birthYear <= 1996) {var millenial = true;const firstName = "mark";const str = `哇哦,你是千禧一代的人,${firstName}`;console.log(str);function add(a, b) {return a + b;}}

在这里插入图片描述

这更加验证了,它会首先在在自己所在的作用域去寻找,如果找到的话,它不会通过作用域链去向父范围查找;除此之外,我们不应该把内部的firstName和外部的看作是一个变量,从本质来讲,它们就是两个变量,只是恰巧名字一样罢了。
● 那如果我们在内部讲外部的函数重新赋值,那又是什么情况呢?

function calcAge(birthYear) {const age = 2037 - birthYear;function printAge() {let output = `${firstName},你${age}岁了,出生于${birthYear}`;console.log(output);if (birthYear >= 1981 && birthYear <= 1996) {var millenial = true;const firstName = 'mark';const str = `哇哦,你是千禧一代的人,${firstName}`;console.log(str);function add(a, b) {return a + b;}output = 'NEW OUTPUT';}console.log(millenial);//   console.log(add(2, 3));console.log(output);}printAge();return a

在这里插入图片描述

● 但是如下

const output = 'NEW OUTPUT';

在这里插入图片描述

重新赋值变量和创建变量是不同的!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/132913.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Wordpress plugin removes ‘/category‘

plugin removes /category from your category permalinks Remove Category URL – WordPress plugin | WordPress.org

学习代码20231106

解释代码&#xff1a;os.environ[“OMP_NUM_THREADS“] “1“ 这行代码涉及到 Python 的 os 模块和环境变量。它的作用是设置名为 “OMPNUMTHREADS” 的环境变量的值为 “1”。让我解释一下各部分的含义&#xff1a; 1.os.environ: 这是 Python 中的一个字典&#xff0c;包含…

Thread类的基本操作(JAVA多线程)

线程是操作系统中的概念&#xff0c;操作系统内核实现了线程这样的机制&#xff0c;并提供了一些API供外部使用。 JAVA中 Thread类 将系统提供的API又近一步进行了抽象和封装&#xff0c;所以如果想要使用多线程就离不开 Thread 这个类。 线程的创建(Thread类) 在JAVA中 创建…

中国多主数据库:压强投入,期待破茧

拿破仑曾说&#xff1a;“战争的艺术就是在某一点上集中最大优势兵力”&#xff0c;强调了力量集中的重要性。 如今&#xff0c;国际形势风云变幻&#xff0c;西方世界对中国的围剿不再仅仅体现在军事和地缘政治上&#xff0c;而更多表现在经济与科技上。在科技领域&#xff0…

Akshare获取同花顺行业

使用akshare可以很方便的获取同花顺行业列表&#xff0c;与每个行业对应的个股信息&#xff0c;流程如下&#xff1a; 使用ak.stock_board_industry_summary_ths()获取行业列表循环行业列表&#xff0c;使用ak.stock_board_industry_cons_ths()获取行业对应的个股信息 官方文…

python设计模式11:观察者模式

观察者模式 单个对此&#xff08;发布者&#xff0c;也称为主体或是可观察对象&#xff09;和一个或是多个对象&#xff08;订阅者&#xff0c;也称为观察者&#xff09;之间的发布-订阅关系。增加发布者和订阅这个之间解耦&#xff0c;使得在运行时添加、删除订阅者变得容易。…

关于POI包处理excel方法详解 (一)

目录 一、POI 组件介绍 二、XSSFWorkbook 详解 三、XSSFSheet详解 四、XSSFRow详解 五、XSSFCell 详解 POI (Poor Obfuscation Implementation) 是一个 Java 库&#xff0c;用于处理 Microsoft Office文档&#xff0c;如Excel、Word和PowerPoint。它提供了一组类和方法&…

MySQL数据库入门到大牛_02_MySQL环境搭建、演示使用、图形化管理工具、一二章练习

文章目录 1. MySQL的卸载步骤1&#xff1a;停止MySQL服务步骤2&#xff1a;软件的卸载步骤3&#xff1a;残余文件的清理步骤4&#xff1a;清理注册表&#xff08;选做&#xff09;步骤5&#xff1a;删除环境变量配置 2. MySQL的下载、安装、配置2.1 MySQL的4大版本2.2 软件的下…

Linux 系统管理工具 supervisor 详解

目录 1. Linux 系统管理工具 supervisor 详解1.1. supervisor 进程管理服务组成1.2. 进程管理服务部署1.3. 进程管理服务配置信息1.4. 进程管理服务命令使用1.5. 进程管理服务启动应用1.6. 进程管理服务进程1.6.1. 进程管理应用实战-Nginx 1. Linux 系统管理工具 supervisor 详…

leetcode做题笔记213. 打家劫舍 II

你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 &#xff0c;这意味着第一个房屋和最后一个房屋是紧挨着的。同时&#xff0c;相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一…

Python基础(第五期): python数据容器(序列) 列表 集合 元素 字符串 字典 序列遍历操作

python基础专栏 python基础&#xff08;第五期&#xff09; 文章目录 python基础&#xff08;第五期&#xff09;数据容器一、列表1、列表的定义2、列表的下标索引 3、列表的(添加)方法3.1 列表的查询方法3.2 修改特定下标索引的值3.3 列表指定位置插入元素3.3 列表指定元素的追…

【Linux】-文件操作(重定向、缓冲区以及Linux下一切皆文件的详解)

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …

电脑监控软件丨2023全网最详细解析

电脑监控软件是一个比较敏感的话题&#xff0c;因为很多员工会觉得电脑监控侵犯了自己的隐私&#xff0c;电脑上企业会觉得安装软件只不过是为了保护自己的核心利益。 对于此&#xff0c;我们要辩证的看待。 今天我们从企业的角度出发&#xff0c;谈谈电脑监控软件的话题。 必…

【python VS vba】(5) 在python中使用xlwt操作Excel(待完善ing)

目录 1 什么是xlwt 2 导入xlwt 3 相关语法 3.1 创建新的workbook 3.2 创建新的sheet 3.3 保存workbook 4 python里表格的形式 4.1 矩阵 4.2 EXCEL的数据形式 完全等于矩阵的数字结构 4.3 python里矩阵 5 具体代码 5.1 代码 5.2 结果 5.3 要注意的问题 5.3.1 不能…

深入理解JVM虚拟机第十八篇:JVM种局部变量表结构的认识

大神链接:作者有幸结识技术大神孙哥为好友,获益匪浅。现在把孙哥视频分享给大家。 孙哥链接:孙哥个人主页 作者简介:一个颜值99分,只比孙哥差一点的程序员 本专栏简介:话不多说,让我们一起干翻JVM 本文章简介:话不多说,让我们讲清楚虚拟机栈存储结构和运行原理 文章目…

NOIP2023模拟12联测33 D. 滈葕

NOIP2023模拟12联测33 D. 滈葕 文章目录 NOIP2023模拟12联测33 D. 滈葕题目大意思路code 题目大意 思路 放一段题解的材料 ABO 血型系统是血型系统的一种&#xff0c;把血液分为 A,B,AB,O 四种血型。血液由红细胞和血清等组成&#xff0c;红细胞表面 有凝集原&#xff0c;血清…

ES6~ES13新特性(二)

文章目录 一、ES71.Array Includes2.指数exponentiation运算符 二、ES81.Object values2.Object entries3.String Padding4.Trailing Commas5.Object Descriptors 三、ES9四、ES101.flat flatMap2.Object fromEntries3.trimStart、trimEnd4.其他知识点 五、ES111.BigInt2.Nulli…

提升ChatGPT答案质量和准确性的方法Prompt engineering实用的prompt灵感和技巧

文章目录 1. 实用的prompt灵感和技巧小技巧常用prompt保存到输入法中普通promptprompt通用公式保存到输入法快捷指令中尝试用英语去写prompt沉浸式翻译软件3. 补充1. 实用的prompt灵感和技巧 解释***,并且给出暗喻/隐喻/类比(解释术语、专业名称,用一个词或短语指出常见的一…

odoo后台启动过程分析之一

odoo后台启动过程分析之一 1、odoo-bin #!/usr/bin/env python3# set server timezone in UTC before time module imported __import__(os).environ[TZ] UTC import odooif __name__ "__main__":odoo.cli.main()这个odoo-bin是一切的起点。 代码很简单 第一步&…

LangChain+LLM实战---Midjourney(v5.1) Prompt深度剖析

原文&#xff1a;Anatomy of Midjourney Promps: In-Depth Study for effective Prompting Strategies — V5.1 examples 作者&#xff1a;Michael King 你是否曾经发现自己盯着Midjourney的空白画布&#xff0c;手指悬停在键盘上&#xff0c;让我问自己&#xff1a;“我应该…