普通函数和箭头函数

普通函数和箭头函数

写在前面

函数（Function）是 JavaScript 里的‘一等公民’。是由称为函数体的一系列语句组成。能够当作入参，出参（返回值）使用。和对象同样，有本身的属性和方法。区别之处在于能够被调用。数据类型是 function（用 typeof 判断），用 Object.prototype.toString.call() 判断是 [object Function]。若是没有使用 retrun 语句，则默认返回 undefined。反之则函数必须使用 return 语句来指定一个要返回的值。(使用 new 关键字调用一个构造函数除外，再也不是实例化一个对象)。函数执行时，this 关键字并不会指向正在运行的函数自己，而是指向调用该函数的对象。
函数表达式不会提高，所以在使用以前必须先声明。和用 var 声明变量不同。

产生缘由

箭头函数的产生缘由就是在于 this 关键字指向问题。它很容易让人产生疑惑，尤为是当函数调用层级比较多的时候。和传统函数定义相比，语法也相对简洁。而且没有本身的this，arguments，super或 new.target。这些函数表达式更适用于那些原本须要匿名函数的地方，而且它们不能用做构造函数。箭头函数 this 指向的固定化，并非由于函数内部作了处理，而是由于箭头函数在建立的时候根本就没有本身的 this。

使用箭头函数须要注意的点

1，函数体内的 this 对象，是定义时所在对象，而不是调用该函数的对象。
2，正由于本身自己没有 this 对象，所以不能够用做构造函数，不能用 call()，apply()，bind()这些方法去改变 this 的指向。
3，不绑定 arguments 对象，能够使用 rest 参数来解决。
4，严格模式（use strict）中，指定的与 this 相关的规则都将被忽略。

var aaa = () => {
    'use strict';
    console.log(this);
    // window
}

var bbb = function() {
    'use strict';
    console.log(this);
    // undefined
}

5，不能使用 new 操做符，不然会报错

var Func = () => {};
var func = new Func();
// TypeError: Func is not a constructor

6，没有 prototype 属性

var Func = () => {};
console.log(Func.prototype);
// undefined

7，不能用做生成器。 yield 关键字一般不能在箭头函数中使用（除非是嵌套在容许使用的函数内）。
8，箭头函数的简写，能够直接省略 return，在块体中，必须使用明确的 return 语句。若是须要返回对象字面量的话，记得用圆括号包起来。

var func = () => ({num: 1});

写在后面

抛一个大佬留下的问题，有箭头函数的 IIEF:

(() => {
console.log('执行看看');
// 执行看看
})();

这个是能够的，可是下面的写法就会报错

(() => {
console.log('执行看看');
// Uncaught SyntaxError: Unexpected token (
}());

有知道缘由的小伙伴吗？

---

2018-07-18
补充一下几点：
1，在对象字面量上定义方法，会出现问题
以下代码执行：

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  },
  d() {
    console.log( this.i, this)  
  }
}
obj.b(); 
// undefined Window
obj.c();
// 10 obj对象
obj.d(); 
// 10 obj对象

obj.b 使用箭头函数来定义，可是调用 obj.b() 时出现了异常。由于当执行b的时候上下文仍然是window，这是由于箭头函数已经绑定了window作为上下文。
解决办法就是不要在对象的方法上使用箭头函数短语法，这样this关键字会在调用时决定，而不是早早绑定在闭合的上下文中。如 obj.d()

一样的规则也适用于给对象 prototype原型上定义方法，如

function Obj(name) {
  this.objName = name;  
}
Obj.prototype.getObjName = () => {
    console.log(this === window);
    // true
    return this.objName;
}

var obj = new Obj('小红');
obj.getObjName(); 
// undefined

2，动态上下文中的回调函数
this是js中很是强大的特色，他让函数能够根据其调用方式动态的改变上下文，而后箭头函数直接在声明时就绑定了this对象，因此再也不是动态的。

在客户端，在dom元素上绑定事件监听函数是很是广泛的行为，在dom事件被触发时，回调函数中的this指向该dom,可当咱们使用箭头函数时：

button.addEventListener('click', () => {  
    console.log(this === window); // => true
    this.innerHTML = 'Clicked button';
});

由于这个回调的箭头函数是在全局上下文中被定义的，因此他的this是window。因此当this是由目标对象决定时，咱们应该使用函数表达式：

button.addEventListener('click', function() {  
    console.log(this === button); // => true
    this.innerHTML = 'Clicked button';
});

以上补充的摘自：翻译 | ES6 箭头函数使用禁忌