[js高手之路] es6系列教程 - 箭頭函數詳解

箭頭函數是es6新增的非常有意思的特性，初次寫起來，可能會覺得別扭，習慣之后，會發現很精簡.

什么是箭頭函數?

箭頭函數是一種使用箭頭( => )定義函數的新語法, 主要有以下特性:

• 不能通過new關鍵字調用
• 沒有原型, 因為不能通過new調用，所以沒有原型
• 沒有this, super，arguments和new.target綁定, new.target和super關鍵字是es6新增的
• 箭頭函數中的this，取決於他的上層非箭頭函數的this指向
• 沒有arguments對象，但是可以獲取到外層函數的arguments
• call,apply,bind不能改變箭頭函數的this指向

箭頭函數語法由函數參數、箭頭、函數體組成.

第一種形式: 沒有參數的寫法

        /*
            (): 空括號代表: 沒有傳遞參數
            函數體： console.log( 'ghostwu' ),  只有這一句話,可以不加花括號{}
        */
        let show = () => console.log( 'ghostwu' );
        show();

         //函數體只有一句話，當然也可以加花括號
        let show = () => { console.log( 'ghostwu' ); }
        show();

 第二種形式: 帶一個參數的寫法

        /*
            第一個a 表示 參數a
            第二個a 表示函數體a, 相當於 return a
        */
        let show = a => a;
        console.log( show( 10 ) );

        //如果函數體加了花括號，要用return
        let show = a => { return a; };
        console.log( show( 10 ) );

        // 當然也可以加小括號
        let show = (a) => { return a; };
        console.log( show( 10 ) );

 

        // let show = ( a ) => console.log( a );
        // show( 100 ); //100

        // 當函數體有return的時候，必須要加花括號
        let show = ( a ) => return a; //錯誤

 

 第三種形式: 帶2個以上參數的寫法

        //當函數有2個以上參數的時候，一定要用小括號
        // let add = ( a, b ) => a + b;
        // console.log( add( 10, 20 ) ); //30

        // let add = a, b => a + b; //錯誤
        // console.log( add( 10, 20 ) );

        //有return需要加花括號
        // let add = (a, b) => return a + b; //錯誤
        // console.log( add( 10, 20 ) );

        // let add = (a, b) => console.log( a + b );
        // add( 10, 20 ); //30

        // let add = ( a, b ) => { return a + b; };
        // console.log( add( 10, 20 ) ); //30

 

返回值如果是對象:

        //返回值是對象，為了以示區分，用小括號
        let show = name => ( { 'user' : name } );
        let oUser = show( 'ghost' );
        console.log( oUser.user );

         //用了return關鍵字，要用花括號{}
        let show = name => { return { 'user' : name } };
        let oUser = show( 'ghostwu' );
        console.log( oUser.user );

        //對象與傳參用法
        let show = ( name, age ) => {
            return {
                'uName' : name,
                'uAge' : age                
            };
        }
        let oUser = show( 'ghostwu', 22 );
        console.log( oUser.uName , oUser.uAge ); //ghostwu, 22

 

立即表達式的寫法:

        //立即表達式的寫法
        let oUser = ((name, age)=>{
            return {
                "uName" : name,
                "uAge" : age
            }
        })('ghostwu', 25 );
        console.log( oUser.uName , oUser.uAge );

 

箭頭函數不能new

        let User = () => 'ghostwu';
        console.log( User() );
        console.log( new User() ); //報錯，箭頭函數不能new

 

箭頭函數中的this，取決於他的上層非箭頭函數的this指向

         //this指向他的外層window
        // var a = 10;
        // let user = () => {
        //     console.log( this.a ); //this->window
        // }
        // user(); //10

         // 箭頭函數中的this取決於外層函數的this
        function User( name ) {
            this.name = name;
            this.getName = () => {
                console.log(this); //this指向oUser
                return this.name;
            };
        }
        var oUser = new User( 'ghostwu' );
        console.log( oUser.getName() );

 

箭頭函數可以簡化數組的處理

        //箭頭函數簡化數組處理
        // let arr = [10,100,0,3,-5];
        // arr.sort( ( a, b ) => a - b );
        // arr.sort( ( a, b ) => b - a );
        // console.log( arr );

 

箭頭函數取到的是外層的arguments

        let show = function( name ){
            return () => arguments[0]; // ghostwu, 箭頭函數獲取到的是外層的arguments
        }
        let fn = show( 'ghostwu' );
        console.log( fn() );

 

call,bind,apply都不能改變箭頭函數中this的指向

        var n1 = 100;
        var n2 = 200;
        let add = () => {
            return this.n1 + this.n2;
        };
        console.log( add.call( null ) ); //300
        console.log( add.apply( null ) );//300
        console.log( add.bind( null )() );//300