箭头函数,通过 => 语法实现的函数简写形式,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. vc++高级班之多线程篇[6]---线程间的同步机制①

    ①.线程同步的必要性:   int g_Num = 0; UINT __cdecl ThreadProc(LPVOID lpParameter) {  for (int idx = 0; idx &l ...

  2. hibernate框架学习之数据查询(本地SQL)

    本地SQL查询方式 lHibernate框架支持使用原生态SQL语句进行操作数据库 l查询对象SQLQuery由Session获取 •SQLQuery sq = s.createSQLQuery(&q ...

  3. 清理messages提示-bash: /var/log/messages: Operation not permitted的处理

    报警提示系统盘容量不足了/var/log下查看messages日志已经很大了,所以就想着把messages清空一下,以此来释放空间.在删除的时候提示没有权限. 看了下日志,发现是大量的haproxy日 ...

  4. nginx或者squid正向代理实现受限网站的访问

    项目背景:公司商务同事需要操作合作方的后台,但是这个后台做了限制(安全考虑只对指定IP放行),刚好公司是adsl拨号,经常更换IP 需求:让商务同事不要经常给IP到合作方去添加白名单 于是想到了做正向 ...

  5. why should the parameter in copy construction be a reference

    if not, it will lead to an endless loop!!! # include<iostream> using namespace std; class A { ...

  6. python相关的安装软件

    本次安装的系统是WINDOWS系统 一.python3.anaconda和python2 1.准备工具:python3.python2安装包可以直接从官网下载https://www.python.or ...

  7. spring3.0+Atomikos 构建jta的分布式事务

    摘自: http://gongjiayun.iteye.com/blog/1570111 spring3.0+Atomikos 构建jta的分布式事务 spring3.0已经不再支持jtom了,不过我 ...

  8. GDOI2018 滑稽子图 [斯特林数,树形DP]

    传送门并没有 思路 见到那么小的\(k\)次方,又一次想到斯特林数. \[ ans=\sum_{T} f(T)^k = \sum_{i=0}^k i!S(k,i)\sum_{T} {f(T)\choo ...

  9. better-scroll项目中遇到的问题

    1.在项目中发现个问题,用better-scroll实现的轮播图和页面滚动条俩个效果一起出现的时候,当鼠标或手指放在轮播图位置的时候,上下滚动的时候,页面滚动条不动 发现最新的版本就会出这个问题,就是 ...

  10. 初步了解three.js

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...