这也是一道高频率的面试题，但也不算八股文吧，在开发中对我们写代码也是有帮助的
箭头函数的定义
箭头函数表达式的语法比函数表达式更简洁，并且没有自己的
this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
ES5中的函数存在什么问题
- 在ES5中函数和构造函数的界限不清晰，一般我们约定大驼峰为构造函数 (在Es2015中引入
Class 类的概念解决这个问题,本篇不做介绍) - 在Es5函数上下文中的
this指向是在运行时决定的，
ES2015中的引入箭头函数的目的
- 简化了声明函数的代码量
var elements = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
elements.map(function(element) {
return element.length;
}); // 返回数组：[8, 6, 7, 9]
// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {
return element.length;
}); // [8, 6, 7, 9]
// 当箭头函数只有一个参数时，可以省略参数的圆括号
elements.map(element => {
return element.length;
}); // [8, 6, 7, 9]
// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // [8, 6, 7, 9]
// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构
// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，
// 可以替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
- 不会创建自己的
this，它只会从自己的作用域链的上一层继承 this。
function Person() {
// Person() 构造函数定义 `this`作为它自己的实例。
this.age = 0;
setInterval(function growUp() {
// 在非严格模式，growUp() 函数定义 `this`作为全局对象，
// 与在 Person() 构造函数中定义的 `this`并不相同。
this.age++;
}, 1000);
}
var p = new Person();
除了上述解决上述问题，它俩还有什么区别
- 通过 call、 apply 调用或者使用bind
由于 箭头函数没有自己的 this 指针，通过
call()或apply()方法调用一个函数时，只能传递参数他们的第一个参数会被忽略。
var adder = {
base : 1,
add : function(a) {
var f = v => v + this.base;
return f(a);
},
addThruCall: function(a) {
var f = v => v + this.base;
var b = {
base : 2
};
return f.call(b, a);
}
};
console.log(adder.add(1)); // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2
箭头函数不绑定Arguments 对象。因此，在本示例中，
arguments只是引用了封闭作用域内的 arguments：
在大多数情况下，使用剩余参数是相较使用
arguments对象的更好选择。
var arguments = [1, 2, 3];
var arr = () => arguments[0];
arr(); // 1
function foo(n) {
// f函数中的arguments是是对foo函数arguments的引用
var f = () => arguments[0] + n;
return f();
}
function foo2(n) {
var f = function () {
//f函数中的arguments是[],因为调用f时并没有传递参数
return arguments[0] + n
}
return f()
}
foo(1); // 2
foo(2); // 4
foo2(1); // NaN
foo2(2); // NaN
- 箭头函数不能用作构造器，和
new一起用会抛出错误。
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor
- 箭头函数没有原型
var Foo = () => {};
console.log(Foo.prototype); // undefined
-
yield关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。 -
箭头函数中没
new.target。
使用箭头函数作为方法需要慎重考虑
箭头函数表达式对非方法函数是最合适的。让我们看看当我们试着把它们作为方法时发生了什么。
'use strict';
var obj = {
i: 10,
b: () => console.log(this.i, this),
c: function() {
console.log( this.i, this)
}
}
obj.b();
// undefined, Window{...}
obj.c();
// 10, Object {...}
'use strict';
var obj = {
a: 10
};
Object.defineProperty(obj, "b", {
get: () => {
console.log(this.a, typeof this.a, this);
return this.a+10;
// 代表全局对象 'Window', 因此 'this.a' 返回 'undefined'
}
});
obj.b; // undefined "undefined" Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
这就是我对箭头函数的一点整理总结，如果有问题，或者有缺失的，路过的大佬们请指正
