ES6基礎

零、什麼是ECMAScript？

1、let和const

2、模板字符串

3、箭頭函數

4、對象的單體模式

5、面向對象

 

 

 

零、什麼是ECMAScript？

• 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/

 

1、let和const

    let命令的用法相似於var，可是它聲明的是局部變量，而var聲明的是全局變量。const命令是用來聲明一個只讀的常量，一旦聲明，就不能修改，const也是局部變量。

• var命令會出現變量提高現象，即變量能夠在聲明以前使用，值爲undefined，而let沒有變量提高現象。
• let不容許在相同的做用域內，重複聲明同一個變量。
• ES5只有全局做用域和函數做用域，沒有塊級做用域，所以會帶來幾種不合理的場景：1.函數內的變量會覆蓋函數外的變量，因爲變量提高，值爲undefined（在函數內打印爲undefined，在函數外爲正常值）。2.用來計數的循環變量i泄露爲全局變量。

 

2、模板字符串

 

    $('.test').append(`

            <a>hello ${append_1}</a> //會在class='test'類中添加a標籤

        `)

使用方法` ${1} `  反引號也能夠表示多行字符串

 

3、箭頭函數

 

//無形參

var f = () => 5;

// 等同於

var f = function () { return 5 };

 

//多個形參

var sum = (num1, num2) => num1 + num2;

// 等同於

var sum = function(num1, num2) {

  return num1 + num2;

};

 

函數體中this是函數對象，而箭頭函數中的this是window對象

 

4、對象的單體模式

因爲箭頭函數this的指向問題，推出的一種寫法：

    var person = {

            name: 'name',

            age: 18,

            fav(){

                console.log(this);

                console.log(this.age);

            }

    }

    person.fav();

this是person

 

    var person = {

            name: 'name',

            age: 18,

            fav: ()=>{

                console.log(this);

                console.log(this.age);

            }

    }

    person.fav();

this是window

 

5、面向對象

 

以前版本：

       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();

 

ES6引入了class的概念

class Cat{

        // 至關於 __init__

        constructor(name, age){

            this.name = name;

            this.age = age;

        }

        show_name(){

            console.log(this.name);

        }

        show_age(){

            console.log(this.age);

        }

    }

    var tom = new Cat('tom', 18);

    tom.show_age();

    tom.show_name();