学会使用ES6中的箭头函数
2017-05-18 15:26
465 查看
原文链接
箭头函数表达式的语法比函数表达式短,并且不绑定自己的 this,arguments,super或 new.target。
此外,箭头函数最好在非方法函数中使用,且不能用作构造函数。
这是只有一个参数的情况,如果要写一个接受多重参数(也可能没有参数,或者是不定参数、默认参数、参数解构)的函数,你需要用小括号包裹参数list。
只返回一个对象字面量,没有其他语句时, 应当用圆括号将其包起来:
在没有箭头函数的ES5中
首先看这段代码:
在 ES5 中,通常把this的值赋给一个变量,然后将该变量放到闭包中来解决:
当然,还可以使用 bind ,把期望的 this 值传递给函数。
在ES6中
箭头函数会在外围作用域获得this 值,因此下面的代码就完成了这个问题。
考虑到 this 是词法层面上的,严格模式中与 this 相关的规则都将被忽略。
箭头函数和call()与apply()
看看下面的程序会输出什么样的结果:
由于 this 已经在词法层面完成了绑定,通过 call() 或 apply() 方法调用一个函数时,只是传入了参数而已,对 this 并没有什么影响,所以会输出如下结果:
不过rest参数可以给出一个解决方案:
参考文档
箭头函数表达式的语法比函数表达式短,并且不绑定自己的 this,arguments,super或 new.target。
此外,箭头函数最好在非方法函数中使用,且不能用作构造函数。
语法
基本语法
(param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression // 等价于: => { return expression; } // 如果只有一个参数,圆括号是可选的: (singleParam) => { statements } singleParam => { statements } // 无参数或者多参数的箭头函数需要使用圆括号或者下划线: () => { statements } _ => { statements }
来看看和ES5的对比吧
// ES5 var selected = allJobs.filter(function (job) { return job.isSelected(); }); // ES6 var selected = allJobs.filter(job => job.isSelected());
这是只有一个参数的情况,如果要写一个接受多重参数(也可能没有参数,或者是不定参数、默认参数、参数解构)的函数,你需要用小括号包裹参数list。
// ES5 var total = values.reduce(function (a, b) { return a + b; }, 0); // ES6 var 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 并没有什么影响,所以会输出如下结果:
2 2 3
不支持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,Window obj.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使用箭头函数注意点
- ECMAScript 6 学习系列课程 (ES6 箭头函数的使用)
- ES6之箭头函数使用
- ES6可以使用“箭头”(=>)定义函数
- es6箭头函数(=>)与展开特性运算符(...)的使用
- vue2.0使用ES6语法的箭头函数对this作用域的理解
- ES6中箭头函数的使用
- ES6中箭头函数的使用
- 什么时候不该使用es6箭头函数
- es6箭头函数 使用场景
- ES6中箭头函数的使用
- ES6中箭头函数的使用
- es6-箭头函数中的this使用
- ES6箭头函数
- ES6的"箭头"函数
- 解析vue data不可以使用箭头函数问题
- JS基础篇--[转]JS ES6中的箭头函数(Arrow Functions)使用
- 笔记:ES6新特性-函数的简写(箭头函数)
- 使用箭头函数的几个注意事项