ES6~你跟箭头函数升华之路

Faremax 发布于2019-08-21 17:16 / 3342人阅读

摘要：箭头函数简单的定义胖箭头函数，又称箭头函数，是一个来自又称的全新特性。箭头函数是新增加的一个特性。使用箭头函数的注意点箭头函数在参数和箭头之间不能换行。值得注意的一点就是对象的指向是可变的，但在箭头函数内是固定的。

箭头函数 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。

喜欢的小伙伴可以关注我的学习分享网站：

牧码人keephhh

GPU云服务器云服务器箭头函数 ES6 网络之路成长之路

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

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

从-1开始的ES6探索之旅01：颜文字成精的箭头函数上篇 - 大哥，你指哪呢？

摘要：基础语法参数参数参数函数声明参数参数参数表达式单一相当于参数参数参数表达式当只有一个参数时，圆括号是可选的单一参数函数声明单一参数函数声明没有参数的函数应该写成一对圆括号。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？之前在某些大神的代码中出现一串神秘符号类似于num =>...

Snailclimb 2019-08-21 18:36 评论0 收藏0
前端每周清单第 41 期 : Node 与 Rust、OpenCV 的火花，网络安全二三事

摘要：的网站仍然使用有漏洞库上周发布了开源社区安全现状报告，发现随着开源社区的日渐活跃，开源代码中包含的安全漏洞以及影响的范围也在不断扩大。与应用安全是流行的服务端框架，本文即是介绍如何使用以及其他的框架来增强应用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清单专注...

syoya 2019-08-21 17:48 评论0 收藏0
从 ES6 高阶箭头函数理解函数柯里化

摘要：于是开始各种搜索，先是知道了多个连续箭头函数就是的多次柯里化的写法，对于函数柯里化，很久以前就知道这个名次，但是并不理解，也没有去了解。可以对一个连续的箭头函数进行多次柯里化。前言：第一次看到多个连续箭头函数是在一个 react 项目中，然鹅确认了下眼神，并不是对的人，因为看得一脸懵逼。em......于是开始各种搜索，先是知道了多个连续箭头函数就是 es6 的多次柯里化的写法，对于...

Hujiawei 2019-08-23 13:59 评论0 收藏0
es6/es2015语法之路(相关文章)

摘要：语句用于从给定文件或模块导出函数和对象可以很好的模块化尝试中的箭头函数 1：export语句用于从给定文件（或模块）导出函数和对象 https://developer.mozilla.org...(可以很好的模块化)2:尝试 ES6 中的箭头函数 https://imququ.com/post/arrow...

李昌杰 2019-08-21 11:19 评论0 收藏0
我的React之路--入门

摘要：在构造函数里面初始化的数据，把数据放在页面上，点击时候调用方法改变中的数据。是中父组件向子组件通信的方式，下面是一个简单的例子使用组件我是显示的数据我们定义组件时候在构造函数中可以接收到参数，并且要使用传到的构造方法中。 React的学习之路还要继续走下去，最近一边在做未完成的项目一边学习React，项目是vue写的，后面还需要有一个后台管理系统计划使用react完成，寒假说长也不长，...

qpwoeiru96 2019-08-22 13:52 评论0 收藏0