「前端面试题系列5」ES6 中箭头函数的用法

betacat 发布于2019-08-23 15:08 / 1170人阅读

摘要：在这里，如果用箭头函数，可以这样改写箭头函数并没有自己的，所以事件处理函数的调用者并不受影响。比如，在需要动态上下文的场景中，使用箭头函数需要格外地小心，这些场景包括对象的方法原型方法事件的回调构造函数。

前言

年味儿渐散，收拾下心情，继续敲代码吧。

对于即将到来金三银四的求职季，相信不少同学都在默默地做着准备。本系列旨在梳理前端庞杂的知识点，并尽可能通俗易懂地表述出来，也希望能帮到有需要的同学。

这是前端面试题系列的第 5 篇，你可能错过了前面的篇章，可以在这里找到：

this 的原理以及用法

伪类与伪元素的区别及实战

如何实现一个圣杯布局？

今日头条面试题和思路解析

面试中，我经常会问及 ES6 的知识点，因为平时工作中用得很多。当问到箭头函数时，不少候选人都会赞叹地说：箭头函数很好用，而且再也不用操心 this 的指向了。

我接着问：箭头函数是挺好用的，但是你有没有遇到过，不适合使用箭头函数的场景呢？

这时，能回答得上来的候选人就很少了。箭头函数在大多数情况下，是很好用的，但是为什么在有些场景，使用箭头函数后会产生问题？是不是箭头函数还不够完善？又有哪些场景会发生问题？该如何解决呢？这，正是本文想要一起探讨的。

箭头函数的写法

为什么叫箭头函数( Arrow Function )？因为它的写法，看上去就是一个箭头：

const multiply = num => num * num;

它等价于：

const multiply = function (num) {
    return num * num;
};

此外，还可以传多个参数，以及可变参数。

// 多参数
const multiply = (num1, num2) => num1 * num2;

// 可变参数
const sum = (num1, num2, ...rest) => {
    let result = num1 + num2;
    for (let i = 0; i < rest.length; i++) {
        result += rest[i];
    }
    
    return result;
};

当有多条语句时，需要配上 {...} 和 return。

另外，如果返回的结果是对象，则需要配上 ()，像下面这样：

const func = val => ({ value: val });

从上述的写法来看，相较普通函数而言，箭头函数的确简便了很多，提升了我们代码的易用性。但它并非在任何场景下都适用，接下来，将会介绍几种不适合箭头函数的场景，并会提出可行的解决方案。

不适合的场景 1、对象的方法

看下面这个例子：

const obj = {
    x: 1,
    print: () => {
        console.log(this === window); // => true
        console.log(this.x); // undefined
    }
};

obj.print();

this.x 打印出来是 undefined。为什么？然后，我在上面加了一行，发现 this 指向了 window。

解析：print 方法用了箭头函数，其内部的 this 指向的还是上下文 window，上下文中并没有定义 x，所以 this.x 输出为 undefined。

解决办法：用 ES6 的短语法，或者传统的函数表达式都可以。所以，print 要这样写：

print () {
    console.log(this === test); // => true
    console.log(this.x); // 1
}

2、原型方法

同样的规则也适用于原型方法的定义，使用箭头函数会导致运行时的执行上下文错误。

function Cat (name) {
    this.name = name;
}

Cat.prototype.sayCatName = () => {
    console.log(this === window); // => true
    return this.name;
};

const cat = new Cat("Miao");
cat.sayCatName(); // => undefined

解决办法是：用回传统的函数表达式，像下面这样：

Cat.prototype.sayCatName = function () {
    console.log(this === cat); // => true
    return this.name;
};

sayCatName 变回传统的函数表达式之后，被调用时的执行上下文就会指向新创建的 cat 实例。

3、事件的回调

看下面这个例子：

const btn = document.getElementById("myButton");
btn.addEventListener("click", () => {
  console.log(this === window); // => true
  this.innerHTML = "Clicked button";
});

这里会有问题，因为 this 指向了 window。

解析：当为一个 DOM 事件绑定回调函数后，触发回调函数时的 this，需要指向当前发生事件的 DOM 节点，也就是这里的 btn。当回调发生时，浏览器会用 btn 的上下文去调用处理函数。所以最后的 this.innerHTML 等价于 window.innerHTML，问题就在这里。

解决办法：用函数表达式代替箭头函数。像这样：

btn.addEventListener("click", function() {
    console.log(this === btn); // => true
    this.innerHTML = "Clicked button";
});

另外，在 react 中的事件回调，也经常会遇到类似的问题。

// jsx render


// callback
handleClickButton () {
    ...
}

注意：这里 onClick 的回调函数，并非字符串，而是一个实实在在的函数。可以将 onClick 理解为一个中间变量，所以 react 在处理函数时的 this 指向就会丢失。

为了解决这个问题，我们需要为回调函数绑定 this，使得事件处理函数无论如何传递，this 都指向我们实例化的那个对象。

在这里，如果用箭头函数，可以这样改写：

箭头函数并没有自己的 this，所以事件处理函数的调用者并不受影响。

4、构造函数

箭头函数不能通过 new 关键字调用。

const Message = (text) => {
    this.text = text;
};

var helloMessage = new Message("Hello World!");
// Uncaught TypeError: Message is not a constructor

解析：从报错信息可以看出，箭头函数没有 constructor 方法，所以不能用作构造函数。 JavaScript 会通过抛出异常的方式，进行隐式地预防。

解决方法：用函数表达式代替箭头函数。

总结

回顾 MDN 给出的解释：箭头函数表达式的语法比函数表达式更短，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

所以说，箭头函数无疑是 ES6 带来的重大改进，在正确的场合使用箭头函数，能让代码变得更加简洁短小。但箭头函数也不是万能的，不能用的时候，千万别硬往上套。比如，在需要动态上下文的场景中，使用箭头函数需要格外地小心，这些场景包括：对象的方法、原型方法、事件的回调、构造函数。并非一定要用箭头函数，才能解决问题。

PS：欢迎关注我的公众号 “超哥前端小栈”，交流更多的想法与技术。

混合云云服务器 es6-系列 linux的面试题 js的基础面试题 fread函数的用法

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

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

「前端面试题系列4」this的原理以及用法

摘要：但是有一个总的原则那就是总会指向，调用函数的那个对象。作为对象方法的调用函数作为某个对象的方法调用，这时就指这个上级对象。 showImg(https://segmentfault.com/img/bVbnvF7?w=750&h=422); 这是前端面试题系列的第 4 篇，你可能错过了前面的篇章，可以在这里找到：伪类与伪元素的区别及实战如何实现一个圣杯布局？今日头条面试题和思...

fnngj 2019-08-23 14:51 评论0 收藏0
「前端面试题系列6」理解函数的柯里化

摘要：原题如下写一个方法，当使用下面的语法调用时，能正常工作这道题要考察的，就是对函数柯里化的理解。当参数只有一个的时候，进行柯里化的处理。这其实就是函数柯里化的简单应用。 showImg(https://segmentfault.com/img/bVbopGm?w=620&h=350); 前言这是前端面试题系列的第 6 篇，你可能错过了前面的篇章，可以在这里找到： ES6 中箭头函数的...

liaorio 2019-08-23 15:15 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

pumpkin9 2019-08-23 17:12 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

Carson 2019-07-31 10:21 评论0 收藏0