摘要：普通函数和箭头函数写在前面函数是里的一等公民。在客户端，在元素上绑定事件监听函数是非常普遍的行为，在事件被触发时，回调函数中的指向该可当我们使用箭头函数时因为这个回调的箭头函数是在全局上下文中被定义的，所以他的是。
普通函数和箭头函数 写在前面
函数（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 箭头函数使用禁忌
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95932.html
摘要：第二种情况是箭头函数的如果指向普通函数它的继承于该普通函数。箭头函数的指向全局，使用会报未声明的错误。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭头函数是ES6的API，相信很多人都知道，因为其语法上相对于普通函数更简洁，深受大家的喜爱。就是这种我们日常开发中一直在使用的API...
摘要：基本用法在中允许使用来定义函数，如下就等同于从上面可以看出，在箭头左侧的是代表参数，若参数只有一个，可以省略，箭头右侧的表示函数代码块，若代码块里面是个返回值，则可以省略不写无参数情况若箭头函数不需要参数，则左侧用代替，如下无参数情况无参数 基本用法 在ES6中允许使用 => 来定义函数，如下： var f = a => a; console.log(f(1)); //1 就...
摘要：也就是说箭头函数的的值不再根据调用时上下文确定，而是像普通变量那样根据定义时的作用域链进行查找。箭头函数中的依然要根据定义时的作用域链进行查找。知乎这篇文章对箭头函数的一些不适合的场景进行了总结，可以作为参考。 es6 - 箭头函数 哇，箭头函数...，听起来好NB，但是如果你知道它是因为使用了=>这样类似箭头的符号 ，所以才叫箭头函数。 瞬间感觉：呵，这名字起的...。 es6增加了...
摘要：箭头函数是前端面试环节的一个高频考点，一般会问箭头函数的是指如何用普通函数实现一个箭头函数箭头函数有哪些优点带着这些问题，小编带各位上路吧箭头函数与普通函数得区别普通函数函数作为全局函数被调用时，指向全局对象函数作为对象中的方法被调用时，指 箭头函数是前端面试环节的一个高频考点，一般会问 1、箭头函数的this是指？2、如何用普通函数实现一个箭头函数3、箭头函数有哪些优点 带着这些问题...
摘要：但是因为箭头函数没有自己的，它的其实是继承了外层执行环境中的，且指向永远不会随在哪里调用被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用调用时会报错报错箭头函数没有自己的箭头函数没有自己的对象。 这篇文章我们来了解一下ES6中的箭头函数。首先会介绍一下箭头函数的基本语法，因为基本语法比较好理解，我们用示例做简单介绍即可。之后，我们重点来讨论一下...
阅读 1980·2021-09-29 09:35
阅读 1926·2019-08-30 14:15
阅读 2954·2019-08-30 10:56
阅读 932·2019-08-29 16:59
阅读 541·2019-08-29 14:04
阅读 1278·2019-08-29 12:30
阅读 1002·2019-08-28 18:19
阅读 450·2019-08-26 11:51
