Question

const createUser = ({ userName, avatar }) => ({
  userName,
  avatar,
  setUserName (userName) {
    this.userName = userName;
    return this;
  }
});
console.log(createUser({ userName: 'echo', avatar: 'echo.png' }));
/*
{
  "avatar": "echo.png",
  "userName": "echo",
  "setUserName": [Function : setUserName]
}
*/

我正在阅读有关工厂函数的信息，但偶然发现了这些代码片段，但我不理解函数表达式。我不知道这是物体还是IIFE。并且我不明白为什么它返回属性“ setUserName”：[Function setUserName]？

const createUser = ({ userName, avatar }) => ({
  userName,
  avatar,
  setUserName (userName) {
    this.userName = userName;
    return this;
  }
});
console.log(createUser({ userName: 'echo', avatar: 'echo.png' }));
/*
{
  "avatar": "echo.png",
  "userName": "echo",
  "setUserName": [Function : setUserName]
}
*/
```js

Answer 1

要了解这一点，我们首先删除语法糖。第一个速记对象定义：

const createUser = ({ userName, avatar }) => ({
  userName: userName,
  avatar: avatar,
  setUserName: setUserName (userName) {
    this.userName = userName;
    return this;
  }
});

接下来，我们删除破坏：

const createUser = (data) => ({
  userName: data.userName,
  avatar: data.avatar,
  setUserName: setUserName (userName) {
    this.userName = userName;
    return this;
  }
});

最后，我们删除了箭头函数的简写形式：

const createUser = (data) => {
  return {
    userName: data.userName,
    avatar: data.avatar,
    setUserName: setUserName (userName) {
      this.userName = userName;
      return this;
    }
  };
}

我们也可以将箭头功能替换为普通功能，但这会稍微改变行为（在这种情况下并不重要）：

function createUser (data) {
  return {
    userName: data.userName,
    avatar: data.avatar,
    setUserName: setUserName (userName) {
      this.userName = userName;
      return this;
    }
  };
}

现在很容易理解这是什么：这是一个功能

获取一个参数，该对象是具有属性userName和avatar的对象
返回一个包含3个属性的对象
- userName和avatar的值与传递的参数相同
- 和setUserName是一个带有参数的函数，将对象的userName属性设置为该参数，然后返回该对象。

所以这既不是对象也不是IIFE。这是一个返回对象的函数。

在该新对象上，您具有函数setUserName。因此，如果您像这样使用createUser函数：

const myUser = createUser({ userName: 'echo', avatar: 'echo.png' });

那你就可以做

myUser.setUserName('BlaBla');

有效等同于

myUser.userName = 'BlaBla';

但是，由于它return this，您可以将其嵌套：

myUser.setUserName('One').setUserName('Two');

这不是很有意义。但是，如果您要定义另一个函数，例如setAvatar，则可能会有用

myUser.setUserName('One').setAvatar('One.jpg');

代替

myUser.userName = 'One';
myUser.avatar = 'One.jpg';

Answer 2

什么是箭头功能？ CoffeeScript（转编译语言）中的箭头函数（也称为“胖箭头”函数）是用于编写函数表达式的更简洁的语法。他们使用了一个新令牌=>，看起来像一个粗箭头。箭头函数是匿名的，并会更改其绑定函数的方式。

箭头函数使我们的代码更简洁，并简化了函数作用域和this关键字。它们是单行微型函数，其工作方式与Lambdas（在其他语言，例如C＃或Python）中非常相似。（另请参见JavaScript中的lambda）。通过使用箭头函数，我们不必键入function关键字，return关键字（在箭头函数中隐含）和大括号。

MDN

我不了解此代码段的语法

2 个答案: