[js高手之路] es6系列教程

箭头函数是es6新增的非常有意思的特性，初次写起来，可能会觉得别扭，习惯之后，会发现很精简.

什么是箭头函数?

箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性:

• 不能通过new关键字调用
• 没有原型, 因为不能通过new调用，所以没有原型
• 没有this, super，arguments和new.target绑定, new.target和super关键字是es6新增的
• 箭头函数中的this，取决于他的上层非箭头函数的this指向
• 没有arguments对象，但是可以获取到外层函数的arguments
• call,apply,bind不能改变箭头函数的this指向

箭头函数语法由函数参数、箭头、函数体组成.

第一种形式: 没有参数的写法

1         /*2             (): 空括号代表: 没有传递参数3             函数体： console.log( 'ghostwu' ),  只有这一句话,可以不加花括号{}4         */5         let show = () => console.log( 'ghostwu' );6         show();

1          //函数体只有一句话，当然也可以加花括号2         let show = () => { console.log( 'ghostwu' ); }3         show();

 第二种形式: 带一个参数的写法

1         /*2             第一个a 表示 参数a3             第二个a 表示函数体a, 相当于 return a4         */5         let show = a => a;6         console.log( show( 10 ) );

1         //如果函数体加了花括号，要用return2         let show = a => { return a; };3         console.log( show( 10 ) );

1         // 当然也可以加小括号2         let show = (a) => { return a; };3         console.log( show( 10 ) );

 

1         // let show = ( a ) => console.log( a );2         // show( 100 ); //1003 4         // 当函数体有return的时候，必须要加花括号5         let show = ( a ) => return a; //错误

 

 第三种形式: 带2个以上参数的写法

 1         //当函数有2个以上参数的时候，一定要用小括号 2         // let add = ( a, b ) => a + b; 3         // console.log( add( 10, 20 ) ); //30 4  5         // let add = a, b => a + b; //错误 6         // console.log( add( 10, 20 ) ); 7  8         //有return需要加花括号 9         // let add = (a, b) => return a + b; //错误10         // console.log( add( 10, 20 ) );11 12         // let add = (a, b) => console.log( a + b );13         // add( 10, 20 ); //3014 15         // let add = ( a, b ) => { return a + b; };16         // console.log( add( 10, 20 ) ); //30

 

返回值如果是对象:

1         //返回值是对象，为了以示区分，用小括号2         let show = name => ( { 'user' : name } );3         let oUser = show( 'ghost' );4         console.log( oUser.user );

1          //用了return关键字，要用花括号{}2         let show = name => { return { 'user' : name } };3         let oUser = show( 'ghostwu' );4         console.log( oUser.user );

1         //对象与传参用法2         let show = ( name, age ) => {3             return {4                 'uName' : name,5                 'uAge' : age                6             };7         }8         let oUser = show( 'ghostwu', 22 );9         console.log( oUser.uName , oUser.uAge ); //ghostwu, 22

 

立即表达式的写法:

1         //立即表达式的写法2         let oUser = ((name, age)=>{3             return {4                 "uName" : name,5                 "uAge" : age6             }7         })('ghostwu', 25 );8         console.log( oUser.uName , oUser.uAge );

 

箭头函数不能new

1         let User = () => 'ghostwu';2         console.log( User() );3         console.log( new User() ); //报错，箭头函数不能new

 

箭头函数中的this，取决于他的上层非箭头函数的this指向

1          //this指向他的外层window2         // var a = 10;3         // let user = () => {4         //     console.log( this.a ); //this->window5         // }6         // user(); //10

 1          // 箭头函数中的this取决于外层函数的this 2         function User( name ) { 3             this.name = name; 4             this.getName = () => { 5                 console.log(this); //this指向oUser 6                 return this.name; 7             }; 8         } 9         var oUser = new User( 'ghostwu' );10         console.log( oUser.getName() );

 

箭头函数可以简化数组的处理

1         //箭头函数简化数组处理2         // let arr = [10,100,0,3,-5];3         // arr.sort( ( a, b ) => a - b );4         // arr.sort( ( a, b ) => b - a );5         // console.log( arr );

 

箭头函数取到的是外层的arguments

1         let show = function( name ){2             return () => arguments[0]; // ghostwu, 箭头函数获取到的是外层的arguments3         }4         let fn = show( 'ghostwu' );5         console.log( fn() );

 

call,bind,apply都不能改变箭头函数中this的指向

1         var n1 = 100;2         var n2 = 200;3         let add = () => {4             return this.n1 + this.n2;5         };6         console.log( add.call( null ) ); //3007         console.log( add.apply( null ) );//3008         console.log( add.bind( null )() );//300