在學習廖雪峰前輩的JavaScript教程中，遇到了一些需要注意的點，因此作為學習筆記列出來，提醒自己注意！
如果大家有需要，歡迎訪問前輩的博客https://www.liaoxuefeng.com/學習。
在JavaScript中，用var申明的變量實際上是有作用域的。
如果一個變量在函數體內部申明，則該變量的作用域范圍是整個函數體，在函數體外部，不能被引用。
'use strict'; function foo() { var x = 1; x = x + 1; } x = x + 2; // ReferenceError! 無法在函數體外引用變量x
如果兩個不同的函數各自申明了同一個變量，那么該變量只在各自的函數體內起作用。
也就說，兩個函數內部的同名變量相互獨立，互不影響：
'use strict'; function foo() { var x = 1; x = x + 1; } function bar() { var x = 'A'; x = x + 'B'; }
由於JavaScript的函數可以嵌套，所以，內部的函數可以訪問外部函數定義的變量，反過來就不行：
'use strict'; function foo() { var x = 1; function bar() { var y = x + 1; // bar可以訪問foo的變量x! } var z = y + 1; // ReferenceError! foo不可以訪問bar的變量y! }
另外一種情況，如果內部函數和外部函數的變量名重名，則內部函數的變量將“屏蔽”外部函數的變量。
這說明了JavaScript的函數在查找變量時，從自身函數定義開始，從“內”向“外”查找：
function foo() { var x = 1; function bar() { var x = 'A'; console.log('x in bar() = ' + x); // 'A' } console.log('x in foo() = ' + x); // 1 bar(); } foo(); //顯示結果如下： x in foo() = 1 x in bar() = A
變量提升
JavaScript的函數定義有個特點，它會先掃描整個函數體的語句，把所有申明的變量“提升”到函數頂部：
'use strict'; function foo() { var x = 'Hello, ' + y; console.log(x); var y = 'Bob'; } foo();
雖然是strict模式，但語句 var x = 'Hello, ' + y;並不報錯，因為變量y在后面申明了。
但是console.log顯示Hello，undefined，說明變量y的值為undefined。
這正是因為JavaScript引擎自動提升了變量y的聲明，但不會提升變量y的賦值。
上述foo()函數，JavaScript引擎看到的代碼相當於：
function foo() { var y; // 提升變量y的申明，此時y為undefined var x = 'Hello, ' + y; console.log(x); y = 'Bob'; }
因為JavaScript這一特性，我們在函數內部定義變量時，最后嚴格遵守“在函數內部首先申明所有變量”這一規則。最常見的做法是用一個var申明函數內部所用到的所有變量：
function foo() { var x = 1, // x初始化為1 y = x + 1, // y初始化為2 z, i; // z和i為undefined // 其他語句: for (i=0; i<100; i++) { ... } }
全局作用域
不在任何函數內部定義的變量就具有全局作用域。實際上，JavaScript默認有一個全局對象window，全局作用域的變量實際上被綁定到window的一個屬性：
'use strict'; var course = 'Learn JavaScript'; alert(course); // 'Learn JavaScript' alert(window.course); // 'Learn JavaScript'
因此，直接訪問全局變量course和訪問window.course是完全一樣的。
在前面我們了解到，函數定義有兩種方式，以變量方式var foo=function( ) { }定義的函數實際上也是一個全局變量，因此，頂層函數的定義也被視為一個全局變量，並綁定到window對象：
'use strict'; function foo() { alert('foo'); } foo(); // 直接調用foo() window.foo(); // 通過window.foo()調用
同時，我們也知道，每次直接調用的alert( )函數實際上也是window的一個變量。
這說明JavaScript實際上只有一個全局作用域。任何變量（函數也可以視為變量），如果沒有在當前函數的作用域中找到，就會繼續往上查找，最后如果在全局作用域中也沒有找到，則報錯ReferenceError。
命名空間
因為全局變量會綁定到window上，不同的JavaScript文件如果使用了相同的全局變量，或者定義了相同名字的頂層函數，都會造成命名沖突，並且很難被發現。
減少沖突的一個方法是把自己的所有變量和函數全部綁定到一個全局變量中：
// 唯一的全局變量MYAPP: var MYAPP = {}; // 其他變量: MYAPP.name = 'myapp'; MYAPP.version = 1.0; // 其他函數: MYAPP.foo = function () { return 'foo'; };
把自己的代碼全部放入唯一的命名空間MYAPP中，會大大減少全局變量沖突的可能。
我們熟知的許多JavaScript庫都是采用這種方式：jQuery，YUI，underscore等等。
局部作用域
由於JavaScript的變量作用域實際上是函數內部，我們在for循環等語句塊中是無法定義具體的有局部作用域的變量的：
'use strict'; function foo() { for (var i=0; i<100; i++) { // } i += 100; // 仍然可以引用變量i }
為了解決塊級作用域，ES6引入了新的關鍵字let，用let代替var可以申明一個塊級作用域的變量：
'use strict'; function foo() { var sum = 0; for (let i=0; i<100; i++) { sum += i; } i += 1;// SyntaxError }
常量
由於var和let申明的是變量，如果要申明一個常量，在ES6之前是不行的話，我們通常采用全部大寫的變量來表示“這是一個常量，不要修改它的值”：
var PI = 3.14;
ES6標准引入了新的關鍵字const來定義常量，conset與let都具有塊級作用域：
'use strict'; const PI = 3.14; PI = 3; // 某些瀏覽器不報錯，但是無效果！ PI; // 3.14
解構賦值
從ES6開始，JavaScript引入了解構賦值，可以同時對一組變量進行賦值。
通過一下的代碼示例，來展示一下，解構賦值的優越性：
//①采用傳統的賦值方式，把一個數組的元素分別賦值給幾個變量： var array = ['hello', 'JavaScript', 'ES6']; var x = array[0]; var y = array[1]; var z = array[2]; //②采用ES6中新增的解構賦值方式，直接對多個變量同時賦值： 'use strict'; // 如果瀏覽器支持解構賦值就不會報錯: var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
注意：對數組元素進行解構賦值時，多個變量要用[ ]括起來。
如果數組本身還有嵌套，也可以通過下面的形式進行解構賦值，需要注意嵌套層次和位置要保持一致：
let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']]; x; // 'hello' y; // 'JavaScript' z; // 'ES6'
解構賦值還可以忽略某些元素：
let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前兩個元素，只對z賦值第三個元素 z; // 'ES6'
如果需要從一個對象中取出若干屬性，也可以使用解構賦值，便於快速獲取對象的指定屬性：
'use strict'; var person = { name: '小明', age: 20, gender: 'male', passport: 'G-12345678', school: 'No.4 middle school' }; var {name, age, passport} = person;
// name, age, passport分別被賦值為對應屬性:
console.log('name = ' + name + ', age = ' + age + ', passport = ' + passport);
name = 小明, age = 20, passport = G-12345678
對一個對象進行解構賦值時，同樣可以直接對嵌套的對象屬性進行賦值，只要保證對應的層次是一致的：
var person = { name: '小明', age: 20, gender: 'male', passport: 'G-12345678', school: 'No.4 middle school', address: { city: 'Beijing', street: 'No.1 Road', zipcode: '100001' } }; var {name, address: {city, zip}} = person; name; // '小明' city; // 'Beijing' zip; // undefined, 因為屬性名是zipcode而不是zip // 注意: address不是變量，而是為了讓city和zip獲得嵌套的address對象的屬性: address; // Uncaught ReferenceError: address is not defined
使用解構賦值對對象屬性進行賦值時，如果對應的屬性不存在，變量將被賦值為undefined，這和引用一個不存在的屬性獲得undefined是一致的。如果要使用的變量名和屬性名不一致，可以用下面的語法獲取：
var person = { name: '小明', age: 20, gender: 'male', passport: 'G-12345678', school: 'No.4 middle school' }; // 把passport屬性賦值給變量id: let {name, passport:id} = person; name; // '小明' id; // 'G-12345678' // 注意: passport不是變量，而是為了讓變量id獲得passport屬性: passport; // Uncaught ReferenceError: passport is not defined
解構賦值還可以使用默認值，這樣就避免了不存在的屬性返回 undefined 的問題：
var person = { name: '小明', age: 20, gender: 'male', passport: 'G-12345678' }; // 如果person對象沒有single屬性，默認賦值為true: var {name, single=true} = person; name; // '小明' single; // true
有些時候，如果變量已經被聲明了，再次賦值的時候，正確的寫法也會報語法錯誤：
// 聲明變量:
var x, y;
// 解構賦值:
{x, y} = { name: '小明', x: 100, y: 200};
// 語法錯誤: Uncaught SyntaxError: Unexpected token =
這是因為JavaScript引擎把{開頭的語句當作了塊處理，於是=不再合法。解決方法是用小括號括起來：
({x, y} = { name: '小明', x: 100, y: 200});
使用場景
解構賦值在很多時候可以大大簡化代碼。例如，交換兩個變量x和y的值，可以這么寫，不再需要臨時變量：
var x=1, y=2; [x, y] = [y, x]
快速獲取當前頁面的域名和路徑：
var {hostname:domain, pathname:path} = location;
如果一個函數接收一個對象作為參數，那么，可以使用解構直接把對象的屬性綁定到變量中。例如，下面的函數可以快速創建一個Date對象：
function buildDate({year, month, day, hour=0, minute=0, second=0}) { return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second); }
它的方便之處在於傳入的對象只需要year、month和day這三個屬性：
buildDate({ year: 2017, month: 1, day: 1 });
// Sun Jan 01 2017 00:00:00 GMT+0800 (CST)
也可以傳入hour、minute和second屬性：
buildDate({ year: 2017, month: 1, day: 1, hour: 20, minute: 15 });
// Sun Jan 01 2017 20:15:00 GMT+0800 (CST)
使用解構賦值可以減少代碼量，但是，需要在支持ES6解構賦值特性的現代瀏覽器中才能正常運行。目前支持解構賦值的瀏覽器包括Chrome，Firefox，Edge等。