ES6学习笔记--箭头函数


箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结.

箭头函数长这个样子:

let fn = a => a++;  // fn 是函数名, a=>a*a 是函数体

这个函数就类似于:

let fn = function (a) {
return a++;
}

上面的实例就是一个参数的情况,当然也可以没有参数,或者有多个参数

没有参数


// 示例1
let fn = () => 2 + 3;
// 相当于
let fn = function() {
return 2 + 3;
}
//=========我是分割线===========
// 示例2
let fn1 = () => console.log('Hello World!');
// 相当于
let fn1 = function() {
console.log('Hello World!');
}

两个及以上参数


// 示例1
let fn1 = (a, b) => a + b;
// 相当于
let fn1 = function(a, b) {
return a + b;
};
//=========我是分割线===========
// 示例2
let fn2 = (a, b, ...rest) => {
let i, sum = a + b;
for( i = 0; i < rest.length; i++ ){
sum += rest[i];
}
return sum;
}
// 相当于
let fn2 = function(a, b,...rest) {
let i, sum = a + b;
for( i = 0; i < rest.length; i++ ){
sum += rest[i];
}
return sum;
}

说明: 上面的示例2,因为箭头右侧的函数代码块不止一条语句,所以要使用{ }(大括号) 包起来,如果需要接收函数的执行结果,则需使用 return 返回,比如下面的情况

let fn = (a, b) => { a + b };

控制台输出:

没有 return ,所有没有返回值

一种特殊情况


由于大括号会被解释为代码块,所以在使用箭头函数时,如果要返回一个对象,则 必须 把这个对象用 () 包裹起来.

// 错误代码
let fn1 = (a, b) => {
name: a,
age: b
}
console.log(fn1('Jack', 20));

这个是会报错的,正确的应该这样

// 正确的写法
let fn1 = (a, b) => (
{
name: a,
age: b
}
)

箭头函数可以与变量结构结合使用


let personInfo = {
firstname: 'chen',
lastname: 'huigong'
}
let person = ({ firstname, lastname }) => firstname + ' ' + lastname;
console.log(person(personInfo));
// 相当于
let person = function(person) {
return person.firstname + ' ' + person.lastname;
}
console.log(personInfo);

一些注意点


箭头函数在使用的时候有一些注意点.

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

箭头函数看上去是匿名函数的简写,但是箭头函数和匿名函数有一个特别明显的区别: 箭头函数内部的 this 是词法作用域,由上下文确定,看下面的代码

let person = {
birthday: 1990,
getAge: function() {
let b = this.birthday; // 1990
let fn = function() {
return new Date().getFullYear() - this.birthday; // this 现在指向 window 或 undefined
};
return fn();
}
}
person.getAge(); // NaN

此时,由于fn里面的 this 不指向 person 自身,所以执行 person.getAge() 就会出现问题

使用箭头函数就解决了这个问题

let person = {
birthday: 1990,
getAge: function() {
let b = this.birthday; // 1990
let fn = () => new Date().getFullYear() - this.birthday; // this 指向 person 对象
return fn();
}
}
person.getAge(); // 27

使用了箭头函数,则以前的 hack 写法就不需要了

let _this = this;

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

  1. 箭头函数是不可以当做 构造函数 的,也就是说,不可以使用 new 命令,否则会抛出错误.

  2. 不可以使用 arguments 对象,该对象在函数体内是不存在的.如果要使用,可以用 rest 参数代替.

  3. 不可以使用 yield 命令,因此箭头函数不能用作Generator函数.

其他的一些问题


除了this,以下三个变量在箭头函数中也是不存在的,指向外层函数的对应变量: arguments, super, new.target.

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

上面代码中,箭头函数内部的变量arguments,其实是函数fooarguments变量.另外,由于箭头函数没有自己的this,所以当然也就不能用call()apply()bind()这些方法去改变this的指向.

ES6学习之箭头函数的更多相关文章

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

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

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

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

  3. es6学习笔记-async函数

    1 前情摘要 前段时间时间进行项目开发,需求安排不是很合理,导致一直高强度的加班工作,这一个月不是常说的996,简直是936,还好熬过来了.在此期间不是刚学会了es6的promise,在项目有用到pr ...

  4. ES6系列之箭头函数

    本系列是在平时阅读.学习.实际项目中有关于es6中的新特性.用发的简单总结,目的是记录以备日后温习:本系列预计包含let/const.箭头函数.解构.常用新增方法.Symbol.Set&Map ...

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

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

  6. ES6学习笔记(函数)

    1.函数参数的默认值 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log(' ...

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

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

  8. ES6学习笔记(6)----函数的扩展

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 函数的扩展 函数的默认值 : ES6可以为函数指定默认值 (1)指定默认值的两种方式 a.函数参 ...

  9. codewars--js--Reverse or rotate?----es6变量,箭头函数,正则取块

    问题描述: 对输入的str按照sz个数进行分块,若一块内所有数字的立方和是偶数,则倒序:否则,向左移动一位.然后将修改过的块整合到一个字符串,作为输出. The input is a string s ...

随机推荐

  1. [国家集训队2010]小Z的袜子

    ★★★   输入文件:hose.in   输出文件:hose.out   简单对比 时间限制:1 s   内存限制:512 MB [题目描述] 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜 ...

  2. 这个贴子的内容值得好好学习--实例详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化

    感觉要DJANGO用得好,ORM必须要学好,不管理是内置的,还是第三方的ORM. 最最后还是要到SQL.....:( 这一关,慢慢练啦.. 实例详解Django的 select_related 和 p ...

  3. [codevs 1961]躲避大龙(dfs)

    题目:http://dev.codevs.cn/problem/1961/ 分析: 被“SPFA”的标签骗了…… 看了hzwer的博客才知道可以用f[i][0..60]表示每个点每个秒是否可以到.至于 ...

  4. @Autowired中无法注入RestTemplate的问题

    1.在启动类中添加 @Beanpublic RestTemplate restTemplate(){ return new RestTemplate();} 即可解决无法注入RestTemplate的 ...

  5. java String长度与varchar长度匹配理解(字符和字节长度理解)

    java String长度与varchar长度匹配理解(字符和字节长度理解) string中的length()长度,返回的是char的数量,每个char可以存储世界上任何类型的文字和字符,一个char ...

  6. [Vue @Component] Place Content in Components with Vue Slots

    Vue's slots enable you to define where content of a component should land when you define the conten ...

  7. 如何使用PHP显示在线Word文档

    在线生成FlashPaper文档 1 安装 FlashPaper2,最好下载绿色版的FlashPaper软件,如下所示,先点击初始化.bat即开始绿化,然后双击"FlashPrinter.e ...

  8. LeetCode 970. Powerful Integers (强整数)

    题目标签:HashMap 题目让我们找出所有独一的powerful integers 小于bound的情况下. 把 x^i 看作 a:把 y^j 看作b, 代入for loop,把所有的情况都遍历一遍 ...

  9. 5分钟APIG实战: 使用Rust语言快速构建API能力开放

    序言:Rust语言简介 参与过C/C++大型项目的同学可能都经历过因为Null Pointer.Memory Leak等问题“被” 加班了不知道多少个晚上.别沮丧,你不是一个人,Mozilla Fir ...

  10. linux下的epoll怎样高效处理百万连接

    开发高性能网络程序时.windows开发人员们言必称iocp,linux开发人员们则言必称epoll.大家都明确epoll是一种IO多路复用技术,能够很高效的处理数以百万计的socket句柄,比起曾经 ...