本质上
- 是一个函数，是function
- 是一个被编译层加工过的函数
- 用 babel 编译一下箭头函数看看，如下
//es6
const a = ()=>{ console.log(this) };
const b = ()=>{ console.log(arguments) }
function aaa(){
const c = ()=>{ console.log(this) };
c();
}
aaa();
function bbb(){
const c = ()=>{ console.log(arguments) };
c();
}
bbb()
//编译后
var a = function a() {
console.log(undefined);
};
var _arguments = arguments;
var b = function b() {
console.log(_arguments);
};
function aaa() {
var _this = this;
var c = function c() {
console.log(_this);
};
c();
}
aaa();
function bbb() {
var _arguments2 = arguments;
var c = function c() {
console.log(_arguments2);
};
c();
}
bbb();
特性解密
- 内部没有 this，也没有 arguments
==this==
- 单独调用时，内部没有 this，因为在编译时被替换成了 undefined
- 但是，如果其外层存在 this（一个普通函数），那么编译时会将外层的 this 传入箭头函数内部，使其“具有了” this
==arguments==
- 其内部的 arguments 和 this 的表现略有不同。不管是否单独调用箭头函数，arguments 都来自于外部传入，使其“具有了” arguments
==柯里化==
- 实际上这种调用方式，就是柯里化一个函数的一种实现方式（或者语法糖)
//es6
const sum = num1 => num2 => num3 => num1 + num2 + num3;
//编译后
var sum = function sum(num1) {
return function (num2) {
return function (num3) {
return num1 + num2 + num3;
};
};
};
不适合用箭头函数的情形
- 在对象上定义函数
- 在原型上定义函数
- 动态上下文中的回调函数，比如 dom 点击事件回调
- 太过复杂的函数
相关文章
箭头函数没有绑定this
