箭头函数
箭头函数能让代码更简洁;箭头函数能让函数的性能更加纯正;
let fn3 = x => x * 2;
什么是箭头函数
ES6 中容许应用箭头函数的形式来定义一个函数。后面学习的定义一个函数有两种形式:
1.函数申明式
2.函数表达式
当初有了一个新的形式:
3. 箭头函数
格局
let 函数名 = (形参1,...形参n)=>{ // 函数体}
定义一个箭头函数
// 1. 函数申明式function fu1(x) { return x * 2;}// 2. 函数表达式let fn2 = function (x) { return x * 2;}// 3. 箭头函数let fn3 = (x) => { return x * 2;}
第一眼看到这个箭头函数时,会感觉很奇怪。如果从函数表达式的格局登程, 通过如下2步演变步骤就能够失去。
把function 关键字 后挪动到 ()和 {} 两头
把function 改写成 =>
留神:
- `=>`是一个整体,不要加空格- 箭头函数只在定义上有些区别,但在函数调用格局上,是没有区别的。
简化写法
当形参有且只有一个,能够省略小括号
let f = (x) => {console.log(x)}// 能够简化成:let f = x => {console.log(x)}
当函数体只有一条语句,能够省略大括号;
let f = x => {console.log(x)}// 能够简化成:let f = x => console.log(x)
当函数体只有一条语句,并且就是return语句,则能够省略return和大括号。
let f = x => {return x*2 }// 能够简化成:let f = x => x*2
留神如果返回值是一个对象,要加()
let f = x => {return {a:1} }// 能够简化成:let f = x => {a:1} // 报错let f = x =>({a:1})
箭头函数与一般函数的区别
1.外部没有arguments
2.不能作为结构器
3.外部没有this
没有 arguments
let fn = (a,b) => { console.log(arguments); // 报错,arguments is not defined};fn(1, 2);
外部的this对象,指向定义时所在的对象,而不是应用时所在的对象。
1.箭头函数能够拜访this对象,但这个this对象指向在定义箭头函数时它时所处的对象(宿主对象),而不是运行时的对象。
var name = 'lisi'; // 测试时,这里必须用var,因为用let申明的变量不能应用window调用let obj = { name: 'zhangsan', f1 : () => { console.log(this); // window对象 console.log(this.name); // lisi }, f2 : function(){ console.log(this); // obj console.log(this.name); // zhangsan }, f2 : function(){ console.log(this); // obj console.log(this.name); // zhangsan }};obj.f1();
箭头函数中的this指向是固定化
的,并不是因为箭头函数外部有绑定this的机制,理论起因是箭头函数基本没有本人的this,导致外部的this就是外层代码块的this。
var obj = {};var f1 = functoin(){console.log(this)}var f2 = ()=>{console.log(this)}f1();f1.call(obj)// call能够批改一般函数外部的this的值f2();f2.call(obj);// call并不能批改箭头函数外部的this的值
箭头函数不能作为构造函数
let Person = () => { };let obj = new Person(); // 报错,Person is not a constructor// 换个角度了解,箭头函数中都没有本人的this,怎么解决成员,所以不能当构造函数
在javascript中,函数是一等公民 ,它除了起到最根本的提炼代码之外,还能够当做结构器来应用,它能做的事件太多了。在ES6提出的箭头函数给函数减负了。
最佳实际
(1)优先级:箭头函数> 表达式 > 申明式
(2)如果在函数的外部波及this的应用,则要特地小心this,切实不释怀就打印进去看看。(如果函数的外部没有this,则能够放心使用箭头函数)
(3)留神革新函数申明式成箭头函数时,不会再有函数晋升。