什麽是ECMAScript，以及es6的誕生？

1997年 ECMAScript 1.0 誕生

1999年12月 ECMAScript 3.0誕生，它 是一個巨大的成功，在業界得到了廣泛的支持，它奠定了JS的基本語法，被其後版本完全繼承。直到今天，我們一開始學習JS，其實就是在學3.0版的語法

2000年的ECMAScript4.0是當下ES6的前身，但由於這個版本太過激烈，對ES3做了徹底升級，所以暫時被“和諧”了

2009年12月，ECMAScript5.0版正式發布。ECMA專家組預計ECMAScript的第五個版本會在2013年中期到2018年作為主流的開發標準。2011年6月，ES5.1版發布，並且成為ISO國際標準

2013年，ES6草案凍結，不再添加新的功能，新的功能將被放到ES7中；2015年6月，ES6正式通過，成為國際標準

書籍參考：http://es6.ruanyifeng.com/

es6語法：let和const

es6新增了let命令，用來聲明變量。它的用法類似於var，但是所聲明的變量，只在let命令所在的代碼塊內有效。

在script中，{}內部叫做一個代碼塊

let與var作用一致

<script>
    {
        var a = 3;
    }
    console.log(a)
</script>

我們看到使用var在代碼塊內部定義的變量在代碼塊外也可以使用，這是不符合常理的

<script>
    {
        let a = 3;
    }
    console.log(a)
</script>

而let則不允許在代碼塊外調用代碼塊內定義的變量（報沒有這個變量的錯誤）

區別2

<script>
    var a = [];
    for (var i = 0; i < 10; i++) {
        a[i] = function () {
            console.log(i);
        };
    }
    a[6]();
</script>

看上面的代碼，之所以會輸出10是因為var定義的i在代碼塊外也可用，所以a循環10便i全部都在變，一直到i為10，此時a傳幾i都為10

<script>
    let a = [];
    for (let i = 0; i < 10; i++) {
        a[i] = function () {
            console.log(i);
        };
    }
    a[6]();
</script>

而當我們使用let則不會出現這個問題，因為let定義的變量只存在於塊內，每個塊是獨立的

不存在變量提升

var命令會發生”變量提升“現象，即變量可以在聲明之前使用，值為undefined。這種現象多多少少是有些奇怪的，按照一般的邏輯，變量應該在聲明語句之後才可以使用。

為了糾正這種現象，let命令改變了語法行為，它所聲明的變量一定要在聲明後使用，否則報錯。

<script>
    console.log(a);
    var a = 3;
</script>

他並沒有報錯

<script>
    console.log(a);
    let a = 3;
</script>

使用let則會報錯

不允許重復聲明

let不允許在相同作用域內，重復聲明同一個變量。不能在函數內部重新聲明參數。

// 報錯
function func() {
  let a = 10;
  var a = 1;
}

// 報錯
function func() {
  let a = 10;
  let a = 1;
}

function func(arg) {
  let arg; // 報錯
}

function func(arg) {
  {
    let arg; // 不報錯
  }
}

const命令（常量）

const定義常量，一旦定義則不可更改

用法同上，不做demo

模板語法

當我們使用傳統的語法來拼接字符串時，通常使用

$(‘#result‘).append(
‘There are <b>‘ + basket.count + ‘</b> ‘ +
‘items in your basket, ‘ +
‘<em>‘ + basket.onSale +
‘</em> are on sale!‘
);

這種做法在長字符串的拼接的時候非常混亂且易出錯，ES6 引入了模板字符串解決這個問題。

模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量

// 普通字符串
`In JavaScript ‘\n‘ is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入變量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

在普通的console中請使用普通拼接

註意模板中包裹字符串的是``

在模板中會保留格式

箭頭函數

基本語法：

ES6允許使用“箭頭”（=>）定義函數

var f = a = > a

//等同於
var f = function(a){
   return a;  
}

如果箭頭函數不需要參數或需要多個參數，就使用一個圓括號代表參數部分。

//無形參
var f = () => 5;
// 等同於
var f = function () { return 5 };

//多個形參
var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
  return num1 + num2;
};

使用箭頭函數註意點：

<script>
    let person2 = {
        name:‘a‘,
        age:18,
        fav: ()=>{
            // 當前this指向了定義時所在的對象（window）
            console.log(this);
        }
    };

    person2.fav();
</script>

我們發現在箭頭函數中this指的並不是當前函數而是在定義這個函數時的對象，即瀏覽器的當前窗口

那麽怎麽解決呢？需要用到單體模式

<script>
    let person2 = {
        name:‘a‘,
        age:18,
        fav(){
            console.log(this);
        }
    };

    person2.fav();
</script>

當然也可以使用普通的function語法

面向對象

JavaScript 語言中，生成實例對象的傳統方法是通過構造函數。

function Animal(name,age){
            this.name = name;
            this.age = age;

        }
        Animal.prototype.showName = function(){
            console.log(this.name);
            console.log(this.age);
        }

        var a = new Animal(‘小黃‘,5);
        a.showName();

上面這種寫法跟傳統的面向對象語言（比如 C++ 和 Java）差異很大，很容易讓新學習這門語言的程序員感到困惑。

ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。

基本上，ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。上面的代碼用 ES6 的class改寫，就是下面這樣

class Animal{
            
            // 構造器  當你創建實例之後 constructor()方法會立刻調用 通常這個方法初始化對象的屬性
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            showName(){
                console.log(this.name);
            }
        }
        var a2 = new Animal(‘點點‘,3);

上面代碼定義了一個“類”，可以看到裏面有一個constructor方法，這就是構造方法，而this關鍵字則代表實例對象。也就是說，ES5 的構造函數Animal，對應 ES6 的Animal類的構造方法。

Animal類除了構造方法，還定義了一個showName方法。註意，定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函數定義放進去了就可以了。另外，方法之間不需要逗號分隔，加了會報錯。

ES6 的類，完全可以看作構造函數的另一種寫法。

console.log(Animal2===Animal2.prototype.constructor);//true

上面代碼表示，類本身就指向了類的構造函數。

使用的時候，也是直接對類使用new命令，跟構造函數的用法完全一致。

constructor方法

constructor方法是類的默認方法，通過new命令生成對象實例時，自動調用該方法。一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被默認添加。

class Animal {
}

// 等同於
class Animal {
  constructor() {}
}

上面代碼中，定義了一個空的類Point，JavaScript 引擎會自動為它添加一個空的constructor方法。

es6的新增語法