撤底理解es6中的箭头函数

本质上

是一个函数，是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

撤底理解es6中的箭头函数相关推荐

JS ES6中的箭头函数（Arrow Functions）使用
转载这篇ES6的箭头函数方便自己查阅. ES6可以使用"箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法基础语法 (参数1, 参数2, -, ...
ES6函数相关包含箭头函数
转载地址:https://es6.ruanyifeng.com/?search=%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0&x=0&y=0#docs/fu ...
es6 中的箭头符号
es6中的箭头符号"=>"用于函数的简写,具体例子如下: 情况一: var test0 = function(){return 1; } // 可以写成 var test0 ...
理解javascript中的回调函数(callback)【转】
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...
php copy array,ES6中Array.copyWithin()函数用法的详解
ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去.下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的 ...
在React的render方法中使用箭头函数
在 React 组件中绑定点击事件通常的做法使用 class 属性. class Foo extends Component {handleClick = () => {console.log( ...
正确理解scipy中的coo_matrix函数
正确理解scipy中的coo_matrix函数 1. 构造一个空矩阵 2. 使用ijv(triplet)格式构造一个矩阵 3. 用重复的索引构造矩阵 1. 构造一个空矩阵这种用法比较简单,直接生成一 ...
理解javascript中的回调函数(callback)
理解javascript中的回调函数(callback) 在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Obje ...
Vue相关面试问答TOP2（能不能在method中使⽤箭头函数、如何定义组件的data、v-if 和 v-show的区别、computed、watch、methods的区别、axios的特点....）
1.能不能在method中使⽤箭头函数? 理论上可以使⽤,但是我不会使⽤,因为箭头函数中的this的指向与⼀般函数不同⼀般函数执⾏调⽤它的对象 ...

撤底理解es6中的箭头函数

本质上

特性解密

不适合用箭头函数的情形

撤底理解es6中的箭头函数相关推荐

最新文章

热门文章