javascript - 为什么cat.setName = setName和setName.apply pig ['Babe']的输出相同。即使是为什么必须将它们包含在代码中

大家好，我是咖啡新手，所以对此我感到困惑。我正在跟踪一本书“ https://www.montecassino.org/images/data/attachments/0000/0014/CoffeeScript.pdf”，其中有一个如下代码示例

setName = (name) ->
    @name = name
    console.log(@name)
    console.log(name)

cat = {}
cat.setName = setName
cat.setName "Manu"
console.log(cat.name)

pig = {}
setName.apply pig, ['Babe']
console.log(pig.name)

在上面的代码中，我不了解发生了什么。有一个为对象分配名称的功能。但是cat.setName = setName和setName.apply猪['Babe']的目的和含义是什么。这些行的含义相同，那么它们之间的区别是什么。很抱歉，我想问一个愚蠢的问题，但我完全感到困惑。任何帮助，将不胜感激。谢谢

最佳答案

两个片段（一个关于cat和一个关于pig）都在完成同一件事。他们正在为两个不同的对象调用setName函数。区别在于，在cat示例中，setName函数成为cat对象的一部分，而在pig示例中，setName函数应用于pig，但实际上并没有成为pig对象的一部分。

可能更清楚地了解是否将其分解成几部分，并说明每部分正在做什么。

第一部分定义了一个函数，由setName引用：

setName = (name) ->
  @name = name
  console.log(@name)
  console.log(name)

如您所见，它采用单个参数name。如果您不熟悉CoffeeScript，则@name = name可能会使您感到困惑。 CoffeeScript中的@符号与JavaScript中的this等效。在JS中，它是this.name，但是在CS中，快捷方式是@name。调用setName函数时，@（或this）将引用从中调用setName函数的上下文。

cat = {}
cat.setName = setName
cat.setName "Manu"
console.log(cat.name)

在上面的块中，首先创建一个名为cat的空对象。最初没有功能或属性。然后，将setName函数添加到上面定义的函数中。

可以这样写：

cat = {}
cat.setName = (name) ->
  @name = name
  console.log(@name)
  console.log(name)

但是由于已经定义了setName函数，因此我们可以简单地将cat.setName设置为它。

调用cat.setName "Manu"时（或者写为cat.setName("Manu")，CoffeeScript中的括号是可选的），@中的setName指的是setName所属的对象。 setName（适当地）在name对象上设置一个名为cat的属性。如果您要访问console.log(cat)，则会看到以下内容：

{ setName: [Function], name: 'Manu' }

我们使用了一个名为cat的空对象，然后为其提供了一个名为setName的函数，然后为其命名为setName，该函数为其设置了一个属性：name。

pig示例具有相同的结果，但是语法略有不同：

pig = {}
setName.apply pig, ['Babe']
console.log(pig.name)

在此示例中，我们在apply上调用setName函数（该函数本身）。调用setName.apply pig, ['Babe']会将函数setName应用于带有数组参数的对象pig。通过将pig作为第一个参数传递给apply，我们实际上是在告诉apply：在setName内部，每当您看到@时，我们实际上是在谈论pig。

apply的第二个参数是调用setName时要使用的参数数组。此数组中只有一个元素，该元素与setName接受的参数数量相匹配。 ['Babe']是仅具有一个参数：'Babe'的参数数组。

此示例与cat示例之间的重要区别在于，我们没有将setName纳入pig对象的一部分。实际上，console.log(pig)会产生

{ name: 'Babe' }

看到？没有setName功能。我们仅将该函数应用于pig对象。您会在猫的示例中注意到行cat.setName = setName －我们没有为pig进行此操作。

您可以参阅Mozilla的apply JS函数文档以获取更多背景信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FFunction%2Fapply

值得一提的是，我很少看到在生产CoffeeScript代码中使用apply的示例。如果您真的很想了解这一点，那么值得继续前进，以后再去回顾它。