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

1.箭头函数没有prototype(原型)

let a = () =>{};
console.log(a.prototype); // undefined

a.__proto__===Function.prototype;// true

2.箭头函数的this指向它被创建时的上下文

const obj = {
    id: 22,
    print: () => {
        console.log(this.id);
    },
    print2: function(){
        console.log(this.id);
    },
    print3: function () {
        setTimeout(function(){
            console.log(this.id);
        }, 500);
    },
    print4: function () {
        setTimeout(() => {
            console.log(this.id);
        }, 500);
    }
}

obj.print(); // undefined
obj.print2(); // 22
obj.print3(); // undefined
obj.print4(); // 22

3.在构造函数里使用箭头函数的主要优点是它的 this 只与箭头函数创建时的 this 保持一致，并且不会修改。所以，当用构造函数去创建一个新的对象的时候，箭头函数的 this 总是指向新创建的对象。正常函数的 this 是可以在执行过程中被改变的，而箭头函数的 this 则会一直保持一致。所以在使用箭头函数的时候，你就不需要担心它的上下文被改变了。

const Person = function (firstName) {
    this.firstName = firstName;
    this.sayName1 = function () { console.log(this.firstName); };
    this.sayName2 = () => { console.log(this.firstName); };
};

const john = new Person('John');
const dave = new Person('Dave');

john.sayName1(); // John
john.sayName2(); // John

// 普通函数的 this 可以被修改，而箭头函数则不会
john.sayName1.call(dave); // Dave (因为 "this" 现在指向了 dave 对象)
john.sayName2.call(dave); // John

john.sayName1.apply(dave); // Dave (因为 "this" 现在指向了 dave 对象)
john.sayName2.apply(dave); // John

john.sayName1.bind(dave)(); // Dave (因为 "this" 现在指向了 dave 对象)
john.sayName2.bind(dave)(); // John

var sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined (因为 "this" 现在指向了 Window 对象)

var sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John

4.如果箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)

'use strict'

const obj = {
    print: () => {
        console.log(this);
    }
}
 obj.print(); // Window

5.更简洁的语法

箭头函数

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

相当于普通函数

function a(){
  return 1;
}

6.不能使用new

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

var B = ()=>{
  value:1;
}

var b = new B(); //TypeError: B is not a constructor

7.不绑定arguments，用rest参数…解决

/*常规函数使用arguments*/
function test1(a){
  console.log(arguments);   //1
}
/*箭头函数不能使用arguments*/
const test2 = (a)=>{console.log(arguments)}  //ReferenceError: arguments is not defined
/*箭头函数使用reset参数...解决*/
let test3=(...a)=>{console.log(a)} //22

test1(1);
test2(2);
test3(11,22,33);

箭头函数的注意事项：

1.不能简单返回对象字面量

如果要返回对象时需要用小括号包起来，因为大括号被占用解释为代码块了，正确写法

var func1 = () => { foo: 1 };  // undefined 想返回一个对象，大括号被占用解释为代码块，执行后返回undefined
var func2 = () => ({ foo: 1 });  // { foo: 1 }

2.箭头函数不能当做Generator函数，不能使用yield关键字

3.箭头函数不能换行

let a = ()
          =>1; //SyntaxError: Unexpected token =>