JavaScript学习笔记——变量、作用域、var、const和let

news2025/2/27 10:27:43

JavaScript学习笔记——变量、作用域、var、const和let

学习链接（原链接）
变量
- 变量声明的三种方式
作用域
- 作用域介绍
- 作用域分类
- - 全局作用域
  - 局部作用域（函数作用域）
  - 块级作用域
  - 块级作用域和局部(函数)作用域区别
var
- var的作用域(全局+函数)
- var变量的重新声明与修改
- var变量提升
- JS里面使用var声明变量存在的三个问题
const
- - 三级目录

学习链接（原链接）

菜鸟教程
let和const与var的区别
js中var、let、const的区别
JS里面使用var声明变量存在的三个问题
在JavaScript中，if 语句是/有块级作用域吗？
JS IF 作用域
JavaScript的三座大山–(2)–作用域和闭包（牛牛牛牛牛）

变量

变量：存储信息的容器
可存放：值or表达式

命名规则：
以字母开头
以$或_开头（不推荐）
大小写敏感

变量声明的三种方式

变量声明的三种方式：var、let、const

作用域

作用域介绍

作用域：一个变量或者函数的有效作用范围

作用域分类

在JS中作用域一共有三种，分别是全局作用域、局部作用域（函数作用域）、块级作用域；

全局作用域

全局作用域：
1、声明在函数外部的变量（声明在script标签中的变量和函数），在代码中任何地方都能访问到的对象拥有全局作用域；
var和let变量在全局作用域中都是全局变量；

注意：所有末定义直接赋值的变量自动声明为拥有全局作用域
最外层函数和在最外层函数外面定义的变量拥有全局作用域

2、全局作用域中声明的变量和函数会作为window对象的属性和方法保存，可以通过 window.变量名去调用它；

3、全局作用域在页面打开时被创建，页面关闭时被销毁；

（1）最外层函数和在最外层函数外面定义的变量拥有全局作用域，例如：
var authorName="波妞";
function doSomething(){
    var blogName="中介";
    function innerSay(){
        console.log(blogName);
    }
    innerSay();
}
console.log(authorName); //波妞
doSomething(); //中介
console.log(blogName); //错误
innerSay() //错误

（2）所有未定义直接赋值的变量自动声明为拥有全局作用域，例如：
function doSomething(){
    var authorName="波妞";
    blogName="中介";
    console.log(authorName);
}
doSomething(); // 波妞
console.log(blogName); //中介
console.log(authorName); //错误

局部作用域（函数作用域）

块级作用域

块级作用域和局部(函数)作用域区别

var

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS--var、let、const</title>
</head>
<body>
    <script>
        var x = 1;
        var y = 2;
        var z = x + y;
        document.write(x + "<br>");
        document.write(y + "<br>");
        document.write(z + "<br>");
    </script>
</body>
</html>

在这里插入图片描述
JavaScript——document.write

var的作用域(全局+函数)

var可以在全局范围声明或函数/局部范围内声明。

示例：

var smytest = "smy";        //全局范围
function newFunction(){
    var smytest2 = "inner";
    console.log(smytest2);
}
console.log(smytest);       //输出：smy
newFunction();              //调用函数,输出：inner
console.log(smytest2);    	//输出：ReferenceError: smytest2 is not defined

var变量的重新声明与修改

var变量可以在相同的作用域内被重新声明和修改

var smytest = "smy";        //全局范围
var smytest = "fighting";   //相同作用域下重新声明
smytest = "emo";            //相同作用域下修改
function newFunction(){
    var smytest2 = "inner";
    var smytest2 = "outer"; //相同作用域下重新声明
    console.log(smytest2);
}
console.log(smytest);       //输出：emo
newFunction();              //调用函数,输出：outer

var变量提升

JavaScript 的一种机制:在执行代码之前，变量和函数声明会移至其作用域的顶部

console.log(greeter);
var greeter = 'say hello';

代码会被解释为:

var greeter;
console.log(greeter); // greeter is undefined
greeter = 'say hello';

var声明的变量会被提升到其作用域的顶部，并使用 undefined 值对其进行初始化

JS里面使用var声明变量存在的三个问题

1、允许重复声明，导致变量被覆盖
假设你var a = 2前面还有上万行代码，那么你调用prinf函数的时候，是想打印之前的a,但是你忘记之前声明的变量和几万行代码后面的a是同名的，导致后面声明的a覆盖了之前的a.

2、变量提升：闭包问题，怪异的数据访问.

if(Math.random() > 0.5){
    var a = "abc";
    console.log("if方法1" + a);
}else{
    console.log("if方法2" + a);
}
console.log("最外层" + a);

//输出：
//if方法2undefined
//最外层undefined