ES6 箭头函数从了解到深入

Eminjannn 发布于2019-08-20 16:37 / 2786人阅读

摘要：有传闻说，箭头函数的语法，是受到了的影响，并且它与中的语法一样，共享上下文。箭头函数是新增加的一个特性。箭头函数没有自己的值，其值是通过继承其它传入对象而获得的通常来说是上一级外部函数的的指向。

箭头函数 1. 简单的定义：

胖箭头函数 Fat arrow functions，又称箭头函数，是一个来自ECMAScript 2015（又称ES6）的全
新特性。有传闻说，箭头函数的语法=>，是受到了CoffeeScript 的影响，并且它与CoffeeScript中的
=>语法一样，共享this上下文。

箭头函数的产生，主要由两个目的：更简洁的语法和与父作用域共享关键字this。接下来，让我们来看几个详细的例子
当需要编写一个简单的单一参数函数时，可以采用箭头函数来书写，标识名 => 表达式。
这样就可以省却 function 和 return 的输入，还有括号，分号等。箭头函数是ES6新
增加的一个特性。

let f = v => v;

最直接的感觉就是简便，当然不可能就是这么一点好处，下面就一起来探讨一下。

几个小细节：

如果箭头函数的代码块多余一条语句，就必须要使用大括号将其括起来，并且使用
return 语句返回。

由于大括号会被解释位为代码块，所以如果箭头函数直接返回一个对象，必须在外
面加上括号。

  let f = id => ({age: 22, name: Alice })

箭头函数还可以和解构赋值 Destructuring 联合使用.

  const f = ({first, last}) => first + "" + last;

可以简化回调函数，大大简化和缩短代码行数。

2. 箭头函数和普通函数的区别

this的指向
普通函数与箭头函数有个微小的不同点。 箭头函数没有自己的this值 ，其this值是通

过继承其它传入对象而获得的,通常来说是上一级外部函数的 this 的指向。

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

  f.call( { id: 42 }); //id: 42;

这个例子中， setTimeout 的参数是一个箭头函数，每隔100毫秒运行一次，如果是普通函
数，执行的 this 应该指向全局对象，但是箭头函数会让 this 总是指向函数所在的对象

箭头函数里面嵌套箭头函数会有多少个this呢？
看一个简单的例子

  function f() {
    return () => {
      return () => {
        return () => {
          console.log("id:", this.id);
        };
      };
    };
  }
  f().call( {id: 42})()()(); //id: 42

上面的代码中只有一个 this，就是函数f的this 。这是因为所有的内层函数都是箭头函数
都没有自己的this，都是最外层f函数的this。
注意：还有三个变量在箭头函数中也是不存在的arguments , super, new.target所以顺理成
章，箭头函数也就不能再用这些方法call(),apply(),bind(),因为这是一些改变this指向的方法，
箭头函数并没有this啊。

  var adder = {
    base : 1,
    add : function(a) {
    var f = v => v + this.base; return f(a);
  },
    addThruCall: function(a) {
    var f = v => v + this.base;
    var b = { base : 2 };
    return f.call(b, a);
  }
};
    console.log(adder.add(1));

3. 怎么处理好箭头函数的使用问题呢？

使用非箭头函数来处理由object.method()语法调用的方法。因为它们会接收到来自调用者的
有意义的this值。

在其它场合都使用箭头函数。

4. 使用箭头函数的注意点

箭头函数在参数和箭头之间不能换行。

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

"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"
  }
});

不可以当作构造函数，简单说就是不能再使用new命令了，不然会报错。

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

不可以使用arguments 对象，该对象在函数体内不存在，如果实在要用可以用rest代替。

不可以使用yield命令，箭头函数不可用作Generator函数。

值得注意的一点就是this对象的指向是可变的，但在箭头函数内是固定的。

5. 总结

箭头函数是我最喜欢的ES6特性之一。使用=>来代替function是非常便捷的。但我也曾见过只使用
=>来声明函数的代码，我并不认为这是好的做法，因为=>也提供了它区别于传统function，其所
独有的特性。我个人推荐，仅在你需要使用它提供的新特性时，才使用它。

当只有一条声明语句(statement)时，隐式 return。

需要使用到父作用域中的this。

云服务器 GPU云服务器深入了解javascript 深入了解php项目如何深入了解linux 箭头函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83042.html

ES6 - 箭头函数、箭头函数与普通函数的区别总结

摘要：但是因为箭头函数没有自己的，它的其实是继承了外层执行环境中的，且指向永远不会随在哪里调用被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用调用时会报错报错箭头函数没有自己的箭头函数没有自己的对象。这篇文章我们来了解一下ES6中的箭头函数。首先会介绍一下箭头函数的基本语法，因为基本语法比较好理解，我们用示例做简单介绍即可。之后，我们重点来讨论一下...

scola666 2019-08-23 16:32 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
深入理解JavaScript

摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我...

myeveryheart 2019-08-22 13:46 评论0 收藏0
深入ES6：箭头函数

摘要：令人震惊的箭头函数引入了写入函数的新语法。使用箭头函数创建简单对象时有一个警告。代码因此被默默地解释为一个不执行任何操作并返回未定义的箭头函数。内部函数是一个箭头函数，所以它从封闭范围继承此函数。箭头从一开始就一直是JavaScript的一部分。第一个JavaScript教程建议在HTML注释中包装内联脚本。这会阻止不支持JS的浏览器错误地将JS代码显示为文本。你会写这样的东西： ...

MasonEast 2019-08-22 17:14 评论0 收藏0
《深入理解ES6》笔记——函数（3）

摘要：错误的写法错误的写法中的构造函数新增了支持默认参数和不定参数。箭头函数的简单理解箭头函数的左边表示输入的参数，右边表示输出的结果。但是有了尾调用优化之后，递归函数的性能有了提升。作为前端切图仔，越发觉得自己离不开函数了。说到JavaScript函数，脑子里都是匿名函数、普通函数、闭包函数、构造函数......然后还能说出一大堆函数的概念。如果你达到这个水平，那么函数对你来说没有难度...

DoINsiSt 2019-08-20 18:04 评论0 收藏0