JavaScript的作用域和块级作用域概念理解

JavaScript作用域

在JavaScript中,作用域控制着变量和函数的可见性和生命周期。作用域是定义变量、函数以及访问它们的地方的一套规则。

作用域分为全局作用域和局部作用域。在函数中定义的变量、函数参数以及函数内部声明的函数都属于该函数的局部作用域。全局作用域包含了浏览器环境下的所有对象和方法,函数内部可以访问全局变量。

JavaScript作用域规则:
1.全局变量可以在整个程序范围内访问,函数内部可以访问全局变量
2.函数内部声明的变量只能在函数内部访问
3.函数内部可以访问全局变量
4.变量在出现在赋值表达式左侧时进行声明和初始化,赋值表达式右侧可以是任何类型

示例1:

var globalVar = 1; // 全局变量

function myFunc() {
  var localVar = 2; // 局部变量
  console.log(globalVar); // 可以访问全局变量
  console.log(localVar); // 可以访问局部变量
}

myFunc(); // 函数运行
console.log(globalVar); // 可以访问全局变量
console.log(localVar); // 局部变量无法在函数外部访问

示例2:嵌套函数

function outer() {
  var a = 1;

  function inner() {
    var b = 2;
    console.log(a); // 可以访问外部函数的变量
  }

  inner(); // 调用内部函数
}

outer(); // 调用外部函数

块级作用域

JavaScript是ES6之前没有块级作用域的,只有全局作用域和函数作用域。而块级作用域类似于函数作用域,但是只存在于if语句、循环语句、try/catch语句以及ES6新增的let和const关键词中。

块级作用域规则:
1.变量和函数在块级作用域中声明时只存在于该块级作用域中,不会污染全局变量
2.块级作用域中存在变量提升,但需要注意使用let和const关键词
3.块级作用域在外部无法访问其中的变量

示例3:if语句块级作用域

var a = 1;
if (true) {
  var a = 2;
}
console.log(a); // 2

使用var声明变量时,if语句中的a变量会覆盖全局变量a,导致输出结果为2。

示例4:let语句块级作用域

let b = 1;
if (true) {
  let b = 2;
  console.log(b); // 2
}
console.log(b); // 1

使用let声明变量时,if语句中的变量b只存在于该块级作用域中,不会影响全局变量b,输出结果为2和1。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript的作用域和块级作用域概念理解 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • Native.js屏幕截图实例代码

    下面我来详细讲解“Native.js屏幕截图实例代码”的完整攻略。 前置知识 在讲解本文的主要内容之前,我们需要掌握两个知识点: Native.js Native.js 是一个将 JavaScript 源代码编译成本地机器码的编译器,这样可以将 JavaScript 的运行速度提高数倍。 HTML5 Canvas HTML5 Canvas API 提供了一种…

    JavaScript 2023年6月11日
    00
  • JavaScript常用内置对象用法分析

    JavaScript常用内置对象用法分析攻略 什么是内置对象 在JavaScript中,常用内置对象是指自带的对象,无需额外导入或安装插件便可直接使用的对象。比如:数组对象、字符串对象、数学对象、日期对象等。 常用内置对象用法分析 数组对象 数组对象是JavaScript中重要的内置对象之一。数组对象用法如下: 创建数组 var arr = new Arra…

    JavaScript 2023年6月10日
    00
  • 不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了

    首先,不间断滚动JS打包类是一种JavaScript库,用于在网页上实现各种滚动效果,包括但不限于文字滚动、图片滚动、轮播图等。 使用步骤: 1.引入js文件 在html文件中引入js文件,例如: <script src="path/to/scroll.js"></script> 2.创建滚动元素 在html文件中…

    JavaScript 2023年6月11日
    00
  • 魔鬼字典 JavaScript 笔记 代码比较多乱第2/3页

    首先,需要明确的是,“魔鬼字典 JavaScript 笔记 代码比较多乱第2/3页”是一个博客文章,关于JavaScript代码笔记的一些总结和整理。 这篇博客包含了JavaScript的基础知识、常用的数据类型、流程控制语句、函数定义和数组对象等内容。全文分为多个章节,包含了大量的JavaScript代码,对于初学者来说可能有些难以理解。 攻略: 阅读博客…

    JavaScript 2023年6月10日
    00
  • Javascript将图片的绝对路径转换为base64编码的方法

    将图片的绝对路径转换为base64编码的方法可以使用Javascript的Canvas对象来实现。具体过程如下: 步骤 1:创建一个Image对象 首先,我们需要创建一个Image对象,将想要转换成base64编码的图片作为其src属性的值。 const image = new Image(); image.src = ‘https://example.co…

    JavaScript 2023年5月19日
    00
  • 一个非常全面的javascript URL解析函数和分段URL解析方法

    一个非常全面的 Javascript URL 解析函数和分段 URL 解析方法 JavaScript经常被用于处理URL。这个URL解析函数能够完整、彻底地解析一个 URL 字符串,使得开发人员可以轻松地获取任何 URL。 URL 解析函数 使用以下函数来解析一个 URL: function parseURL(url) { var parser = docu…

    JavaScript 2023年6月11日
    00
  • 关于JavaScript中string 的replace

    下面是关于JavaScript中string的replace的详细攻略。 什么是replace replace() 方法是 JavaScript 中的字符串方法,它用于在字符串中查找一个指定的子串,并用另一个字符串替换它。这个替换过程是不影响原字符串,而是产生一个新的字符串。 replace() 方法接收两个参数:第一个是需要查找的子串或正则表达式,第二个是…

    JavaScript 2023年5月28日
    00
  • JS前端使用canvas实现物体的点选示例

    下面是“JS前端使用canvas实现物体的点选示例”的完整攻略: 简介 本攻略旨在帮助JS前端开发者使用canvas实现物体的点选功能。点选,即用户点击鼠标后能够判断该处是否落在某个物体上,从而实现交互操作。 准备 在开始编写代码前,需要准备以下工具和材料:- 编辑器:Visual Studio Code、Sublime Text、Atom等- 浏览器:Ch…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部