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

今天和大家说说es6的箭头函数和普通函数的区别，这也是面试当中常问的问题。



1.es5的function函数在运行时绑定到this函数，箭头函数在定义时初始化绑定this。

let obj = {
    a: "hello",
    f: () => {
        console.log(this.a); // "undefined"
        console.log(this); // Window
    }
}
let obj = {
    a: "hello",
    f: function () {
        console.log(this.a); // "hello"
        console.log(this); // obj
    }
}
obj.f();

2.由于this已经被绑定在词法层面，通过call（）或apply（）方法调用函数只是传入参数，对此没有影响。

let obj = {
    value: "hello",
    add: function(str) {
        console.log(this); //obj
        var f = (v) => v + this.value;
        return f(str);
    },
    addCall: function(str) {
        console.log(this); //obj
        var f = function (v) {
            return v + this.value;
        };
        var newObj = {value: "good"};
        return f.call(newObj, str);
    },
    addArrowCall: function(str) {
        console.log(this); //obj
        var f = (v) => v + this.value;
        var newObj = {value: "good"};
        return f.call(newObj, str);
    }
}
console.log(obj.add("Ynqc ")); // Ynqc hello
console.log(obj.addCall("Ynqc "));  // Ynqc good
console.log(obj.addArrowCall("Ynqc "));  // Ynqc hello

3.箭头函数不绑定arguments

var f = (...args) => {
   //console.log(arguments); //Uncaught ReferenceError
   console.log(args); //["hello"]
}
function f() {
   console.log(arguments); //Arguments ["hello", callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
f("hello");

4.箭头函数不能用作构造函数，和 new 一起用就会抛出错误

var f = () => {}
console.log(newF); //Uncaught TypeError: f is not a constructor
function f() {}
var newF = new f();
console.log(newF); // f()

5.箭头函数没有原型属性。

var arrowF = () => {}
console.log(arrowF.prototype) //undefined
function f() {}
console.log(f.prototype) //{constructor: ƒ}

6.如果箭头函数返回一个对象，则：

var arrowF = () => ({
   ynqc: "hello"
});
function f() {
   return {
       ynqc: "hello"
   }
}
console.log(f()); //{ynqc: "hello"}