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日

相关文章

  • Javascript之高级数组API的使用实例

    Javascript之高级数组API的使用实例 在javascript中,数组是一种非常常用的数据结构。通过数组API的使用,可以使我们更加方便地操作和处理数据。除了常规的数组操作方法外,Javascript也提供了很多高级数组API,本篇文章将为大家介绍这些高级数组方法的使用实例。 1. map方法 map() 方法对数组的每个元素进行一次函数调用,并将其…

    JavaScript 2023年5月27日
    00
  • python中altair可视化库实例用法

    下面是“python中altair可视化库实例用法”的完整攻略: 1. Altair 库简介 Altair 是一个基于 Python 的声明式可视化库,用于创建交互式可视化图表。 声明式语法是指你通过直接描述所需图表的方式来创建它们,而无需编写细节代码。 Altair 是对 Vega-Lite 的 Python 封装,Vega-Lite 是基于 Vega 开…

    JavaScript 2023年5月28日
    00
  • 详解JavaScript中return的用法

    让我们来详细讲解一下 “详解JavaScript中return的用法”: 什么是return? return 是 JavaScript 中的一个关键字,用于将函数的返回值返回给函数的调用者。 return 语句用于终止函数的执行,并返回函数的结果。 在函数中使用 return 在一个函数中,只要遇到 return 语句,函数的执行就会被中断,并将 retur…

    JavaScript 2023年5月27日
    00
  • Bootstrap标签页(Tab)插件使用方法

    首先让我们来了解一下Bootstrap标签页(Tab)插件。 Bootstrap标签页插件可以将一组内容分割成可被轮流点击的视图块,并且只显示当前选择的视图块。这非常适合在比较繁琐的页面中展示多个内容模块。 使用步骤 步骤1. 引入Bootstrap插件和样式文件 在head标签中引入Bootstrap插件和样式文件。可以选择本地文件或使用cdn链接。 &l…

    JavaScript 2023年6月11日
    00
  • vue router的基本使用和配置教程

    以下是关于“vue router的基本使用和配置教程”的详细攻略: 背景介绍 Vue是一个流行的JavaScript库,它提供了一种轻量级的方式来构建交互式Web界面。Vue Router是作为Vue.js的官方路由管理器而开发的。借助Vue Router,您可以在多个视图之间进行无缝导航。本文将介绍如何使用Vue Router。 一、安装Vue Route…

    JavaScript 2023年6月11日
    00
  • flash与js通讯方法

    Flash与JS通讯是前端开发中经常遇到的问题,下面我来为大家详细讲解一下Flash与JS通讯方法的完整攻略。 Flash与JS通讯方法 Flash与JS之间的通讯一般通过两种方式,一种是Flash调用JS方法,另一种是JS调用Flash方法。下面分别详细讲解这两种方式。 Flash调用JS方法 Flash调用JS方法是通过ExternalInterface…

    JavaScript 2023年6月11日
    00
  • 详解JS函数重载

    下面我将为大家详细讲解关于JavaScript函数重载的完整攻略。 什么是JS函数重载 在JavaScript中,函数重载是指在同一个范围内定义多个同名但参数类型或数量不同的函数,根据函数的参数类型或数量来判断执行哪一个具体的函数。 使用方法 在JavaScript中,没有像Java或C++语言那样支持函数重载的语法。但是我们可以通过一些技巧来实现函数重载。…

    JavaScript 2023年5月28日
    00
  • js金额千分位的6种实现方法实例

    现在我们就来详细讲解“js金额千分位的6种实现方法实例”的完整攻略。 什么是金额千分位? 在很多场景下,我们需要显示金融金额,而金融金额的显示习惯是每三个数加一个逗号(英文符号为“,”),以便于人类去识别和理解这个数值,这就是所谓金额千分位。 比如,10000.00元要进行金额千分位转换后为:10,000.00元。 6种实现金额千分位的方法 下面我们就来介绍…

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