[js高手之路] es6系列教程 - 箭头函数详解
2017-08-05 17:27
886 查看
箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简.
什么是箭头函数?
箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性:
不能通过new关键字调用
没有原型, 因为不能通过new调用,所以没有原型
没有this, super,arguments和new.target绑定, new.target和super关键字是es6新增的
箭头函数中的this,取决于他的上层非箭头函数的this指向
没有arguments对象,但是可以获取到外层函数的arguments
call,apply,bind不能改变箭头函数的this指向
箭头函数语法由函数参数、箭头、函数体组成.
第一种形式: 没有参数的写法
第二种形式: 带一个参数的写法
第三种形式: 带2个以上参数的写法
返回值如果是对象:
立即表达式的写法:
箭头函数不能new
箭头函数中的this,取决于他的上层非箭头函数的this指向
箭头函数可以简化数组的处理
箭头函数取到的是外层的arguments
call,bind,apply都不能改变箭头函数中this的指向
什么是箭头函数?
箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性:
不能通过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
相关文章推荐
- [js高手之路] es6系列教程 - 箭头函数详解
- [js高手之路] es6系列教程 - 函数的默认参数详解
- [js高手之路] es6系列教程 - 函数的默认参数详解
- [js高手之路] es6系列教程 - var, let, const详解
- [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
- [js高手之路] es6系列教程 - 对象功能扩展详解
- [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战
- [js高手之路] es6系列教程 - 对象功能扩展详解
- [js高手之路] es6系列教程 - 迭代器与生成器详解
- [js高手之路] es6系列教程 - 解构详解
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
- [js高手之路] es6系列教程 - Map详解以及常用api
- [js高手之路] es6系列教程 - 解构详解
- [js高手之路] es6系列教程 - 新的类语法实战选项卡
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
- [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法
- [js高手之路] es6系列教程 - var, let, const详解
- [js高手之路] es6系列教程
- [js高手之路] es6系列教程
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)