1. 介绍

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

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

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

2. 语法

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

// 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。

示例

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。

示例

// 普通函数
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成员。

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

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

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

示例:

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
菜单加载中...

JavaScript ES6 Arrow Functions(箭头函数)的更多相关文章

  1. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  2. arrow functions 箭头函数

    ES6里新增加的,与普通方法不同的地方 1.this 的对象在定义函数的时候确定了,而不是在使用的时候才决定 2.不可以使用 new  ,也就不能当构造函数 3.this 的值一旦确定无法修改     ...

  3. JavaScript:学习笔记(5)——箭头函数=>以及实践

    JavaScript:学习笔记(5)——箭头函数=>以及实践 ES6标准新增了一种新的函数:Arrow Function(箭头函数).本文参考的链接如下: MDN箭头函数:https://dev ...

  4. [js高手之路] es6系列教程 - 箭头函数详解

    箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...

  5. ES6学习之箭头函数

    ES6学习笔记--箭头函数 箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结. 箭头函数长这个样子: let fn = a => a++; // fn 是函数名, a= ...

  6. JS ES6中的箭头函数(Arrow Functions)使用

    转载这篇ES6的箭头函数方便自己查阅. ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 基础语法 (参数1, 参数2, …, 参数N) => ...

  7. JavaScript初学者必看“箭头函数”

    译者按: 箭头函数看上去只是语法的变动,其实也影响了this的作用域. 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 为了保证可 ...

  8. es6学习笔记--箭头函数

    基本用法 ES6允许使用“箭头”(=>)定义函数. var f = v => v; 上面的箭头函数等同于: var f = function(v) { return v; }; 如果箭头函 ...

  9. 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

随机推荐

  1. 【CSS初识】

    一.CSS是什么? CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距.高度.宽度.背景图像.高级定位等方面. HTML用于结构化内容:CSS用于格式化结构化的内容. ...

  2. linux centos下安装dokuwiki

    首先先大致介绍一下wiki: DokuWiki是一个开源wiki引擎程序,运行于PHP环境下.Doku Wiki 程序小巧而功能强大.灵活,适合中小团队和个人网站知识库的管理. DokuWiki可以与 ...

  3. ASP.NET MVC 解决区域和全局控制器同名的问题

    话不多少 直接上代码 通常我们以为上边的是解决控制同名问题,是解决了一点,但是又出了以下问题,默认请求的不是项目默认的控制器而是该区域的控制器,在我之前开发的项目中,默认指向的是区域下的home控制器 ...

  4. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  5. 关于js中的json对象,json串,数组之间相互转换

    将json对象转换成string var loginUser = {username: username, password: password}//方式一 localStorage.setItem( ...

  6. OGG的孩子-有损音频编码opus

    Opus是一个有损声音编码的格式,由Xiph.Org基金会开发,之后由互联网工程任务组(IETF)进行标准化,目标用希望用单一格式包含声音和语音, 取代Speex和Vorbis,且适用于网络上低延迟的 ...

  7. 【转】Java中super和this的几种用法与区别

    1. 子类的构造函数如果要引用super的话,必须把super放在函数的首位.   class Base {   Base() {   System.out.println("Base&qu ...

  8. POJ1163-The Triangle-动态规划

    The Triangle Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 50122   Accepted: 30285 De ...

  9. poj_3070Fibonacci(矩阵快速幂)

    Fibonacci Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12732   Accepted: 9060 Descri ...

  10. jsp的内置对象

    JSP内置对象即无需声明就可以直接使用的对象实例,在实际的开发过程中,比较常用的JSP对象有request,response,session,out和application等,笔者在本文章中将简单介绍 ...