前言

在es6中新增了箭头函数,后来在我们实际开发中经常用到,那么他相较于之前的函数有什么区别呢,下面通过简单的代码来了解。

普通函数

        // 普通函数
        function func() {
            return 100;
        }
        console.log(func());//执行函数

函数表达式

// 函数表达式
        const fun = function() {
            return 100;
        }
        console.log(fun());

将上述的函数表达式改写成箭头函数

//函数表达式改写成箭头函数
        const funa = () => 100;
        console.log(funa());

结论一箭头函数的语法

// 箭头函数语法
( )中定义参数,如果只有一个参数,可以不写括号,也就是
const fun = (item) => {return 100;}
//变成下面这样
const fun = item => {return 100;}
{ }中写函数体,也就是逻辑代码,如果函数体中只有返回值,可以不写return,也就是
const fun = item => {return 100;}
//变成下面这样
const fun = item => 100;

通过实例比较区别

(1)this指向的区别

let obj = {
           name:"泰戈尔",
           age: 24,
           sayName(){
               console.log(`我的名字叫${this.name}`);//es6写法
               console.log("我的名字叫" + this.name);//es6之前的写法
               setTimeout(function(){
                   console.log("我的名字叫" + this.name);//这里的this指向window。
               },500),
               setTimeout(()=>{
                   console.log("我的名字叫" + this.name);//这里的this指向外部的被定义的函数。
               },800)
            }
       }
       obj.sayName();


/*
箭头函数和普通函数的区别
1:this指向不同,
2:普通函数的this指向调用者。
2:箭头函数的this指向定义函数的地方
*/

(2)new关键字的区别

let a = () => { console.log(想用new)} 
a()

let fn = new a()
VM325:1 Uncaught TypeError: a is not a constructor
    at <anonymous>:1:10

箭头函数是匿名函数,不能作为构造函数,不能使用new。

(3)arguments参数的区别

function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]


let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined


let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

箭头函数不绑定arguments,取而代之用rest参数...解决

(4)原型属性的区别

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

箭头函数没有原型属性

总结

  1. 箭头函数的 this 永远指向其上下文的 this ,call()、apply()、bind()无法改变其this指向
  2. 普通函数的this指向调用它的那个对象
  3. 箭头函数无法使用new关键字
  4. 箭头函数没有原型属性
  5. 箭头函数不绑定arguments,取而代之用rest参数...
    同步地址: github
最后修改:2021 年 09 月 23 日 11 : 23 AM
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。