JavaScript作用域实战

news2024/11/25 20:24:18

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

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.coloradmin.cn/o/1177957.html

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

相关文章

遇到python程序是通过sh文件启动的,如何调试

说明 下载的源码总会遇到这样启动的&#xff1a; 并且发现shell文件内容很多&#xff0c;比较复杂&#xff0c;比如&#xff1a; 解决方案 这时候想要调试&#xff0c;可以通过端口连接的方式调试&#xff0c;具体方法如下&#xff1a; 在vscode调试按钮中添加远程附加调试…

Antv/G2 自定义tooltip鼠标悬浮提示信息

Antv/G2 提示 - Tooltip 教程 Tooltip 提示信息文档 chart.line().position(label*value).color(type).tooltip(type*value, (type:string, value:number) > { return {name: type,value: value%}}) });demo&#xff1a; <!DOCTYPE html> <html lang&quo…

最受欢迎的程序员副业排行榜TOP6

程序员接单的情况并不少见&#xff0c;因为程序员职业工种的特殊性&#xff0c;能够比较快的衔接上新项目和新技术&#xff0c;所以接私活做副业成了许多程序员的不二之选。 程序员的副业是指程序员在业余时间里从事与编程相关的兼职工作&#xff0c;或者是与技术相关的创业项…

[算法训练营] 回溯算法专题(三)

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…

致:CSGO游戏搬砖人的一封信

最近大家还在坚持操作CSGO游戏搬砖项目不&#xff1f; 这个项目虽是稳赚项目&#xff0c;但也有行情好和行情不好的时候&#xff0c;平台的大中小各种活动的举办&#xff0c;都会对我们的项目造成一定影响。行情的上下波动势必然会影响卡价的波动&#xff0c;影响选品的快慢&a…

【SqlSever】日期类型转换

特殊类型日期转换 原始数据 12 28 2021 5:18PM 12 28 2021 6:08PM 12 29 2021 7:47AM 12 26 2021 9:00PM 02 9 2022 10:44AM 转换为&#xff1a; 2021-12-28 17:18:00.000 2021-12-28 18:08:00.000 2021-12-29 07:47:00.000 2021-12-26 21:00:00.000 2022-02-09 10:44:00…

70 内网安全-域横向内网漫游Socks代理隧道技术

目录 必要基础知识点:1.内外网简单知识2.内网1和内网2通信问题3.正向反向协议通信连接问题4.内网穿透代理隧道技术说明 演示案例:内网穿透Ngrok测试演示-两个内网通讯上线内网穿透Frp自建跳板测试-两个内网通讯上线CFS三层内网漫游安全测试演练-某CTF线下2019 涉及资源: 主要说…

Spring Boot + EasyUI Datebox和Datetimebox样例

使用EasyUI的Datebox和Datetimebox组件&#xff0c;并对其进行适当的改造&#xff0c;比如更改日期格式、设置默认值或者将当前时间设置为默认值。 一、运行结果 二、实现代码 1.代码框架 2.实现代码 SpringBootMainApplication.java: package com.xj.main;import org.spri…

Mysql数据库的备份和恢复及日志管理

一、数据备份概述 1.1 备份的分类 完全备份&#xff1a;整个数据库完整地进行备份 增量备份&#xff1a;在完全备份的基础之上&#xff0c;对后续新增的内容进行备份 冷备份&#xff1a;关机备份&#xff0c;停止mysql服务&#xff0c;然后进行备份 热备份&#xff1a;开机备…

【机器视觉--光学】工业相机成像原理

相机成像原理分为透镜成像原理和小孔成像原理&#xff0c;工业相机原理与透镜成像类似。 透镜成像原理 凸透镜的成像规律是 即&#xff1a;物距的倒数与像距的倒数之和等于焦距的倒数 对焦原理 工业相机镜头分为定焦、定倍、变焦镜头&#xff0c;常用的是定焦和定倍&#xff…

Android耗电量测试

背 / 景 / 介 / 绍 目前对于移动设备而言&#xff0c;电量是很重要的一个方面。现在大家使用手机基本每天都需要充电&#xff0c;所以用户也非常关注耗电的问题&#xff0c;如果应用设计不合理导致电量大量消耗&#xff0c;那么对于关注耗电的用户而言&#xff0c;这款应用将会…

EasyExcel实现动态表头功能

EasyExcel实现动态表头功能 开发过程中&#xff0c;大部分都会使用到导出报表功能&#xff0c;目前阶段会用得有 poi导出&#xff08;暂无&#xff09;&#xff0c; easyexcel导出&#xff08;官方文档&#xff0c;https://easyexcel.opensource.alibaba.com/docs/current/&am…

六大设计原则:构建优雅、可维护和可扩展的软件

六大设计原则&#xff1a;构建优雅、可维护和可扩展的软件 单一职责原则 (Single Responsibility Principle)开放封闭原则 (Open-Closed Principle)里氏替换原则 (Liskov Substitution Principle)依赖倒置原则 (Dependency Inversion Principle)接口隔离原则 (Interface Segreg…

【Linux】Shell命令行的简易实现(C语言实现)内键命令,普通命令

文章目录 0.准备工作1.大体框架 一、获取命令行二、解析命令行三、进程执行1.普通命令2.内建命令 四、完整代码&#xff1a; 0.准备工作 1.大体框架 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <assert.h> #include <u…

【MySql】MySql表的增删查改

目录 1.新增 1.1单行数据 全列插入 2.2 多行数据 指定列插入 2.查询 2.1 全列查询 2.2 指定列查询 2.3查询字段为表达式 2.4 别名 2.5 去重&#xff1a;DISTINCT 2.6 排序&#xff1a;ORDER BY 2.7 条件查询&#xff1a;WHERE 2.8 分页查询&#xff1a;LIMIT 3.修…

ARMday01(计算机理论、ARM理论)

计算机理论 计算机组成 输入设备、输出设备、运算器、控制器、存储器 1.输入设备&#xff1a;将编写好的软件代码以及相关的数据输送到计算机中&#xff0c;转换成计算机能够识别、处理和存储的数据形式 键盘、鼠标、手柄、扫描仪、 2.输出设备&#xff1a;将计算机处理好的数…

警告:未配置spring boot 配置注解处理器

前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 问题 我再使用ConfigurationProperties(prefix “redisson”)去加载配置文件中的属性的时候&#xff0c;发现idea有个警告 并且配…

系统提示缺少或找不到msvcp140.dll文件的解决方法

MSVCP140.dll是Microsoft Visual C 2015 Redistributable的一个组件&#xff0c;它是运行许多Windows应用程序所必需的。当您在计算机上遇到“msvcp140.dll丢失”的错误消息时&#xff0c;这意味着您的系统缺少这个重要的动态链接库文件。以下是详细介绍的5种解决方法&#xff…

Halcon WPF 开发学习笔记(1):Hello World小程序

文章目录 文章专栏视频链接Hello World训练图片训练目的 开始训练图像预处理导入图像三通道处理调用算子通道选取 滤波什么是好的滤波 增加对比度 区域选取阈值处理算子参数选择运行结果(红色为选择区域) 区域分割运行结果 特征筛选参数代码第二次&#xff0c;面积筛选 画选中十…

网络工程师回顾学习

根据书本目录&#xff0c;写下需要记忆的地方&#xff1a; 参考之前的笔记&#xff1a; 网络工程师回答问题_one day321的博客-CSDN博客 重构第一部分需要记忆的&#xff1a; 第一章&#xff1a;计算机网络概论 计算机网络的定义和分类&#xff1a;计算机网络是指将地理位…