Javascript函数调用和绑定

Question

我有以下部分代码：

var person = {
  name: "Brendan Eich",
  hello: function(thing) {
    console.log(this.name + " says hello " + thing);
  }
}

var bind = function(func, thisValue) {
  return function() {
    return func.apply(thisValue, arguments);
  }
}

var boundHello = bind(person.hello, person);
boundHello("world") // "Brendan Eich says hello world"

这里，代码会在控制台打印出文本

Brendan Eich 向世界问好

如果我接受绑定变量赋值并将其更改为：

var person = {
  name: "Brendan Eich",
  hello: function(thing) {
    console.log(this.name + " says hello " + thing);
  }
}

var bind = function(func, thisValue) {
  return func.apply(thisValue, arguments);
}

var boundHello = bind(person.hello, person);
boundHello("world") // "Brendan Eich says hello world"

那么结果就是

Brendan Eich 说你好 function(thing) { console.log(this.name + "打招呼" + thing); }

谁能解释一下为什么会发生这种情况以及 bind 中的 2 个嵌套 return 函数到底是什么？

它们究竟是如何工作的？

Answer 1

我会尽力解释。在第一个示例中，您的 bind 定义是一个 function，它有两个参数，理想情况下是一个 函数 作为 第一个参数（我们称之为 THE_FUNC) 和一个 object 作为 第二个参数（我们称之为 THE_THIS_ARG）将用作该函数的 thisArgs。

现在，这个bind 定义返回一个function，它显式不带参数（但隐式可以带任何参数），当调用此函数时，它将返回调用@987654321 的评估@ on THE_FUNC 使用 THE_THIS_ARG 作为 THE_FUNC 的 this 的值，并使用收到的 arguments（我们称之为 THE_ARGS ) 作为参数传递给 THE_FUNC。

对于您的特定示例，设置将是这样的：

THE_FUNC => person.hello

THE_THIS_ARG => person

THE_ARGS => ["world"]（类似数组的对象）

最后boundHello("word") 被转述为（不完全是）这样的：

person.hello.apply(person, ["world"]);

也许，下一个带有一些调试的示例可以帮助您比我的解释更好地理解：

var person = {
    name: "Brendan Eich",
    hello: function(thing)
    {
        console.log(this.name + " says hello " + thing);
    }
}

var bind = function(func, thisValue)
{
    console.log("func is: ", func);
    console.log("thisValue is: ", thisValue);
    return function()
    {
        console.log("Arguments are:", arguments);
        return func.apply(thisValue, arguments);
    }
}

var boundHello = bind(person.hello, person);
boundHello("world") // "Brendan Eich says hello world"

同样的解释对于第二个例子也是某种有效的。但在这种情况下，bind 不会像上一个示例那样返回函数，而是使用此设置调用 apply：

THE_FUNC => person.hello

THE_THIS_ARG => person

THE_ARGS => [person.hello, person]（类似数组的对象）

所以，当您调用 bind(person.hello, person) 时，会被转述为：

person.hello.apply(person, [person.hello, person]);

您可以看到person.hello 将是person.hello() 方法接收的thing 参数，这就是打印函数定义来代替thing 参数的原因。

var person = {
    name: "Brendan Eich",
    hello: function(thing)
    {
        console.log(this.name + " says hello " + thing);
    }
}
    
var bind = function(func, thisValue)
{
    console.log("Arguments are:", arguments);
    return func.apply(thisValue, arguments);
}

var boundHello = bind(person.hello, person);
//boundHello("world") // "Uncaught TypeError: boundHello is not a function"

Answer 2

在您的第二个版本中，当您调用 bind() 时，您将调用 func，并返回函数调用的值。

它正在打印hello 函数的源代码，因为arguments 是类数组对象[person.hello, person]，所以您实际上是在调用person.hello(person.hello, person)，这会将thing 设置为person.hello , 并将函数转换为字符串以进行连接会返回其源代码。

要绑定一个函数，你必须返回一个可以稍后调用的闭包。这在您的第一个版本中通过返回一个匿名函数来完成。