学会使用ES6中的箭头函数
来源:互联网 发布:陈奕迅 爱情转移 知乎 编辑:程序博客网 时间:2024/05/16 05:53
原文链接
箭头函数表达式的语法比函数表达式短,并且不绑定自己的 this,arguments,super或 new.target。
此外,箭头函数最好在非方法函数中使用,且不能用作构造函数。
语法
基本语法
(param1, param2, …, paramN) => { statements }(param1, param2, …, paramN) => expression // 等价于: => { return expression; } // 如果只有一个参数,圆括号是可选的:(singleParam) => { statements }singleParam => { statements }// 无参数或者多参数的箭头函数需要使用圆括号或者下划线:() => { statements } _ => { statements }
来看看和ES5的对比吧
// ES5var selected = allJobs.filter(function (job) { return job.isSelected();});// ES6var selected = allJobs.filter(job => job.isSelected());
这是只有一个参数的情况,如果要写一个接受多重参数(也可能没有参数,或者是不定参数、默认参数、参数解构)的函数,你需要用小括号包裹参数list。
// ES5var total = values.reduce(function (a, b) { return a + b;}, 0);// ES6var total = values.reduce((a, b) => a + b, 0);
高级语法
并且支持 Rest parameters 和 default parameters以及参数列表中的解构赋值
// 支持 Rest parameters 和 default parameters:(param1, param2, ...rest) => { statements }(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }// 支持参数列表中的解构赋值var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;f(); // 6
只返回一个对象字面量,没有其他语句时, 应当用圆括号将其包起来:
params => ({foo: bar})
使用箭头函数需要注意的地方
this值
普通function函数和箭头函数的行为有一个微妙的区别,箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域。
在没有箭头函数的ES5中
首先看这段代码:
function Person() { // 构造函数 Person() 定义的 `this` 就是新实例对象自己 this.age = 0; setInterval(function growUp() { // 在非严格模式下,growUp() 函数定义了其内部的 `this`为全局对象, 不同于构造函数Person()的定义的 `this` this.age++; }, 1000);}var p = new Person();
在 ES5 中,通常把this的值赋给一个变量,然后将该变量放到闭包中来解决:
function Person() { var self = this; // 也有人选择使用 `that` 而非 `self`. // 只要保证一致就好. self.age = 0; setInterval(function growUp() { // 回调里面的 `self` 变量就指向了期望的那个对象了 self.age++; }, 1000);}
当然,还可以使用 bind ,把期望的 this 值传递给函数。
在ES6中
箭头函数会在外围作用域获得this 值,因此下面的代码就完成了这个问题。
function Person(){ this.age = 0; setInterval(() => { this.age++; // this正确地指向了person对象 }, 1000);}var p = new Person();
考虑到 this 是词法层面上的,严格模式中与 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); }, addAnotherCall: function(a) { var f = function (v) { return v + this.base; }; var b = { base : 2 }; return f.call(b,a); } }; console.log(adder.add(1)); console.log(adder.addThruCall(1)); console.log(adder.addAnotherCall(1));
由于 this 已经在词法层面完成了绑定,通过 call() 或 apply() 方法调用一个函数时,只是传入了参数而已,对 this 并没有什么影响,所以会输出如下结果:
223
不支持arguments对象
箭头函数不会在其内部暴露出arguments :arguments.length, arguments[0], arguments[1] 等等,都不会指向箭头函数的 arguments,而是指向了箭头函数所在作用域的一个名为 arguments 的值,当然是如果有的情况,否则,就是 undefined。
var arguments = 40;var arr = () => arguments;arr(); // 40 function foo() { var f = (i) => arguments[0]+i; // foo函数的间接参数绑定 return f(2);}foo(1); // 3
不过rest参数可以给出一个解决方案:
function foo() { var f = (...args) => args[0]; return f(2); }foo(1); // 2
不能像方法一样使用箭头函数
箭头函数表达式对非方法函数是最合适的,然而不能把它们作为方法:
var obj = { i: 10, b: () => console.log(this.i, this), c: function() { console.log( this.i, this) }}obj.b(); // undefined,Windowobj.c(); // 10, Object//箭头函数中的this指向了Window
不能使用 new 操作符
箭头函数不能才当成构造函数,因为和 new 一起用就会抛出错误
var Foo = () => {};var foo = new Foo(); // TypeError: Foo is not a constructor
无原型属性
箭头函数没有原型属性。
var Foo = () => {};console.log(Foo.prototype); // undefined
返回文字表达式
用 params => {object:literal} 这种简单的语法返回一个文字表达式是不行的:
var func = () => { foo: 1 };// undefined!var func = () => { foo: function() {} };// SyntaxError: function statement requires a name(未定义函数语句)// 所以,记得用圆括号把文字表达式包起来:var func = () => ({ foo: 1 });
参考文档
- 学会使用ES6中的箭头函数
- es6-箭头函数中的this使用
- ES6 中的箭头函数
- ES6中的箭头函数
- ES6中的箭头函数
- ES6 中的箭头函数
- 尝试 ES6 中的箭头函数
- ES6中的箭头函数 =>
- ES6 箭头函数中的 this
- ES6之箭头函数使用
- es6箭头函数 使用场景
- 深入理解ES6箭头函数中的this
- ES6 箭头函数中的 this?(临时性保存)
- ES6箭头函数中的this绑定问题
- ES6中箭头函数的使用
- 什么时候不该使用es6箭头函数
- 什么时候不该使用es6箭头函数
- ES6中箭头函数的使用
- 读取excel
- A Discriminatively Trained, Multiscale, Deformable Part Model(判别训练的多尺度可变形部件模型——中文翻译版)
- UVA 11538 Chess Queen(数学)
- Kali更新源&dpkg:处理软件包dradis (--configure)时出错
- iOS中动态密码(倒计时按钮)按钮Block封装,选取器(UIPickerView)的Block封装,日期选取器(UIDatePicker)的Block封装
- 学会使用ES6中的箭头函数
- 磁疗是真的吗?恒定磁场对骨折愈合的影响
- python可变参数练习
- JavaWeb学习十二(自定义标签)
- 基于VS与IIS程序调试,银行支付接口调试操作
- html页面中止加载
- 自定义View实战--实现一个清新美观的加载按钮
- GCD
- Unity属性