Javascript 进阶 9-3 常见问题

这一篇教学要来探讨的是关于箭头函式的常见问题

以下会列出几个比较常见的问题来讨论~

1. 回传的问题

我们先前有说过，当我们想要箭头函式直接回传一个值的时候，可以省略大括号{}，直接指向该值:

const arrFn = () => 1;console.log(arrFn());

很明显他会回传 1 当作结果。

但如果我们今天要回传一个物件的时候~

const arrFn = () => { data: 1 };console.log(arrFn());

他会说是 undefined ~原因在于这个物件的{}被当作是箭头函式的Block，而非物件实字的外层。

要解决这样的问题，只要再物件外层包上()就可以了!

const arrFn = () => ({ data: 1 });console.log(arrFn());

2. 逻辑运算子的连用

let num = 0;const numFn = num || function () { return 1; }console.log(numFn());

以上的状况我们知道 num 是 Falsy ，所以一定会回传后面的函式，之后执行回传的结果是 1 这样应该没甚么问题~

但如果改成箭头函式的话呢?

let num = 0;const numFn = num || () => 1;console.log(numFn());

就会报错!!

原因就在箭头函式在接逻辑运算子的时候，一样需要用 () 隔开。

let num = 0;const numFn = num || (() => 1);console.log(numFn());

千万要注意喔!

3. This 的指向

虽然上一篇文章有提到，但是还是在特别提醒一次:

const person = {    myName: '小明',    callName: () => {        console.log(this.myName);    }};person.callName();

以这样的状况进行箭头函式的调用，这个时候的 this 就会指向全域的物件 window。

所以要改善这样的情况，只要把箭头函式改成传统函式就可以了~!

const person = {    myName: '小明',    callName: function () {        console.log(this.myName);    }};person.callName();

而这样的错误最常发生在跟框架一起使用的时候:(以Vue为例)

const app = new Vue({    data: {        num: 1    },    created: function () {        // Vue 的元件生命週期一开始会执行的阶段        console.log(this.num);    }});

这边 created 如果是使用传统函式的话，就可以正确的取到值，但是如果是使用箭头函式的话则会取到 undefined 。

4. 利用箭头函式来做为原型链上的方法

甚么意思呢，我们来看看实际上的程式码~

const Fn = function (a) {    this.name = a;}Fn.prototype.arrFn = () => {    return {        to: this,        name: this.name    }}const newInstance = new Fn('函式');console.log(newInstance.arrFn());

很明显，虽然我们可以找到这个用箭头函式新增的方法，执行起来也没问题，但因为是箭头函式，里面 this 的指向还是指向到全域的物件 window 上，所以无法达到预期的效果。

最快的修正方法还是建议使用传统函式替代。

这篇文章就先介绍到这边，如果没有问题的话就继续往下一篇文章迈进吧!汪汪~