es6中的(=>)箭头函数
x => x * x
上面的箭头函数相当于:
function (x) {
return x * x;
}
箭头函数相当于匿名函数,并且简化了函数定义。
箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了。
还有一种可以包含多条语句,这时候就不能省略{ ... }和return:
x => {
if (x > 0) {
return x * x;
}
else {
return - x * x;
}
}
如果参数不是一个,就需要用括号()括起来:
// 两个参数:
(x, y) => x * x + y * y
// 无参数:
() => 3.14
// 可变参数:
(x, y, ...rest) => {
var i, sum = x + y;
for (i=0; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}
如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错:
// SyntaxError:
x => { foo: x }
因为和函数体的{ ... }有语法冲突,所以要改为:
// ok:
x => ({ foo: x })
this
箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:
箭头函数内部的this是词法作用域,由上下文确定。
回顾前面的例子,由于JavaScript函数对this绑定的错误处理,下面的例子无法得到预期结果:
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}
};
现在,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj:
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25
如果使用箭头函数,以前的那种hack写法:
var that = this;
就不再需要了。
由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:
var obj = {
birth: 1990,
getAge: function (year) {
var b = this.birth; // 1990
var fn = (y) => y - this.birth; // this.birth仍是1990
return fn.call({birth:2000}, year);
}
};
obj.getAge(2015); // 25
参考原文:
https://www.cnblogs.com/hailun/p/6279029.html
es6中的(=>)箭头函数的更多相关文章
- ES6中的箭头函数
关于函数表达式中的this:自动引用正在调用当前方法的.前的对象1.obj.fun()中的this fun中的this -> obj2.new Fun() Fun中的this -> 正在创 ...
- ES6中的箭头函数与普通函数的区别
箭头函数与普通函数的区别 1.语法上更加简洁.清晰 基本语法: // 关于箭头函数的参数 // 如果箭头函数没有参数,直接写一个括号即可 let fun1 = () => { console.l ...
- ES6中的箭头函数和普通函数有什么区别?
1.普通函数中的this总是指向调用它的那个对象, 箭头函数没有自己的this,他的this永远指向其定义环境,任何方法都改变不了其指向,如call().bind().apply().(正是因为它没有 ...
- JS ES6中的箭头函数(Arrow Functions)使用
转载这篇ES6的箭头函数方便自己查阅. ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 基础语法 (参数1, 参数2, …, 参数N) => ...
- ES6中的箭头函数的语法、指向、不定参数
箭头函数的语法 function fn1() { console.log(1); } let fn2 = () => { console.log(2); } fn1()//1 fn2()//2 ...
- 聊聊 ES6 中的箭头函数
首先来两点: 当只有一个参数的时候,那么 () 可以省略 当只有一个 return 的时候,那么 {} 可以省略 当函数体内只有一条语句的时候,那么 {} 也可以省略 下面来几个简单的例子来对比 ES ...
- [js高手之路] es6系列教程 - 箭头函数详解
箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...
- ES6学习之箭头函数
ES6学习笔记--箭头函数 箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结. 箭头函数长这个样子: let fn = a => a++; // fn 是函数名, a= ...
- es6学习笔记--箭头函数
基本用法 ES6允许使用“箭头”(=>)定义函数. var f = v => v; 上面的箭头函数等同于: var f = function(v) { return v; }; 如果箭头函 ...
随机推荐
- non-identifying and identifying
An identifying relationship means that the child table cannot be uniquely identified without the par ...
- Redis生存时间、删除策略和排序
生存时间 设置命令 expire key long:设置数据在long秒后过期. pexpire key long:设置数据在long毫秒后过期. ttl key:查询数据剩余的生存时间.如果数据已过 ...
- spring-注解配置-junit整合测试-aop
1 使用注解配置spring 1.1 步骤 导包4+2+spring-aop 1.为主配置文件引入新的命名空间(约束) 2.开启使用注解代理配置文件 3.在类中使用注解完成配置 1.2 将对象注册到容 ...
- JasperReport填充报表6
任何报告工具的主要目的是为了生产出高品质的文档.举报填充过程有助于报告工具通过操纵数据集来实现这一目标.需要报表填充过程的主要输入是: 报表模板:这是实际的JasperReport文件 报告参数:这些 ...
- HDU2896 病毒侵袭 AC自动机模板
各种MLE,这模板感觉有问题,next数组开128也会MLE,实际上可见字符为编号32~126,只用开100就行. #include <iostream> #include <cst ...
- TZ_10_spring-sucrity 服务器和页面的权限控制
1.在服务器端我们可以通过Spring security提供的注解对方法来进行权限控制. Spring Security在方法的权限控制上支持三种类型的注解,JSR-250注解.@Secured注解和 ...
- window 导入sql 防止乱码
第一步:创建数据库 create database if not exists db_news default charset utf8 collate utf8_general_ci; 第二步:设置 ...
- spring cloud深入学习(一)-----什么是微服务?什么是rpc?spring cloud简介
近年来,微服务非常的流行,那么为什么是它?简单介绍一下. 为什么是微服务? 微服务架构是一种将单应用程序作为一套小型服务开发的方法,每种应用程序都在其自己的进程中运行,并与轻量级机制(通常是HTTP资 ...
- android 复制到剪切板
The Clipboard Framework 当使用clipboard framework时,把数据放在一个剪切对象(clip object)里,然后这个对象会放在系统的剪贴板里. clip obj ...
- C#5.0 异步编程async/await用法
微软在发布VS2012的同时推出了C#5.0,其中包含了async和await 代码如下: class Program { private static readonly Stopwatch watc ...