web前端框架Javascript开发基础之JavaScript作用域
小职 2021-05-31 来源 :前端进阶学习交流 阅读 508 评论 0

摘要:本文主要介绍了web前端框架Javascript开发基础之JavaScript作用域,通过具体的内容向大家展现,希望对大家前端Javascript开发的学习有所帮助。

本文主要介绍了web前端框架Javascript开发基础之JavaScript作用域,通过具体的内容向大家展现,希望对大家前端Javascript开发的学习有所帮助。

web前端框架Javascript开发基础之JavaScript作用域

在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>

 web前端框架Javascript开发基础之JavaScript作用域

 

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

 

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

 

二、全局JavaScript变量

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

 

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

 

<script>

    var carName = "Volvo"; //可以从任何脚本或函数访问全局变量

    myFunction();

 

    function myFunction() {

        document.getElementById("demo").innerHTML =

        "I can display " + carName;

    }

</script>

 web前端框架Javascript开发基础之JavaScript作用域

 

自动全局

 

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

 

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

 

myFunction();

 

// code here can use carName

 

function myFunction() {

    carName = "Volvo";

}

 

 web前端框架Javascript开发基础之JavaScript作用域

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

 

三、在HTML中的全局变量

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

 

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

 

<!DOCTYPE html>

<html>

<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>  

 web前端框架Javascript开发基础之JavaScript作用域

 

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

 

四、JavaScript 代码块作用域

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

 web前端框架Javascript开发基础之JavaScript作用域

 

 

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

 

{

  var num = 50;

  }

  // num 能在这里使用

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

 

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

 

{

  let num = 50;

  }

  // num不能在这里使用

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

 

{

  const num = 50;

  }

  // num不能在这里使用

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

 

五、总结

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

 

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



我是小职,记得找我

✅ 解锁高薪工作

✅ 免费获取基础课程·答疑解惑·职业测评

web前端框架Javascript开发基础之JavaScript作用域

本文由 @小职 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程