JavaScript ES6 Arrow Functions（箭头函数）

 

1. 介绍

第一眼看到ES6新增加的 arrow function 时，感觉非常像 lambda 表达式。

那么arrow function是干什么的呢？可以看作为匿名函数的简写方式。

如：

?

1 2 3

var addition = function(a, b) { return a + b }; // 等同 var addition = (a, b) => { return a + b };

 

2. 语法

arrow functions(箭头函数)主要有以下4种语法：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// 1)基本 (param1, param2, paramN) => { expression } (param1, param2, paramN) => { return expression }   // 2)只有一个参数时，括号是可选的 (singleParam) => { expression } singleParam => { expression }   // 3)不带参数时，在参数区域带有括号 () => { expression }   // 4)函数主体若不带{}大括号，表示直接返回函数主体 (param1, param2, paramN) => { return expression } (param1, param2, paramN) => expression // 等同于上面

 

3. 特性

3.1 没有自身this

arrow function没有自身的this，即在arrow function内部使用this时，此this指向创建此函数时的外部this。

场景：在Web开发时都会用到ajax的回调，回调函数内的this常常用外部创建的self、that、_this等变量暂存，而当回调函数采用arrow function方式时就可以直接使用外部的this。

示例：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var ajax = function(url, successCallback) {     // TODO ajax     successCallback && successCallback(); };   var productBLL = {     productName: '瓜子',     query: function() {         // arrow function         ajax('query', () => {             console.log(this); // => productBLL             console.log(this.productName); // => 瓜子(productBLL.productName)         });     } };   productBLL.query();

 

3.2  call()、apply() 调用无法改变this

就像上面讲的arrow function没有自身的this，当用call()或apply() 调用箭头函数时无法改变函数主体内的this。

示例：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

// 普通函数 var sayHello = function(userName) {     console.log('hi ' + userName);     console.log(this); }; sayHello.call({ x: 1 }, 'polk'); // => this == { x: 1 }   // 箭头函数 var sayHello2 = (userName) => {     console.log('hi ' + userName);     console.log(this); }; sayHello2.call({ y: 2 }, 'polk'); // => this == window

 

3.3 没有arguments

使用arrow function创建的函数，自身是没有arguments成员。

?

1 2 3 4

var sayHello = (userName) => {     console.log('hi ' + userName);     console.log(arguments); // => Uncaught ReferenceError: arguments is not defined };

 

3.4 arrow function作为某个对象的方法成员时，this指向非此对象

当某个对象的方法为arrow function时，那么此方法内的this指向并非是此对象。

示例：

?

1 2 3 4 5 6 7 8 9 10 11 12

var productBLL = {     productName: '瓜子',     sayName: function() {         console.log(this.productName);     },     sayName2: () => {         console.log(this.productName);     } };   productBLL.sayName(); // => 瓜子 productBLL.sayName2(); // => undefined, this == window

　　

4.扩展阅读

arrow function MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

 

End

Web开发之路系列文章

菜单加载中...