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

普通函数的this指向

一个普通函数的this指向，在函数调用时才能明确，如果，调用函数的是函数外层的对象，则this 指向对象，如函数没有外层的对象，则指向全局对象window

function arr(){
    return this.name
}

console.log(arr())

let obj ={
    name: 'yang',
    age: 31,
    getName(){
        return  this.name
    }
}
console.log(obj.getName())

如果作为一个构造函数，则this指向构造函数的实例

function arr(){
    this.name = 'yang'
}
var arr1 = new arr()

console.log(arr1.name)

如果有call,apply,bind 会改变this的指向

function arr(){
    this.name = 'yang'
}
let obj = {}
arr.call(obj)
arr.apply(obj)
arr.bind(obj)()
console.log(obj.name)

箭头函数的this指向

箭头函数与普通函数不同，箭头函数没有原型，所以箭头函数本身没有this，箭头函数的this指向在定义的时候继承自外层第一个普通函数的this,如果没有外层的函数，则指向全局window对象，而且箭头函数的this指向不能被直接修改

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

1.箭头函数不能直接使用argument对象，但是如果箭头函数的外层还有普通函数，那么箭头函数的参数就等于外层第一个普通函数的参数

箭头函数可以使用扩展运算符来展开参数

var arguments
let a = ()=>{
    console.log(arguments)
}
a(4,5,6,7)
let a = (...arguments)=>{
    console.log(arguments)
}
a(4,5,6,7)   //[4,5,6,7]

2. 箭头函数不能使用new操作符

箭头函数不支持new.target属性  确保用new 生成实例，返回使用new命令的构造函数 ，如果箭头函数的this指向普通函数，那么它的new.target属性就是指向该普通函数的引用

new bb();
function bb() {
  let a = () => {
    console.log(new.target); // 指向函数bb：function bb(){...}
  };
  a();
}

3.箭头函数不支持函参数的重命名

function arr(a,a){
    console.log(a)
}
arr(1,2)
let a = (a,a)=>{
    console.log(a)
}
a(4,5)

箭头函数的不适用场景

1.定义字面量方法，箭头函数的this指向全局

2.回调函数的动态this