一篇文章带你了解JavaScript作用域

Karen110 等级 598 0 0

在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。

JavaScript 有函数作用域: 这个作用域在函数内变化。

一、本地JavaScript变量

一个变量声明在JavaScript函数内部,成为函数的局部变量。

局部变量有局部作用域: 它们只能在函数中访问。

JS:


//code here can not use carName
  <script>
    reFunction();
    document.getElementById("demo").innerHTML =
    "carName的类型是 " + typeof carName;

    function reFunction() {
        var carName = "Volvo";
    }
</script>

一篇文章带你了解JavaScript作用域

由于局部变量只在它们的函数中被识别,所以具有相同名称的变量可以在不同的函数中使用。

当函数启动时创建局部变量,当函数完成时删除。

二、全局JavaScript变量

函数外声明的变量, 成为全局变量。

全局变量具有全局作用域: 网页上的所有脚本和函数都可以访问它。


<script>
    var carName = "Volvo"; //可以从任何脚本或函数访问全局变量
    myFunction();

    function myFunction() {
        document.getElementById("demo").innerHTML =
        "I can display " + carName;
    }
</script>

一篇文章带你了解JavaScript作用域

自动全局

如果给未声明的变量赋值, 它会自动成为全局变量。

此代码示例将声明一个全局变量carName,即使赋的值是函数内部。


myFunction();

// code here can use carName

function myFunction() {
    carName = "Volvo";
}

一篇文章带你了解JavaScript作用域

不要创建全局变量,除非你非常需要,在严格模式下 "Strict Mode"自动全局变量将失败。

三、在HTML中的全局变量

在JavaScript中,全局作用域是完整的JavaScript环境。

在HTML中,全局作用域是window对象。所有的全局变量都属于window对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
</head>
<body style="background-color: aqua;">

  <p>
  在HTML中,所有的全局变量将成为窗口window变量。
  </p>

  <p id="demo"></p>

  <script>
    var carName = "Volvo";

    // code here can use window.carName
    document.getElementById("demo").innerHTML = "I can display " + window.carName;
</script>

</body>
</html> 

一篇文章带你了解JavaScript作用域

全局变量(或函数)可以覆盖窗口变量(或函数). 任何函数,包括窗口对象,都可以覆盖全局变量和函数。

四、JavaScript 代码块作用域

表中是var,let和const之间的区别。

关键词 范围 可以重新分配 可以重新声明
var 函数作用域
let 块作用域
const 块作用域

用var关键字声明的变量不能具有块作用域,{}可以从块外部访问在块内部声明的变量:


{
  var num = 50;
  }
  // num 能在这里使用

用let关键字声明的变量可以具有“块作用域”。

{}不能从块外部访问在块内部声明的变量:


{
  let num = 50;
  }
  // num不能在这里使用

声明变量with const与let]涉及块作用域类似。

{
  const num = 50;
  }
  // num不能在这里使用

常量的值不能通过重新分配而更改,也不能重新声明。

五、总结

本文基于JavaScript,介绍了了函数作用域和变量作用域。介绍了变量中全局变量的几种显示的方法,在HTML中的全局变量应该如何去表示。通过案例的讲解,让读者更好的去理解。

代码很简单, 希望能够帮助你学习。

**-----**------**-----**---**** End **-----**--------**-----**-****

往期精彩文章推荐:

一篇文章带你了解JavaScript作用域

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】:https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。

收藏
评论区

相关推荐

JS排序算法
引子 有句话怎么说来着: 雷锋推倒雷峰塔,Java implements JavaScript. 当年,想凭借抱Java大腿火一把而不惜把自己名字给改了的JavaScript(原名LiveScript),如今早已光芒万丈。node JS的出现更是让JavaScript可以前后端通吃。虽然Java依然制霸企业级软件开发领域(C/C 的大神们不要打
Cors跨域解决
一、浏览器跨域问题产生 1、跨源资源共享(CORS)中文文档: https://developer.mozilla.org/zhCN/docs/Web/HTTP/Access_control_CORS 2、什么是浏览器跨域问题 指的是浏览器不能执行其他网站的脚本。JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,即同源策略。就好比我
秒懂js作用域与作用域链
JavaScript 中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,本文我会尽我所能用最简单的方式来解释作用域和作用域链,希望大家有所收获!好了下面开始我们的正文作用域常见的解释(什么是作用域)1. 一段程序代码中所用到的名字并不总是有效,而限定它的可用性的范围就是这个名字的作用域;2. 作用域规定了
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript 有函数作用域: 这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域: 它们只能在函数中访问。JS://code here can n
2018年 JavaScript 明星项目
![](https://oscimg.oschina.net/oscnet/c52a3381-8d56-4509-a191-4dd76ca37bb3.jpg)在 2016年 和 2017年 之后,欢迎来到第三届 JavaScript 明星项目! 是时候回顾 2018 年 Javascript 领域的发展与变化了。 通过对比各项目过去 12 个月在 Git
2018年 JavaScript 明星项目
![](https://oscimg.oschina.net/oscnet/c52a3381-8d56-4509-a191-4dd76ca37bb3.jpg)在 2016年 和 2017年 之后,欢迎来到第三届 JavaScript 明星项目! 是时候回顾 2018 年 Javascript 领域的发展与变化了。 通过对比各项目过去 12 个月在 Git
ES6 新特性之 let, const : JavaScript在变量方面的改进。
let : 块级作用域 ----------- 我们知道,JavaScript是没有块级作用域的,如果在块内使用var声明一个变量,它在代码块外面仍旧是可见的: if (true) { var foo = 3; } console.log(foo); // 3 for (var i = 0
FCF学习笔记三之setDataXML与setDataURL
先贴下使用setDataXML的例子: <div id="chartdiv" align="center"> 存放fusionChartsdiv区域 </div> <script type="text/javascript"> var myCharts = new FusionCharts("FusionCharts/Column3D.s
Highcharts使用HTML表中的数据创建交互式图表教程
[Highcharts](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F3328)是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、
JavaScript 作用域
在学习js的过程对闭包什么的,理解不好,偶然搜到这篇文章。豁然开朗,随翻译。 Javacript 中有一系列作用域的概念。对于新的JS的开发人员无法理解这些概念,甚至一些经验丰富的开发者也未必能。这篇文章主要目的帮助理解JavaScript中的一些概念如:scope,closure, this, namespace, function scope,
JavaScript作用域
一、JavaScript中无块级作用域 =================== 在Java或C#中存在块级作用域,即:大括号也是一个作用域。 ![](https://oscimg.oschina.net/oscnet/ea3e9460a4d20056c59315db47e2a0cbc2b.jpg)![](https://oscimg.oschina.ne
JavaScript图表库Highcharts发布最新版v8.2.2,修复了旧版Windows安装中的boost模块错误
[**Highcharts**](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F3328)是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图
JavaScript图表库Highcharts发布最新版本9.0
[**Highcharts**](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F3328)是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图
JavaScript易错知识点整理
前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES6的知识点。 JavaScript知识点 ------------- ### 1.变量作用域 `var a = 1; functio
Js中的跨域问题
一、什么是跨域? ======== 1.定义: ----- 跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况 下不能这么做,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是:只要 协议,域名,端口 有任何一