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

s甜甜的学习之旅

已于 2024-01-20 15:41:41 修改

阅读量1.2k

点赞数 21

文章标签： javascript 开发语言 ecmascript

于 2024-01-12 08:29:24 首次发布

本文链接：https://blog.csdn.net/m0_46615310/article/details/135522189

版权

本文详细介绍了JavaScript中的变量声明方式（var、let和const）、作用域概念（全局、局部、函数和块级），以及var的特殊行为如提升和重复声明问题。同时讨论了const的作用和区别。

摘要由CSDN通过智能技术生成

学习链接（原链接）

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

变量

变量：存储信息的容器
可存放：值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 、let 、const 声明的所有变量，都是函数的局部变量，作用范围为局部作用域，
即：只能在函数内部使用，函数外部使用是不行的。
无论是通过var还是let定义在局部作用域的变量都是局部变量；

1、调用函数时，函数作用域被创建；函数执行完毕，函数作用域被销毁；

2、每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的；

3、在函数作用域中可以访问到全局作用域的变量，在函数外无法访问到函数作用域内的变量；

4、在函数作用域内访问变量/函数时，会先在自身作用域中查找，若没有找到，则会到函数的上一级作用域中寻找，一直到全局作用域；

块级作用域

任何一对花括号｛｝中的语句集都属于一个块
在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。

在ES6中只要 { } 没有和函数结合在一起，那么就是“块级作用域”。
ES6之前没有块级作用域。
使用 let 关键字或者 const 关键字来实现块级作用域。

let 和 const声明的变量只在 let 或 const命令所在的代码块 { } 内有效，在 { } 之外不能访问。

！！！！！注意：
块级作用域中，var定义的变量是全局变量，let定义的变量是局部变量；
块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域
但函数funtion(){ }里面的{ }不属于块级作用域，而是局部作用域(函数作用域)；

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

在块级作用域中通过var定义的变量是全局变量

{
    //块级作用域
    var num = 123;//全局变量
}
console.log(num);  // 123

在局部作用域中通过var定义的变量是局部变量

function test() {
     var value = 666;//局部变量
     console.log(value);
}
test(); // 666
console.log(value);//value is not defined

无论是在块级作用域还是局部作用域，省略变量前面的let或者var就会变成一个全局变量。

{
     var num1 = 678;//全局变量
     num2 = 678;//全局变量
     let num3 = 678;//局部变量
}
console.log(num1);//678
console.log(num2);//678
console.log(num3);//num3 is not defined

function f() {
      num1 = 456;//全局变量
      var num2 = 678;//局部变量
      let num3 = 123;//局部变量
}
f();
console.log(num1);//456
console.log(num2);//num2 is not defined
console.log(num3);//num3 is not defined

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