浅谈ES6中箭头函数与普通函数的区别

// 箭头函数
let fun1 = (name) => {
    return `Hello ${name} !`; 
};
fun1('我是箭头函数'); //Hello 我是箭头函数 !"
// 箭头函数只有一个参数，可以省去参数括号()
let fun2 = name => {
    return `Hello ${name} !`; 
};
fun2('我是箭头函数'); //Hello 我是箭头函数 !"
// 箭头函数如果函数体只有一句代码，可以省去函数体的大括号{ }
let fun3 = name => `Hello ${name} !`;
fun3('我是箭头函数'); //Hello 我是箭头函数 !"
// 普通函数
let fun4 = function (name) {
    return `Hello ${name} !`;   // 函数体
};
fun4('我是普通函数'); //Hello 我是普通函数 !"

var name = 'Global';
function fun1() {
    //返回一个普通函数
     return function () {
          console.log(this.name);
     }
}
function fun2() {
    //返回一个箭头函数
     return () => {
          console.log(this.name);
     }
}
fun1().call({name: 'Obj'});     // 'Obj'
fun2().call({name: 'Obj'});     // 'Global'

var name = 'Global';
var obj = {
  name: 'Obj',
  fun1: function(){
    console.log(this.name);
  },
  fun2: () => {
    console.log(this.name);
  }
};
obj.fun1();    // 'Obj'
obj.fun2();    // 'Global'

var name = 'Global';
// 箭头函数定义在全局作用域
let fun = () => {
    console.log(this.name)
};
fun();     // 'Global'
// this的指向不会改变，永远指向Window对象
fun.call({name: 'Obj'});     // 'Global'
fun.apply({name: 'Obj'});    // 'Global'
fun.bind({name: 'Obj'})();   // 'Global'

var name = 'Global';
function fun() {
    //返回一个箭头函数
     return () => {
          console.log(this.name);
     }
}
fun()() // 'Global'
fun.call({ name: 'Obj' })() // Obj

var Foo = () => {};
var foo = new Foo();  //Foo is not a constructor

let Foo = () => {
    console.log('Hello World !')
};
console.log(Foo.prototype); // undefined

// 普通函数
function fun1() { 
   console.log(arguments) 
}
//箭头函数
let fun2 = () => {
   console.log(arguments) 
};
fun1(1,2); // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
fun2(1,2); // arguments is not defined

let fun = (...args) => {
   console.log(args) 
};
fun(1,2); // [1, 2]

let fun = ()
           => 1; // SyntaxError: expected expression, got '=>'

let fun = () => { foo: 1 };
fun(); // undefined
let fun1 = () => ({ foo: 1 });
fun1(); // {foo: 1}
let fun2 = () => { foo: function() {} };   
// SyntaxError: function statement requires a name
let fun3 = () => ({ foo: function() {} });  

let fun = false || function() {}; // ok
let fun1 = false || () => {};   // Malformed arrow function parameter list
let fun2 = false || (() => {});    // ok