es6基础0x001：箭头函数

stonezhu 发布于2019-08-23 12:51 / 3335人阅读

摘要：这就是所谓的箭头函数不绑定，而在我看来，回调函数就是箭头函数最好的归宿。

0x000 概述

箭头函数有两个作用：

更简短的写法

不绑定this

0x001 语法一表览

()=>{}
()=>{console.log("arrow");return null}
()=>"hello"
(num1, num2)=>num1+num2
num=>++num
()=>({name:"arrow"})

0x002 写法

正规一点

let add = (num1, num2)=>{
   return num1 + num2
}
add(1, 2)

声明了一个add变量，该变量是一个加法函数，该函数有两个形参：num1、num2，返回值为这两个参数相加的结果

单参数

let  increment = num=>{
    return num + 1
}

上面声明了一个increment变量，该变量是一个自增函数，该参数只有一个形参num，返回值为该参数自增1，因为只有一个参数，所以可以省略箭头函数参数列表的()

无参数

let now = () => {
    return Date.now()
}
let now==>{} // Uncaught SyntaxError: Unexpected token ==

上面声明了一个now变量，该变量是一个函数，可以获取当前时间戳，因为不需要参数，所以参数列表置空，但是这种情况下不能将()省略，否则将导致语法错误

单一返回值

let now = () =>  Date.now()

上面函数还可以简写为以下方式，因为函数体只有一句话，所以可以省略{}和return

单一返回值：返回对象字面量
虽然箭头函数可以省略{}和return，但是在返回一个对象字面量的时候要格外注意，如果是像下面的写法，虽然在语法检查的时候不会报错，但是和你所期望的可能不太一样，比如这里，你希望得到的数据是{name:"hello"}，但是结果却是undefined。

let data=()=>{name:"hello"} // 不会报错 
console.log(data()) // undefined

为什么呢？用babel解析一下

可以发现，被解析成了

var data = function data() {
  name: "hello";
};

并没有return，对比4的例子

所以，其实{name:"hello"}被解析成了函数体，{}是函数的{}，而不是对象的{}，而name:"hello"被解析成了语句，这种语句不常用，却是满足js语法的，叫做标签，案例：

var str = "";

loop1:
for (var i = 0; i < 5; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

console.log(str); // 0234

所以如果箭头函数需要返回单一的对象字面量，需要加对()

let data=()=>({name:"hello"})

0x003 不绑定this

看下面一种情况

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    console.log(this.age)
  }, 1000);
}

var p = new Person();

通常，我们希望在setInterval的回调函数中访问Person的变量，比如age，但是每个新定义的函数都有自己的this，所以这里的this是growUp的this，并不是Person的this，这将导致this.age将会得到undefined，为了解决这种问题，我们通常会使用折中的解决方案：

function Person() {
  this.age = 0;
  var that=this
  setInterval(function growUp() {
    console.log(that.age)
  }, 1000);
}

var p = new Person();

用一个临时变量that来持有this，避免使用growUp的this，这个时候就轮到箭头函数上场了：

function Person() {
  this.age = 0;
  setInterval(()=> {
    console.log(this.age)
  }, 1000);
}

var p = new Person();

在箭头函数中，是不会绑定this的，也就是他没有自己的this，所以这个时候，他的this，就是Person的this。这就是所谓的箭头函数不绑定this，而在我看来，回调函数就是箭头函数最好的归宿。
babel解析之后的结果其实还是老方法：

"use strict";

function Person() {
  var _this = this;

  this.age = 0;
  setInterval(function () {
    console.log(_this.age);
  }, 1000);
}

var p = new Person();

0x004 注意

箭头函数支持默认参数

let add = (num1 = 0, num2) => num1 + num2

箭头函数支持剩余参数

let add = (...numList) => numList.reduce((n1, n2) => n1 + n2)

箭头函数支持参数列表解构

let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;

箭头函数不支持arguments，如果要使用arguments，推荐上面的剩余参数的写法

// 栗子1
var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1
// 栗子2
function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n
  return f();
}

foo(1); // 2
// 栗子3
function foo() { 
  var f = (...args) => args[0]; 
  return f(2); 
}

foo(1); 
// 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; 
   // 代表全局对象 "Window", 因此 "this.a" 返回 "undefined"
  }
});

无法和new一起使用

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

没有prototype

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

解析顺序有影响

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

0x005 资源

MDN-箭头函数

服务器托管私有云箭头函数基础函数 ES6 es6-系列

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

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

es6基础0x024：babel简单使用

摘要：简单的说就是，新语法编译器旧语法。说明所以，对于新特性，我们可以通过使用，也可以通过语法转化来达到兼容。 0x001 polyfill 我们都知道，js总是一直存在着兼容性问题，虽然其他语言也存在着兼容性问题，比如c++、java，但那种兼容性是新特性在旧版本上的不兼容，js则存在着各种奇形怪哉的不兼容。这其中有着非常复杂的历史和时代的原因，并不加以累述。而解决兼容性问题的方法在以前只...

wangbinke 2019-08-23 13:41 评论0 收藏0
es6基础0x018：类、继承、重写、超类调用

摘要：要注意的是，如果要重写构造函数，必须要在构造函数的第一行调用父类的构造函数，在而在其他地方，则可以通过或者调用父级的变量或者方法 0x000 概述 es6真正的引入的面相对象的类，以前我们总是通过其他手段来模拟类这种形式，现在终于有了，我有点开心，又有点难过，因为在我看来，js并不是所谓的面相对象的语言，反而更偏向函数式，原型继承是他真正的面目。面相对象不过是人们在思考问题时总结出一套...

LiuRhoRamen 2019-08-26 12:23 评论0 收藏0
es6基础0x015：for...of

摘要：概述是一个迭代可迭代对象的方式，可迭代对象包括对象等等语法迭代数组迭代字符串迭代迭代迭代迭代集合总结只能迭代可迭代对象 0x000 概述 for...of是一个迭代可迭代对象的方式，可迭代对象包括Array、Map、Set、String、TypedArray、arguments 对象等等 0x001 语法 for(variable of iterable){ // statem...

luxixing 2019-08-23 13:12 评论0 收藏0
es6基础0x010：增强的对象字面量

摘要：概述在中，对象字面量的语法被增强了更短的属性声明如果属性的属性名和属性值引用的变量名一致，可以直接省略之前更短的函数声明如果属性的属性名和属性值函数的函数名一致或者属性值函数没有函数名，可以省略关键字和属性名之前可动态计算的属性名属性名可以 0x000 概述在es6中，对象字面量的语法被增强了 0x001 更短的属性声明如果属性的属性名和属性值引用的变量名一致，可以直接省略 let...

fox_soyoung 2019-08-23 13:09 评论0 收藏0
es6基础0x016：生成器函数

摘要：概述其实前几章我都不知道怎么写，因为他们总是涉及到一些比较深的东西，比如可迭代对象生成器迭代器之类的东西，等写完这个系列，再好好整理一下这些东西可能会好一点，现在整理到哪儿就写到哪儿吧语法使用作为声明标识符，表示这是一个生成器函数是函数名是 0x000 概述其实前几章我都不知道怎么写，因为他们总是涉及到一些比较深的东西，比如可迭代对象、生成器、迭代器之类的东西，等写完这个系列，再好好...

ghnor 2019-08-23 13:11 评论0 收藏0