ES6之函數(shù)的擴(kuò)展(二)

岳光發(fā)布于2019-08-26 11:55 / 2756人閱讀

摘要：主要講解參數(shù)嚴(yán)格模式屬性返回函數(shù)的函數(shù)名箭頭函數(shù)用定義函數(shù)參數(shù)引入?yún)?shù)其目的是為了獲取函數(shù)的多余參數(shù)數(shù)組的擴(kuò)展運(yùn)算符的逆向形式將參數(shù)數(shù)列轉(zhuǎn)為一個(gè)數(shù)組將一個(gè)數(shù)組轉(zhuǎn)為逗號(hào)分隔的參數(shù)序列有點(diǎn)安能辨我是雄雌的感覺(jué)參數(shù)的情況數(shù)組的擴(kuò)展運(yùn)算的情

主要講解:

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

1.rest參數(shù)

        ...arguments                      <=>           ...[...]
引入rest參數(shù)其目的是為了獲取函數(shù)的多余參數(shù)   <=>    數(shù)組的擴(kuò)展運(yùn)算符...的逆向形式
將參數(shù)數(shù)列轉(zhuǎn)為一個(gè)數(shù)組                      <=>    將一個(gè)數(shù)組轉(zhuǎn)為逗號(hào)分隔的參數(shù)序列

function push(arr,...items){  //有點(diǎn)安能辨我是雄雌的感覺(jué)
    if(Array.isArray(items)){
        array = array.concat(items); // rest參數(shù)的情況
    }else{
        array.push(...items);        // 數(shù)組的擴(kuò)展運(yùn)算的情況
    }
}
//rest參數(shù)
push([],1,23,4,45,56)       //[1,23,4,45,56]

//數(shù)組的擴(kuò)展運(yùn)算
push([],...[1,23,4,45,56]); //[1,23,4,45,56]

注意:
    1.rest參數(shù)必須位于函數(shù)參數(shù)末尾,且只能存在一個(gè)rest參數(shù),否則報(bào)錯(cuò)
    2.函數(shù)的length屬性不包括rest參數(shù),就跟止步于默認(rèn)值參數(shù)一樣,不確定的事情不考慮在內(nèi)

2.嚴(yán)格模式

es5中函數(shù)內(nèi)部可以設(shè)定嚴(yán)格模式,es6中函數(shù)參數(shù)使用了默認(rèn)值、解構(gòu)賦值、或者擴(kuò)展運(yùn)算符的話就不能設(shè)定嚴(yán)格模式
偽代碼:
    function doSomething(...items){
        "use strict";
        ...
    }
    //Uncaught SyntaxError: Illegal "use strict" directive in function with non-simple parameter list
    //由于代碼中基本沒(méi)有在函數(shù)內(nèi)部使用嚴(yán)格模式的情況，這個(gè)就不多了解了

3.name屬性 -- 返回函數(shù)的函數(shù)名

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"
//僅僅知道有這么一個(gè)屬性，具體用處未知

4.箭頭函數(shù) -- 用 "=>" 定義函數(shù)

let sayHi = name => name;
等價(jià)于:
let sayHi = function(name){
    return name;
}

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

**箭頭函數(shù)除了簡(jiǎn)化函數(shù)的寫法,特別是匿名函數(shù).另一個(gè)重要功能就是綁定定義時(shí)所在的作用域,而非運(yùn)行時(shí)動(dòng)態(tài)的作用域**

像click,setTimeout,setInterval這種運(yùn)行時(shí)動(dòng)態(tài)改變作用域的,寫成箭頭函數(shù)的形式則this仍然為代碼定義處的this

//計(jì)時(shí)器一個(gè)
function Timer(){
    this.count = 0;
    
    setInterval(() => {this.count++;},1000);
}

let t = new Timer();

等價(jià)的寫法:
function Timer(){
    this.count = 0;
    
    let __that = this;
    setInterval(function(){__that.count++;},1000);
}
//嵌套的情況,可以以此類推.其實(shí)就是在外層作用域創(chuàng)建一個(gè)變量指向this,然后內(nèi)層使用.每一層都會(huì)創(chuàng)建該層的this指向供下一層使用.

如有bug請(qǐng)指正Thanks?(?ω?)?!