1、定义区别:箭头函数语法比普通函数更加简洁
普通函数使用关键字function定义。
箭头函数:如果没有参数,直接写一个();如果一个参数,可以省略();如果多个参数,逗号分割。如果函数体中只有return返回语句或者只有一句代码,return和{}可以省略。
//普通函数
const fn=function(){
console.log(this)//Window
}
//箭头函数
const fn1 = () => console.log(1);
fn1(); //1
const fn2 = a => console.log(a);
fn2(2) //2
const fn3 = (a, b, c) => a+b+c;
var sum = fn3(1, 2, 3)
console.log(sum);//6
2、this指向区别
箭头函数没有自己的this,箭头函数内部 this 始终指向创建时所在作用域指向的对象。call,apply,bind方法改变不了箭头函数的指向。
普通函数:直接调用时指向全局对象;方法调用时指向调用该方法的对象;new 调用时指向创建的对象实例;call、apply、bind 调用时,指向三种方法的第一个参数。
const fn=function(){
console.log(this)//Window
}
fn() //等价于Window.fn()
let obj1 = {
name: "Tom",
sayHi:function() {
console.log(this);//打印{ name: 'Tom', sayHi: [Function: sayHi] }
}
}
obj1.sayHi()//this指向obj1对象
// //构造函数
function Person(name,age) {
this.name = name
this.age = age
console.log(this);//打印 Person {name: 'Jerry', age: 12}
}
let p1=new Person("Jerry",12)
//箭头函数没有自己的this,它的this来自上级作用域,call,apply,bind方法改变不了箭头函数的指向
let obj2 = {
name: "Tom",
sayHi:()=> {
console.log(this);//Window
}
}
obj2.sayHi()//this指向Window对象
javaSccript---call()、 bind()、 apply()的区别_javascropt call-CSDN博客
3、参数区别
箭头函数不绑定 arguments 对象,可以使用es6的...rest参数代替arguments对象,来访问箭头函数的参数列表。如果在普通函数中嵌套箭头函数,并在箭头函数中访问arguments,实际上获得的是父作用域(函数)的arguments对象
const fn = (val) => {
console.log(val);//1
console.log(arguments); //Uncaught ReferenceError: arguments is not defined
}
fn(1, 2)
const fn1 = (...rest) => {
console.log(rest);//[1,2]
}
fn1(1,2)
const fn2= function(val){
console.log(val);//1
console.log(arguments); //Uncaught ReferenceError: arguments is not defined
}
fn2(1, 2)
const fn3= function(val){
let fn = () => {
console.log(val);//1
console.log(arguments);//Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
fn()
}
fn3(1,2)
4、构造器
箭头函数不能用作构造器,和 new一起用会抛出错误。
为什么箭头函数不能用作构造器,和 new一起用会抛出错误。
因为new的过程:1.开辟内存空间;2.this指向内存空间;3.执行构造函数;4.返回this实例。但是箭头函数没有自己的this,它的this其实是继承了父作用域中的this,所以箭头函数不能作为构造函数使用。
const fn1 = function () { }
let f1 = new fn1()
const fn2 = () => { }
let f2=new fn2() // Uncaught TypeError: fn2 is not a constructor
5、原型
箭头函数没有原型,原型是undefined
const fn1 = function () { }
console.log(fn1.prototype);
const fn2 = () => { }
console.log(fn2.prototype);//undefined