前端面试：es6的箭头函数与普通函数的区别

普通函数：function( ) { }
箭头函数：( ) => { }

我们知道圆括号一般是用来放参数的，花括号一般用来放函数的主体，箭头函数也是类似的用法。

简单对比一下两个函数：

箭头函数：

let xx = () => '我是xx1';
console.log( xx() );   //我是xx1

普通函数：

function xx2(){
    return '我是xx2';
}
console.log( xx2() );   //我是xx2

es6箭头函数的定义是，允许使用"箭头"( => )来定义函数。

箭头函数中，this指向的是它的父级函数的作用域。
普通函数中的this，指向调用它的那个对象，或者如果是构造函数的话，指向创建的对象实例。

let obj = {
    name:'小明',
    age:'18',
    sayName(){
        setTimeout(()=>{
            console.log(this); 
            // {name: '小明', age: '18', sayName。。。 }
        },500)

        setTimeout(function(){
            console.log(this);  
            // Window {window:。。。}
        },500)
    }
}
obj.sayName()

来看箭头函数不能作为构造函数使用的情况，也不能通过new关键字调用：

let fn = () => '你看会不会报错';
new fn();   //Uncaught TypeError: fn is not a constructor

报错说明它没有构造函数，this指向的不是自己，是当前所在对象的父级window。

let fn = () => {
    console.log(this);
}
fn();

来看它的构造器是什么:

let fn = () => {
    console.log(this.constructor);
}
fn();   // ƒ Window() { [native code] }
指向的是window的构造函数，与我们要new的函数没有关系，所以上面会报错：fn is not a constructor

箭头函数也没有prototype属性：

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

箭头函数就是一种简化的语法，相当于return语句，它是匿名函数的新写法，不需要function关键字，参数和函数体之间用( => )连接。