JavaScript-变量的作用域 、const、let

作用域

局部函数

在javascript中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~（如果非要使用的话，可以用闭包）

function qj() {
    var x = 1;
    x = x + 1;
}
x = x + 2;  // Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qj() {
    var x = 1;
    x = x + 1;
}
function qj2() {
    var x = 'A';
    x = x + 1;
}

内部函数可以访问外部函数的成员，反之则不行

function qj() {
    var x = 1;
    console.log(x)
    // 内部函数可以访问外部函数的成员，反之则不行
    function qj2() {
        var y = x + 1;
        console.log(y)
    }
    qj2()
    var z = y + 1;
    console.log(z)
}

假设，内部函数变量和外部函数的变量，重名!

function qj() {
    var x = 1;

    function qj2() {
        var x = 'A';
        console.log('内 '+x)
    }
    qj2()
    console.log('外 '+x)

}
qj()

假设在JavaScript中函数查找变量从自身函数开始~，由 “内” 向 “外” 查找，假设外部存在这个同名的函数，则内部函数会屏蔽外部函数的变量。

---

提升变量的作用域

function qj() {
    var x = 'X' + y;
    console.log(x)
    var y = 'y';
}

结果： Xundefined
说明：JavaScript执行引擎，自动提升了y的声明，但是不会提升变量y的赋值，等价于：

function qj() {
    var y;
    var x = 'X' + y;
    console.log(x)
    y = 'y';
}

这个是在JavaScript建立之初就存在的特性，养成规范：所有变量定义都放在函数的头部，不要乱放，便于代码维护；

function qj2() {
    var x = 1,
        y = x + 1,
        z,i,a;//undefined

    // 之后随意使用
}

全局函数

// 全局变量
x = 1;
function f() {
    console.log(x)
}
f()
console.log(x)

全局对象window

var x = 'xxx';
alert(x)
alert(window.x) // 默认所有的全局变量，都会自动绑定在Window对象下

alert()这个函数本身也是一个Window变量，使用window.alert()是一样的

var x = 'xxx';
window.alert(x)
var old_alert = window.alert;
window.alert = function () {
}
// 发现alert()失效了
window.alert(123)
// 恢复
window.alert = old_alert
window.alert(456)

Javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错ReferenceError

---

规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，就会冲突~ -->如何能够减少冲突？

// 唯一全局变量
var wangApp = {};

// 定义全局变量
wangApp.name = 'wang';
wangApp.add = function (a,b) {
    console.log(a+b);
    return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~

---

局部作用域let

function aa() {
    for (var i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1); // 101 问题？ i 出了这个作用域还能使用
}

ES6 let关键字，解决局部作用域冲突问题！

function aa() {
    for (let i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1); // Uncaught ReferenceError: i is not defined
}

建议大家都使用let去定义局部作用域的变量。

常量 const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值

var PI = '3.14';
console.log(PI)
PI = '132'; // 可以修改成功
console.log(PI)

在ES6引入了常量关键字const

const PI = '3.14';
console.log(PI)
PI = '132'; // Uncaught TypeError: Assignment to constant variable.
console.log(PI)

https://www.bilibili.com/video/BV1JJ41177di?p=13&spm_id_from=pageDriver