普通函数与箭头函数的区别，你会用了吗

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。

箭头函数的 this 指向父级作用域的 this

const obj={
    fullname:"itbbfx",
    sayName(){
            console.log('this.fullname',this.fullname)
    }
};
obj.sayName()

执行结果如下图所示。

fullname 的结果为 itbbfx 的原因 sayName 方法是通过 obj 来调用的，obj 的 fullname 初始值为 itbbfx。因此输出的 this.fullname 的结果为 itbbfx。这个就是普通函数。

const obj={
    fullname:"itbbfx",
    sayName:()=>{
            console.log('this.fullname',this.fullname)
    }
};
obj.sayName()

执行结果如下图所示。

fullname 的结果为 undefined 原因是如果我们使用箭头函数，箭头函数它的 this 指向的是当前这个函数的父作用域中的 this。我们当前这个箭头函数父作用域就是全局对象，即全局 window，window 的 fullName 属性没有设置初始，最终输出的结果为 undefined，如果我们给这个 window 的 fullName 设置初始值为 “I love you”，执行结果如下图所示。

虽然它是通过 obj 来调用的，但是箭头函数它是在定义的时候就决定了 this 指向。定义的时候，它的 this 指向的是全局。使用箭头函数，数据的结果就是“I love you”。

call()、apply()、bind() 无法改变箭头函数中 this 的指向

function sayName(){
        console.log('this.fullname',this.fullname)
}
const obj={
        fullname:'itbbfx'
}
sayName.call(obj)

执行结果如下图所示。

fullname 输出的结果为 itbbfx，原因 sayName 方法通过 call 方法来改变 this 的指向，this 的指向是 obj。

const sayName=()=>{
    console.log('this.fullname',this.fullname)
}
const obj={
    fullname:'itbbfx'
}
sayName.call(obj)

执行结果如下图所。

输出的结果为 undefined。因为它这个 this 指向的是当前函数副作用。虽然它是通过这个 obj 来进行一个调用的，但是 call 方法并没有改变它这个指向。

不可以当做构造函数

function Persion(){
    this.fullname="itbbfx"
}
const obj=new Persion;
console.log('obj',obj)

执行结果如下所示。

const Persion=()=>{
    this.fullname="itbbfx"
}

const obj=new Persion;
console.log('obj',obj)

执行结果如下所示，

箭头方式的函数不能用作构造函数。

不可以使用 arguments 对象

是一个对应于传递给函数的参数的类数组对象，它保存在我们函数的参数。

Javascript 并没有重载函数的功能，但是 Arguments 对象能够模拟重载。Javascrip 中每个函数都会有一个Arguments 对象实例 arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用arguments的元素。

function sayName(){
    const args=arguments;
    console.log('args',args);
}
sayName('a','b')

从执行结果来看，arguments 对象他接受了两个参数。第一个是 a，第二个是 b，arguments 可以接收调用参数的时候传入的实参。

把普通函数换成箭头函数，我们再来看一下它的执行结果。、

const sayName=()=>{
    const args=arguments;
    console.log('args',args);
}
sayName('a','b')

执行结果如下图所示。

引用类型的错误，箭头函数无法用 arguments 来接收我们的参数。

箭头函数中如何接受 agreement 对象呢？使用 “...args” 来接受参数。

const sayName=(...args)=>{
    console.log('args',args);
}
sayName('a','b')

这个就是箭头函数和普通函数的区别，箭头函数中无法使用arguments 对象。

箭头函数不支持 new.target

new.target 是用来确定我们的对象是通过哪个构造函数来进行实例的。


function Persion(){
	this.name="itbbfx";
	const target=new.target;
	console.log('target',target)
}
const obj=new Persion;
console.log('obj',obj)
  </script>

new.target 指向了我们这个构造函数，普通函数中使用 new.target。

接下来我们来把构造函数换成箭头函数。

const Persion=()=>{
    this.name="itbbfx";
    const target=new.target;
    console.log('target',target)
}
const obj=new Persion;
console.log('obj',obj)

可以箭头函数它是不能使用 new.target 的这个操作符的。

这个就是我们箭头函数和普通函数的五个区别。在面试中，需要详细的说出这五个点，并且指出它们在使用上的一些细节。