文档章节

箭头函数

奋斗的小芋头
 奋斗的小芋头
发布于 2017/07/11 11:06
字数 1201
阅读 7
收藏 0

一.语法

基础语法

//1. 前面圆括号,后面大括号
(param1, param2, …, paramN) => { statements; }

/* 2.当删除大括号时,它将是一个隐式的返回值,这意味着我们不需要指定我们返回*/
(param1, param2, …, paramN) => expression;

// 等价于 
(param1, param2, …, paramN) => { return expression; } 

// 3.如果只有一个参数,圆括号是可选的:
(singleParam) => { statements; }

// 等价于

singleParam => { statements; }



//4.如果箭头函数 有多参数, 必须使用 ()圆括号: 

() => { statements; } 



//5.如果箭头函数 无参数 , 必须使用 ()圆括号或者 _下划线:

() => { statements; } 
或
_ => { statements; }

二. 描述

箭头函数的引入有两个方面的作用:一是更简短的函数书写,二是对 this的词法解析。

1.更短的函数

更短的函数在函数式编程里很受欢迎。试比较:

var a = [
  "Hydrogen",
  "Helium",
  "Lithium",
  "Beryl­lium"
];

var a2 = a.map(function(s){ return s.length });

var a3 = a.map( s => s.length );
var f = v => v;
//上面的箭头函数等同于:
var f = function(v) {
  return v;
};

2.不绑定this

在箭头函数出现之前,每个新定义的函数都有其自己的 this 值(例如,构造函数的 this 指向了一个新的对象;严格模式下的函数的 this 值为 undefined;如果函数是作为对象的方法被调用的,则其 this 指向了那个调用它的对象)。在面向对象风格的编程中,这会带来很多困扰。

function Person() {
    // 构造函数 Person() 定义的 `this` 就是新实例对象自己
    this.age = 0;
    setInterval(function growUp() {
        // 在非严格模式下,growUp() 函数定义了其内部的 `this`为全局对象, 
        // 不同于构造函数Person()的定义的 `this`
        this.age++;
    }, 3000);
}

var p = new Person();

在 ECMAScript 3/5 中,这个问题通过把this的值赋给变量,然后将该变量放到闭包中来解决。

function Person() {
    var self = this; 
    // 也有人选择使用 `that` 而非 `self`, 只要保证一致就好.
    self.age = 0;
    setInterval(function growUp() {
        // 回调里面的 `self` 变量就指向了期望的那个对象了
        self.age++;
    }, 3000);
}

var p = new Person();

除此之外,还可以使用 bind 函数,把期望的 this 值传递给 growUp() 函数。

3.箭头函数会捕获其所在上下文的  this 值

作为自己的 this 值,因此下面的代码将如期运行。

function Person() {  
    this.age = 0;  
    setInterval(() => {
        // 回调里面的 `this` 变量就指向了期望的那个对象了
        this.age++;
    }, 3000);
}

var p = new Person();

 

三.向使用方法一样使用箭头函数

1.如上所述,箭头函数表达式对非方法函数是最合适的。让我们看看当我们试着把它们作为方法时发生了什么。

'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); 
// undefined
obj.c(); 
// 10, Object {...}

箭头函数没有定义this绑定。

2.另一个涉及Object.defineProperty():的示例:

'use strict';
var obj = {
  a: 10
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10; 
   // represents global object 'Window', therefore 'this.a' returns 'undefined'
  }
});

3.箭头函数使用注意点 https://segmentfault.com/a/1190000006032223

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

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

  3. 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。

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

this 指向固定化

ES5规范中,this对象的指向是可变的,但是在ES6的箭头函数中,它却是固定的。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });   // 输出 id: 42

注意:上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到100毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 42}),所以输出的是42。

 

四.使用new操作符

箭头函数不能用作构造器,和 new 一起用就会抛出错误。

var Foo = () => {};
var foo = new Foo(); 
// TypeError: Foo is not a constructor

五.使用原型属性

箭头函数没有原型属性。

var Foo = () => {};
console.log(Foo.prototype); 
// undefined

六. 返回文字表达式

请牢记,用 params => {object:literal} 这种简单的语法返回一个文字表达式是行不通的:

var func = () => {  foo: 1  };
// undefined!

var func = () => {  foo: function() {}  };
// SyntaxError: function statement requires a name(未定义函数语句)

这是因为花括号(即 {} )里面的代码被解析为序列语句了(例如, foo 被认为是一个标签, 而非文字表达式的组成部分)。

所以,记得用圆括号把文字表达式包起来:

var func = () => ({ foo: 1 });

 

© 著作权归作者所有

奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
03/22
0
0
【ES6基础】箭头函数(Arrow functions)

ES6中,除了let和const新特性,箭头函数是使用频率最高的新特性了。如果你曾经了解如日中天的JavaScript衍生语言CoffeeScript, 就会清楚此特性并非ES6独创。箭头函数顾名思义是使用箭头(=>)...

03/04
0
0
轻松学习 JavaScript——第 6 部分:JavaScript 箭头函数

本文由码农网 – 小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! JavaScript箭头函数是ECMAScript 6中引入的编写函数表达式的一种简便方法。通常,在JavaScript中,...

码农网
2017/11/22
0
0
Vue进阶(十九): ES6中的箭头函数的定义和调用方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/85111988 基本用法: ES6中允许使用“箭头”(=>)定义函数 上面代码相当于: 根...

Lo秀娴ve
2018/12/20
0
0
ES6学习笔记——箭头函数使用时的注意点

作者在学习 ES6 之后,使用最频繁的一个新特性就是箭头函数,用起来真的超方便,不知不觉中就爱上了这种语法。 但是好用的箭头函数,如果使用的时候不注意,就会带来意想不到的问题。下面就针...

君未来我已老
2018/03/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 他只能用这个办法劝你注意身体了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @-冰冰棒- :#今日歌曲推荐# Kodaline《High Hopes》 《High Hopes》- Kodaline 手机党少年们想听歌,请使劲儿戳(这里) @xiaoshiyue :仙女...

小小编辑
24分钟前
691
14
Spring Boot Actuator 整合 Prometheus

简介 Spring Boot 自带监控功能 Actuator,可以帮助实现对程序内部运行情况监控,比如监控状况、Bean加载情况、环境变量、日志信息、线程信息等。这一节结合 Prometheus 、Grafana 来更加直观...

程序员果果
33分钟前
9
0
Linux文件查找命令详解

对于文件查找,我们最好用的还是属于find命令了,在说find命令之前,先把另外几个查找命令介绍一下。 目录 0x01 查询命令介绍 0x02 find命令介绍 0x01 查询命令介绍 在介绍之前,首先先了解一...

无心的梦呓
34分钟前
6
0
快速掌握的测试用例优先级划分方法

怎么样的设计才能算测试用例 引自:IEEE Standard 610 (1990): A set of test inputs, execution conditions, and expected results developed for a particular objective, such as to exe......

测者陈磊
37分钟前
4
0
[mycat]Attribute value "roadNodeId,version" of type NMTOKEN must be a name token

不能逗号配两个字段的主键 primaryKey="roadNodeId,version" Caused by: io.mycat.config.util.ConfigException: org.xml.sax.SAXParseException; lineNumber: 7; columnNumber: 105; Attrib......

Danni3
42分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部