ES6知识点整理箭头函数的应用

ES6 允许使用“箭头”（=>）定义函数, 也叫“lambda表达式”

ES6之前普通函数的写法

var fn = function () {};

箭头函数的登场

var fn2 = (name) => {
  console.log('fn2');
};

// 一个参数可以不加括号
var fn3 = name => {
  console.log('fn3');
}

fn2(); // fn2
fn3(); // fn3

箭头函数在定时器中的this

setTimeout(function () {
  console.log(this); // window
});

setTimeout(()=>{
  console.log(this); // undefined
})

箭头函数在对象中的this指向

class User{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  changeName(name) {
    this.name = name;
  }
  changeAge(age) {
    this.age = age;
  }
  change(name,age) {
    let self = this;
    (()=>{
      this.name = name;
      this.age = age;
      console.log(self); // 在箭头函数中，this指向外面的对象
    })();
  }
}

var u = new User();
u.change('Joh', 10); // User {name: "Joh", age: 10}

箭头函数的简写

箭头函数中只包括一条return语句，则可以省略大括号

var fn = (n)=>{
  return n*3
}
console.log(fn(3)); // 9

var fn2 = n => n*4;
console.log(fn2(3)); // 12

箭头函数中不能正常使用arguments属性

var fn = n => {
  console.log(arguments[0]); 
}
fn(12); // undefined

var fn2 = n => {
  console.log(n);
}
fn2(10); // 10

最后，还要注意的是箭头函数不能通过new关键字来实例化