箭头函数,通过 => 语法实现的函数简写形式,C#/JAVA8/CoffeeScript 中都有类似语法。与函数不同,箭头函数与其执行下文环境共享同一个 this。如果一个箭头函数出现在一个函数对象内部,它会与这个函数共享 arguments 变量。

箭头表达式用来声明匿名函数,消除传统匿名函数的this指针问题。

应用:

var myArray = [1, 2, 3, 4, 5];//挑出来双数
console.log(myArray.filter(value => value % 2 == 0));

优势:消除了this关键字的问题

function getStock(name: string) {
this.name = name;
setInterval(() => {
console.log("name is: "+this.name)
}, 1000);
} var stock = new getStock("IBM");//name is: IBM

1、函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象。

原理:this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正因为它没有this,所以也就不能用作构造函数。

例1:

function foo(){
setTimeout(()=>{
console.log("id:",this.id);
},100);
}
foo.call({id:42}); //id: 42

setTimout的参数是一个箭头函数,100毫秒后执行。如果是普通函数,执行时this应该指向全局对象,

但是箭头函数导致this总是指向函数所在的对象

例2:

var handler={
id:"123456",
init:function(){
document.addEventListener("click",event=>this.doSomething(event.type),false);
},
doSomething:function(type){
console.log("Handling "+type+" for "+this.id);
}
}
handler.init();//Handling click for 123456

例3:chrome可能还不支持,

function Timer(){
this.seconds=0;
setInterval(()=>this.seconds++,1000);
}
var timer=new Timer();
setTimeout(console.log(timer.seconds),3100);//

2、箭头函数没有this,没有arguments,没有super,没有new.target

例:箭头函数内部的arguments其实就是foo函数的arguments

    function foo(){
setTimeout(()=>{
console.log("args:",arguments);
},100);
}
foo(2,4,6,8);//args: [2, 4, 6, 8]

3、箭头函数不可以当作构造函数。也就是说,不可以使用new命令,否则会抛出一个错误。

4、箭头函数不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用rest参数代替。

5、箭头函数不可以用yield命令,因此箭头函数不能用作Generator函数。

其它例子

// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i); // Statement bodies
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v);
}); // Lexical this
var bob = {
_name: "Bob",
_friends: ['jim'],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f)); // Bob knows jim
}
};
bob.printFriends(); // Lexical arguments
function square() {
let example = () => {
let numbers = [];
for (let number of arguments) {
numbers.push(number * number);
} return numbers;
}; return example();
} square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]

More:

https://egghead.io/courses/learn-es6-ecmascript-2015

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/6950083.html有问题欢迎与我讨论,共同进步。

es6 箭头函数【箭头表达式】的更多相关文章

  1. es6 箭头函数(arrow function) 学习笔记

    箭头函数有两个好处. 1.他们比传统函数表达式简洁. const arr = [1, 2, 3]; const squares = arr.map(x => x * x); // 传统函数表达式 ...

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

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

  3. 02、Java的lambda表达式和JavaScript的箭头函数

    前言 在JDK8和ES6的语言发展中,在Java的lambda表达式和JavaScript的箭头函数这两者有着千丝万缕的联系:本次试图通过这篇文章弄懂上面的两个"语法糖". 简介 ...

  4. ES6 — 箭头函数

    一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...

  5. 关于es6箭头函数

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

  6. ES6学习之箭头函数

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

  7. JavaScript的函数申明、函数表达式、箭头函数

    JavaScript中的函数可以通过几种方式创建,如下. // 函数声明 function getName() { return 'Michael' } // 函数表达式 const getName ...

  8. ES6 -箭头函数 ,对象的函数解构

    ES6 -箭头函数: //es6 中的箭头函数和扩展 //es5的写法 // function add(a,b){ // return a + b; // } // add(1,2); //3 fun ...

  9. ES6深入浅出-2 新版函数:箭头函数 2 视频-1.视频 箭头函数

    ES3里面的写法 匿名函数是用不了的 还是需要给他赋值 选中的这一部分叫做匿名函数 等于号叫做赋值 let xxx叫做声明 所以说这个地方是三个语法,首先声明一个匿名函数,然后声明一个xxx变量,最后 ...

  10. 石川es6课程---4、箭头函数

    石川es6课程---4.箭头函数 一.总结 一句话总结: 相当于函数的简写,类似python lambda 函数,先了解即可 let show1 = function () { console.log ...

随机推荐

  1. Linux将公网ip映射到局域网ip

    测试环境如下: monitor: msc1:公网IP:103.6.164.128 eth0 内网IP:192.168.0.57 eth0内网IP:192.168.0.16 eth1 通过访问monit ...

  2. hdu 4825 && acdream 1063 01字典树异或问题

    题意: 给一个集合,多次询问,每次给一个k,问你集合和k异或结果最大的哪个 题解: 经典的01字典树问题,学习一哈. 把一个数字看成32位的01串,然后查找异或的时候不断的沿着^为1的路向下走即可 # ...

  3. mysql5.7 pxc

    pxc优点总结:可以达到时时同步,无延迟现象发生完全兼容MySQL对于集群中新节点的加入,维护起来很简单数据的强一致性不足之处总结:只支持Innodb存储引擎存在多节点update更新问题,也就是写放 ...

  4. JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法

    ### 之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制,但是种只支持IE的. 就找了jq的一个插件Zclip,但是网上的说法是利用了flesh来实现的,我用了之后可 ...

  5. [转] 为什么说 Java 程序员必须掌握 Spring Boot ?

    Spring Boot 2.0 的推出又激起了一阵学习 Spring Boot 热,那么, Spring Boot 诞生的背景是什么?Spring 企业又是基于什么样的考虑创建 Spring Boot ...

  6. python读写csv文件

    文章链接:https://www.cnblogs.com/cloud-ken/p/8432999.html Python读写csv文件 觉得有用的话,欢迎一起讨论相互学习~Follow Me 前言 逗 ...

  7. 3)django-路由系统url

    一:django路由系统说明 路由都在urls文件里,它将浏览器输入的url映射到相应的业务处理逻辑 二:django 常用路由系统配置  1)URL常用有模式一FBV(function base v ...

  8. Android 获取keystore SHA1方法

    (第一种方式)通过Android Studio编译器获取SHA1 第一步.打开Android Studio的Terminal工具 第二步.输入命令:keytool -v -list -keystore ...

  9. 大数据mapreduce俩表join之python实现

    二次排序 在Hadoop中,默认情况下是按照key进行排序,如果要按照value进行排序怎么办?即:对于同一个key,reduce函数接收到的value list是按照value排序的.这种应用需求在 ...

  10. 《深入理解Oracle 12c数据库管理(第二版)》PDF

    一:下载获取位置: 二:本书图样: 三:本书目录: 图书目录: 第1章 安装Oracle 1.1 了解OFA 1.1.1 Oracle清单目录 1.1.2 Oracle基础目录 1.1.3 Oracl ...