ES6之函數的擴展(二)

主要講解:

1. rest參數
2. 嚴格模式
3. name屬性 -- 返回函數的函數名
4. 箭頭函數 -- 用 "=>" 定義函數

---

1.rest參數

...arguments                      <=>           ...[...]
引入rest參數其目的是爲了獲取函數的多餘參數   <=>    數組的擴展運算符...的逆向形式
將參數數列轉爲一個數組                      <=>    將一個數組轉爲逗號分隔的參數序列

function push(arr,...items){  //有點安能辨我是雄雌的感受
    if(Array.isArray(items)){
        array = array.concat(items); // rest參數的狀況
    }else{
        array.push(...items);        // 數組的擴展運算的狀況
    }
}
//rest參數
push([],1,23,4,45,56)       //[1,23,4,45,56]

//數組的擴展運算
push([],...[1,23,4,45,56]); //[1,23,4,45,56]

注意:
    1.rest參數必須位於函數參數末尾,且只能存在一個rest參數,不然報錯
    2.函數的length屬性不包括rest參數,就跟止步於默認值參數同樣,不肯定的事情不考慮在內

---

2.嚴格模式

es5中函數內部能夠設定嚴格模式,es6中函數參數使用了默認值、解構賦值、或者擴展運算符的話就不能設定嚴格模式
僞代碼:
    function doSomething(...items){
        'use strict';
        ...
    }
    //Uncaught SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
    //因爲代碼中基本沒有在函數內部使用嚴格模式的狀況，這個就很少了解了

---

3.name屬性 -- 返回函數的函數名

function push(arr,...items){}    
    push.name;
    //"push"
    
    push.bind({}).name
    //"bound push"
    
let sayHi = function(){}
    sayHi.name
    //"sayHi"
let sayHi = function realName(){}
    sayHi.name
    //"realName"
    
let sayHell = new Function('x','y','console.log(x,y)');
    sayHell.name
    //"anonymous"
    
    sayHell.bind({}).name
    //"bound anonymous"
//僅僅知道有這麼一個屬性，具體用處未知

---

4.箭頭函數 -- 用 "=>" 定義函數

let sayHi = name => name;
等價於:
let sayHi = function(name){
    return name;
}

用法:
    i.單個參數時,可直接寫參數名
    ii.0個或兩個及兩個以上參數必須加括號
        let f = () => 5;
        let f = (x,y) => x+y;
        
    iii.函數代碼塊多於一條語句,就要使用大括號括起來
        let f = (x,y) => { ...}

---

**箭頭函數除了簡化函數的寫法,特別是匿名函數.另外一個重要功能就是綁定定義時所在的做用域,而非運行時動態的做用域**

---

像click,setTimeout,setInterval這種運行時動態改變做用域的,寫成箭頭函數的形式則this仍然爲代碼定義處的this

//計時器一個
function Timer(){
    this.count = 0;
    
    setInterval(() => {this.count++;},1000);
}

let t = new Timer();

等價的寫法:
function Timer(){
    this.count = 0;
    
    let __that = this;
    setInterval(function(){__that.count++;},1000);
}
//嵌套的狀況,能夠以此類推.其實就是在外層做用域建立一個變量指向this,而後內層使用.每一層都會建立該層的this指向供下一層使用.

---

若有bug請指正Thanks♪(･ω･)ﾉ!