变量作用域与解构赋值

作用域

• var声明的变量实际上是由作用域的
• 在函数内部声明的变量作用域为整个函数体

function foo() {
    var x = 1;
    x += 1;
}
x = x + 2; //ReferenceError! 无法在函数体外引用变量x

• 内部函数可以访问外部函数定义的变量，反过来则不行

变量的提升

• js函数会先扫描整个函数体语句，把所有声明的变量提升到函数顶部

function foo() {
    //var y; 提升变量y的声明，y为undefined
    var x = "hello, " + y;
    console.log(x);
    var y = "Bob";
}
foo(); // 输出 "hello, undefined"

• 因此，在使用变量时候，样额按照先声明再使用的原则

全局作用域

• 不在任何函数内定义的变量就具有全局作用域
• js默认全局对象window
• 全局作用域的属性实际上被绑定到window的一个属性上

var course = "learn js";
console.log(course); // learn js
console.log(window.course); // learn js

• 顶层函数的定义也被视为一个全局变量，并绑定到window对象

function foo() {
    console.log("foo");
}

foo();//通过foo()调用
window.foo(); //通过window.foo()调用

• 大胆猜想，console.log也是顶层函数的一个全局变量，并绑定到window属性

window.console.log("foo");//输出foo

• js实际上只有一个全局作用域，任何变量，如果没有在当前作用域中找到，就会继续往上找，最后如果在全局作用域中没有找到，就会报ReferenceError错误

命名空间

• 不同的js文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，就会造成冲突
• 减少冲突的方法就是把自己的所有变量和函数绑定到一个全局变量中

var MYAPP = {};

MYAPP.name = "myapp";
MYAPP.version = 1.0;

MYAPP.foo = function () {
    return "foo";
}

• js中语句块中无法定义具有局部作用域的变量，js变量作用域实际上是函数内部
• 为了解决块级作用域，ES6引入了新的关键字let，代替var声明一个块级作用域变量
• ES6中引入关键字const定义常量，const与let都具有块级作用域。const PI = 3.14
• 如果对常量赋值，不会报错但是没有效果

解构赋值

• ES6中可以使用结构赋值，向多个变量同时赋值

var [x, y, z] = ["hello", "javascript", "es6"]

console.log(x + ' ' + y + ' ' + z);

[x, y] = [y, x] //用来进行两个数值之间的交换

• 结构赋值可以进行嵌套，但是要注意层次和位置要保持一致

[x, [y, z]] = [1, [2, 3]];
x; // 1
y; // 2
z; // 3
[, , z] = [1, 2, 3] // 忽略掉某些元素

• 从对象中取出若干属性，也可以使用解析结构快速获取指定属性

var person = {
    name: '小明',
    age: 20,
    gender: "male",
    passport: "G-123456"
}
var {name, age, passport} = person; // name age passport 分别被赋值为对应属性

console.log(name, age, passport);

• 对一个对象进行解构赋值时，同样可以直接对嵌套的对象进行赋值，只要保证对应的层次一致

var person = {
    name: "小明",
    age: 20,
    address: {
        city: "beijing",
        street: "No.1 Road",
        zipcode: "100001"
    }
}

var {name, address: {city: c, zipcode: z}} = person;
// city不是变量，而是为了让c获得city属性

• 如果属性名不存在，变量被赋值为undefined
• 有些时候，如果变量已经被声明了，再次赋值的时候，正确的写法也会报错

var x, y;
{x, y} = {name: "ming", x: 100, y:200}
// js引擎会把{当作块处理，于是=就不再合法，正确的做法是用小括号括起来
({x, y} = {name: "ming", x:100, y:200})