变量的作用域、let、const详解

变量的作用域

在javascript中, var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~（非要想实现的话，后面可以研究一下闭包)

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

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

function wsh(){
    var x = 1;
    x = x + 1;
}

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

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

function wsh(){
    var x = 1;
    
    //内部函数可以访问外部函数的成员，反之则不行
    function wsh2(){
        var y = x + 1;  // 2
    }

    var z = y + 1;  // Uncaught ReferenceError: y is not defined
}

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

function wsh(){
    var x = 1;

    function wsh2(){
        var x = 'A';
        console.log('inner' + x);  // innerA
    }
    console.log('outer' + x);  // outer1
    wsh2()
}

wsh()

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

提升变量的作用域

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

结果: xundefined
说明:js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值;

function wsh2(){
    var y;

    var x = 'x' + y;
    console.log(x);
    y = 'y';
}

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

function wsh2(){
    var x = 1,
        y = x + 1,
        z, i, a;  // undefined
    // 之后随意用
}

全局函数

//全局变量
var x = 1;

function f(){
    console.log(x);
}
f();
console.log(x);

全局对象window

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

alert()这个函数本身也是一个window变量;

var x = 'xxx';

window.alert(x);

var old_alert = window.alert;

//old_alert(x);

window.alert = function(){

};
//发现alert()失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

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

规范

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

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

// 定义全局变量
WshApp.name = 'Wsh';
WshApp.add = function(a, b){
    return a + b;
}

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

局部作用域 let

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

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

function aaa(){
    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 = '123';  // 可以改变这个值
console.log(PI);

在ES6引入了常量关键字const

const PI = '3.14';  // 只读变量
console.log(PI);
PI = '123';  // TypeError:Assignment to constant variable.
console.log(PI);