有人可以解释一下 javascript 中的这个箭头 function 吗？

Question

这是代码：

const createI18n = (config) => ({
    locale: ref(config.locale),
    messages: config.messages,
    $t(key) {
        return this.messages[this.locale.value][key]
    },
})

locale是 object 还是 object 的财产？

我是 javascript 的新手，我真的很难理解这个箭头 function。

Answer 1

这与箭头函数无关。

locale是 object 的属性名称。

该属性的值是另一个 object（其上有一个名为value的属性）。

Answer 2

为了更好地理解这里发生了什么，您可以查看一个普通的 function 等效项：

    function createI18n(config){
        return {
           locale: ref(config.locale),
           messages: config.messages,
           $t(key) {
              return this.messages[this.locale.value][key]
           }
        }
}

所以基本上你是从箭头 function 返回一个 object。 您还使用了箭头 function 的简写版本，它省略了 return 关键字。

所以这两个也相当于上面的一个

const createI18n = (config) => ({
    locale: ref(config.locale),
    messages: config.messages,
    $t(key) {
        return this.messages[this.locale.value][key]
    },
})

const createI18n = (config) => {
/* you could do some operations here, but not in the shorthand version */
return {
    locale: ref(config.locale),
    messages: config.messages,
    $t(key) {
        return this.messages[this.locale.value][key]
    },
  }
}

写function只是一种更方便的方式。

更新：结果 object 看起来像这样：

{
 locale: //some value,
 messages: //some other value,
 $t: // function
}

更新 2：您可以重写您的 function 以在控制台中观察结果。

const createI18n = (config) => {
const result = {
     locale: ref(config.locale),
     messages: config.messages,
     $t(key) {
         return this.messages[this.locale.value][key]
     },
 }
 console.log(result);
 return result
}