请教一个 js 箭头函数的基础问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1407 天前的主题，其中的信息可能已经有所发展或是发生改变。

本意是想做一个判断，如果 this.goodId == 1，那么就获得一个 'a.json' 的本地 url 字符串；如果 this.goodId 是别的值，那么就拿别的字符串。

现在的问题是，这么写：

var url = ''
      url = () => {
          if(this.goodId == 1){
              return 'json/laptop.json'
          } else if (this.goodId == 2) {
              return 'json/mobile.json'
          }
      }

好像不太行。url 我用 console.log 调用后显示它是个函数，而并不是一个字符串

所以能通过箭头函数获得字符串的返回值吗？推荐这样做吗？（本意是通过箭头函数避免 var that = this 这种写法，这么写代码能跑起来）

goodid

this

字符

url

32 条回复 • 2021-02-03 21:48:22 +08:00

DrakeXiang

2021-02-03 01:30:36 +08:00

建议看一下 this 、箭头函数和函数表达式的相关知识，你这里 url 先赋值字符串，后面又赋值箭头函数，然后你还想通过 return 来改变 url 的值。。。哪儿哪儿都不对啊，简单改的话是这样

```javascript
const getJson = () => goodId === 1 ? return 'json/laptop.json' : 'json/mobile.json';
const url = getJson();
```

liyang5945

2021-02-03 01:30:51 +08:00

你把 url 定义成一个函数了，函数必须要执行才能有返回值啊，console.log(url())，你看看是啥

Biwood

2021-02-03 01:34:18 +08:00

不如用 Map 来写：
const MAP_URL = { url_1: 'json/laptop.json', url_2: 'json/mobile.json' };
const url = MAP_URL[`url_${this.goodId}`];

非要用函数的话，可以用立即执行函数：
url = (function(id){
if(id == 1){
return 'json/laptop.json'
} else if (id == 2) {
return 'json/mobile.json'
}
})(this.goodId)

其实三元运算符也可以：
var url = (this.goodId == 1) ? 'json/laptop.json' : (this.goodId == 2) ? 'json/mobile.json' : '';

Rocketer

2021-02-03 02:27:48 +08:00

楼上没有解决楼主的本意（避免 var that = this ）

楼主需要这么理解这件事，首先看你的主体：
```
() => {
if(this.goodId == 1) {
return 'json/laptop.json'
} else if (this.goodId == 2) {
return 'json/mobile.json'
}
}
```
这明显是个匿名函数。然后你把这个匿名函数赋给了 url，于是 url 就指向了一个函数。

这是 JavaScript 最重要的一个概念——一切皆对象。函数也是对象，所以也能赋值给识别符（俗称变量名）。

但楼主想要的不是这个函数，而是函数的返回值，所以你得让函数执行一下（套上括号，后面再加一对括号就行了）。
```
(() => {
if(this.goodId == 1) {
return 'json/laptop.json'
} else if (this.goodId == 2) {
return 'json/mobile.json'
}
})();
```
然后再赋值就是你想要的字符串了。

另外，既然你用箭头函数了，那就最好按 ES6 的标准写，别用 var 了。优选 const，const 不行就 let 。
完整代码如下：
```
let url = '';
url = (() => {
if(this.goodId == 1) {
return 'json/laptop.json'
} else if (this.goodId == 2) {
return 'json/mobile.json'
}
})();
```

wunonglin

2021-02-03 02:51:48 +08:00

你这是什么鬼啊。。

```
const url = () => {
switch(this.goodId){
case 1:
return 'json/laptop.json'
case 2:
return 'json/mobile.json'
default:
return ''
}
}
```

这样不就行了？

musi

2021-02-03 05:25:23 +08:00 via iPhone

你把箭头函数换成普通函数这样写 URL 的值也是个函数吧，你这又不是 IIFE 难道系统会自动帮你调用函数？

msg7086

2021-02-03 06:08:23 +08:00

箭头函数的返回值当然就是箭头函数()啦。你不加()当然就没有调用函数了。

sutra

2021-02-03 07:48:21 +08:00

```
var url = ''
var goodId = 1;

url = (() => {
if(goodId == 1){
return 'json/laptop.json'
} else if (goodId == 2) {
return 'json/mobile.json'
}
})()

console.log(url)
```

randyo

2021-02-03 08:03:48 +08:00 via Android

箭头函数也是函数，需要调用的

SxqSachin

2021-02-03 08:30:41 +08:00

```
const url = (() =>{ ... })()
```

meepo3927

2021-02-03 08:50:09 +08:00

先别管箭头函数了，了解一下 javascript 中的函数的定义和调用吧。

var url = '';
url = () => {};

上面这个写法是比较迷的，看不出来要干啥。

vivipure

2021-02-03 09:08:19 +08:00

你就不能 const url = this.goodId == 1? '':'' ,至于 this 问题不是在这里进行处理，而是取决于你的调用

cczeng

2021-02-03 09:32:13 +08:00

用 gettter 和 setter，前提是 url 是一个对象的属性

不然调用 url 的时候 `url() ` 而不是 `url`

TanMusong

2021-02-03 09:40:53 +08:00

()=>{xxx}改成
(()=>{xxx})()

volvo007

2021-02-03 09:50:48 +08:00

@DrakeXiang @wunonglin 人菜瘾大是这样的哈哈 😂

@liyang5945 看了看了，用 typeof 看是个函数，然后大概也猜到这玩意返回的是一个函数，看手册也说是个匿名函数，但是后面要怎么在代码里直接调用就懵了

@Biwood map 这个好，学习了，特别是 $ 那个用法有点 bash 的味道啊。三元运算符主要分支会很多，不止两个。虽然三元套三元可以实现三个，不过更多的话就麻烦了

@Rocketer 大哥你讲的是最清楚的，都明白了。最近赶鸭子上架，js 没怎么看就直接上 vue 了。回头我找个新一点的 es6 课补补。B 站的一个课 500 多节，我看到 200 多还在讲 es5，看得我崩溃……

Elethom

2021-02-03 09:54:02 +08:00 via iPhone

看了楼上的回复，我觉得自己该反思一下为什么和这么多菜鸡竞争还找不到好工作了。

volvo007

2021-02-03 09:54:37 +08:00

@TanMusong 昨晚看了官方手册，但是通篇都在讲箭头函数怎么写，各种茴的写法，没有涉及到传值的例子（这个估计会放到函数里面去讲吧）。我尝试过在参数括号前后加 () 但是还是报错，报错内容都一样的（废话），没想到是需要在最后再加一个括号调用一下 😂

ryncv

2021-02-03 09:58:28 +08:00

```javascript

bnrwnjyw

2021-02-03 10:02:14 +08:00

这楼把我看懵了，为什么这么多半吊子指点别人啊。。。

楼主的问题是基础不牢，连*函数*需要被*调用*才能获得返回值都搞不清楚，需要好好补补 js 基础。

TanMusong

2021-02-03 10:11:09 +08:00

@bnrwnjyw 也不是吧，楼主就问为啥 url 是个 function，怎么才能获得返回值😂。就好像有个人问 1+1 等于几，要我我就不会说他怎么 1+1 都不会，有没有上过学，家长有没有交过之类的，告诉他等于 2 不就行了😂

abc635073826

2021-02-03 10:14:10 +08:00

你已经把 1+1 写好了，就差＝了

GopherTT

2021-02-03 10:31:18 +08:00

先补补基础不然天天问

bnrwnjyw

2021-02-03 10:31:53 +08:00 via iPhone

@TanMusong 你的回复显然不是我说的那些半吊子。

luogege

2021-02-03 10:38:38 +08:00

你得先明白 url 他被你赋值成了个函数，url （）才会 return 东西

KouShuiYu

2021-02-03 10:44:15 +08:00

获得箭头函数的返回值
```
let url = (()=>{
return 'hello world';
})()
```

cw2k13as

2021-02-03 10:44:25 +08:00

emmm，url 你得调用啊 url(),goodId 你最好作为参数传进去啊

darknoll

2021-02-03 10:46:27 +08:00

百度下 IIFE

nekochyan

2021-02-03 11:45:30 +08:00

箭头函数也是一个函数，你函数都没执行，哪来的返回值，可以立即执行一次获取返回值再赋值
```
var url = (()=>{
if(this.goodId == 1){
return 'json/laptop.json'
} else if (this.goodId == 2) {
return 'json/mobile.json'
}
})()
```

KuroNekoFan

2021-02-03 12:07:29 +08:00

你需要 this free style

no1xsyzy

2021-02-03 12:14:46 +08:00

@volvo007 500 多节到底是在讲什么？疯了吧

就算不知道 IIFE，给它个名字然后再 call
getURL = () => {...}
url = getURL()
总行吧

LiubaiQ

2021-02-03 12:17:01 +08:00

我理解的
1. 给 url 赋值时还有额外的逻辑；
2. 希望 this 永远指向其初始定义时的 Context;
3. 希望通过直接赋值这样的语法来调用一个 func ；

可以考虑 ES6 Class 及其 setter/getter 语法糖

```javascript
class c {
...
set urlSetter = (v) => {
this.url = v;
}

get urlGetter = (v) => this.url
...
}
```

fayetitus

2021-02-03 21:48:22 +08:00

https://github.com/tc39/proposal-do-expressions
也许你需要这个提案。
不过 do expressions 才 stage1 。在没有 do expressions 的时候，看能不能接受 IIFE，如果不接受，那就……不优雅地写，爱咋写都行。