普通函数和箭头函数的区别

普通函数和箭头函数得区别

简单示例

//普通函数
function fun() {
  return 1000
}
const fun = function () {
  return 1000
}
//箭头函数
const fun = () => {
  return 100 
}

const fun = () => 100 //返回值只有一行代码得话可以省略return
console.log(fun());

复杂示例

箭头函数

   ()中定义参数，如果只有一个参数，可以不写括号

   {}中写函数体，如果函数体中只有返回值，可以不写return

总结： 

    1.this指向不同

    2.普通函数，谁调用这个函数，this指向谁

    3.箭头函数，在哪里定义函数，this指向谁

//普通函数ES5
let obj = {
  name: '前端-JC',
  age: 2,
  sayName() {
    let self = this
    setTimeout(function () {
      // console.log(`我是${this.name}`);//指向当亲this指向window
      console.log(`我是${self.name}`);
    }, 500)
  }
}
obj.sayName()

//箭头函数ES6
let obj = {
  name: '前端-JC',
  age: 2,
  sayName() {
    setTimeout(() => {
      console.log(`我是${this.name}`);
    }, 500)
  }
}
obj.sayName()

全面总结：

1. 箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
2. 箭头函数相对于普通函数语法更简洁优雅
3. 箭头函数的this指向父级作用域的this
4. call（），apply（），bind（）无法改变箭头函数的this指向
5. 不可以被当作构造函数
6. 不可以使用arguments对象
7. 箭头函数不支持new.target