箭头函数与普通函数(function)的区别是什么?

箭头函数是es6新增的对于函数的扩展,实现了函数写法简洁化,也使函数更具语义化,常见的箭头函数如下:

const func = (str) => str + 'xxx'

箭头函数可以省略函数代码块的大括号{},箭头后面的内容即为函数返回的内容,上面函数接受一个str,返回一个字符串拼接。
但是箭头函数使用中需要注意几个容易出现的错误:

  1. 如果箭头函数需要返回一个对象?
    const func = () => {name: 'zlx', age: '25'}
    
    上面这样写对吗?箭头后面返回的是一个对象?其实这样写会报错,因为对象的大括号根函数体的大括号混淆了,执行的时候,函数会将对象的大括号当成函数体的大括号来解析,这样就会报语法错误,正确的写法是:
    const func = () => ({name: 'zlx', age: '25'})
    
    将要返回的对象,用小括号包起来,这样就不会产生混淆。
  2. 箭头函数内部使用arguments对象:
  const func = () => {
    console.log(arguments)
  }
func(1,2,3,4)

我们在普通函数中,经常使用arguments对象来获取函数的所有参数,但是在箭头函数中,arguments对象是未定义的,这时候我们可以使用…rest来获取参数:

  const func = (...rest) => {
    console.log(rest) // [1,2,3,4]
  }
func(1,2,3,4)
  1. 箭头函数内部this指向函数外部,不指向箭头函数本身:
    class Obj {
    name = 'Obj';
    func = () => {
     console.log(this)
    }
    }
    var o = new Obj();
    o.func()
    
    执行结果如下:
    image
    可见箭头函数this指向外部函数。