js 函数之箭头函数

126 阅读1分钟

#基本形式

let fn = (...args) => {
...
return ...;
}

#简化

//只有一个参数时,可以省去括号
let fn = arg => {
 return ...
}
//只有一行代码时,可以省去{},同时需要去掉return;
fn = x=> 2*x;

箭头函数的arguments参数

//箭头函数无法使用arguments获取参数
let fn = value => console.log(arguments[0]);
fn(5);   //Uncaught ReferenceError: arguments is not defined
//可以通过包装函数为其提供arguments对象
let fn = function (value){
   let bar = () => { console.log(arguments[0])};
   bar();
}
fn(5) // 5


总结
没有参数	() => 100 function(){ return 10}
一个参数	x => x+1 function(x){ return x + 1}
多个参数	(x, y) => x + y  相当于 function(x, y) { return x + y}
可变参数	(x, y, …rest) =>{ var i,sum = x+y; return sum; }
一个表达式	x => x+1
多个表达式	x => { if (x){ return x*x }else{ return x } }
返回一个对象	x => {{fn:x}}

箭头函数this指向

// 箭头函数this指向执行时所在的作用域
this.a = 1;
let obj = {
  a: 2,
  fn: function () {
    console.log(`fn:${this.a}`)
  },
  bar: () => {
    console.log(`bar: ${this.a}`);
  }
}
obj.fn();//2
obj.bar();//1