JavaScript 绑定(bind)

Question

如有帮助，谢谢。代码来源http://ejohn.org/apps/learn/#84

1) 在下面程序的第 3 行中，它说 return context[name] 这是什么意思？我猜这意味着 name 由于 apply 函数而绑定(bind)到 context 吗？对吗？

2) 如果我在 1 中的猜测是正确的，为什么它使用 [] 括号？那只是语法吗？当我看着它时，它让我想到数组还是对象？

3) 当它说 apply(context, arguments) is arguments not the same as name or is arguments both context 和 name 在一起？换句话说，在调用语言中 bind(Button, "click") 是 arguments 只是 "click" 还是它按钮和点击？

4) 我试图通过用这样的参数替换名称来重写第 3 行

return context[name].apply(context, name); 

但它不再起作用了，这引发了问题

a) 如果它返回绑定(bind)到上下文的名称(即上下文 [name])，为什么仅使用 apply(context,name) 还不够？

b) 如果arguments包括name和context，本质上是函数的第三行

return context[name].apply(context, [context, name]); 

c) 如果我在 4(b) 中的假设是正确的，为什么我们实际上必须将上下文传递两次才能将名称绑定(bind)到上下文？也就是说，如果您只写 apply(context, name) 而不是 apply(context,arguments)，我不明白为什么第 3 行行不通

function bind(context, name){ 
  return function(){ 
    return context[name].apply(context, arguments); 
  }; 
} 

var Button = { 
  click: function(){ 
    this.clicked = true; 
  } 
}; 

var elem = document.createElement("li"); 
elem.innerHTML = "Click me!"; 
elem.onclick = bind(Button, "click"); 
document.getElementById("results").appendChild(elem); 

elem.onclick(); 
assert( Button.clicked, "The clicked property was correctly set on the object" );

Click me!

Answer 1

在深入了解具体细节之前了解 JavaScript 对象的基础知识可能会有所帮助。可以使用括号表示法或点表示法(如果它是有效标识符)访问任何 JavaScript 属性。这可能会造成混淆，因为数组也使用这种表示法。假设有一个汽车及其品牌的对象，

var cars = { Ford: 2007, Honda: 2010, BMW: 2011 };

然后我们可以使用点符号或括号符号访问他们的键

cars.Ford     // 2007
cars["Honda"] // 2010

接下来，请记住函数是 JavaScript 中的一等公民。因此，您可以将它们用作普通变量，包括将它们存储为对象属性值、数组等。让我们用实际函数替换前面的 cars 示例中的年份，

var cars = {
    Ford: function() { alert("2007"); },
    Honda: function() { alert("2010"); },
    BMW: function() { alert("2011"); }
};

键 Ford、Honda 和 BMW 仍然可以像前面的示例一样使用点或括号表示法进行访问，使用唯一不同的是这次将返回一个函数而不是整数年。

cars["BMW"] 现在返回一个可以直接调用的函数

cars["BMW"](); // or
cars.BMW();    // or

var name = "BMW"; 
cars[name]();    

这还不是全部。还有两种方法可以执行函数 - 通过 apply和 call . apply 和 call 之间的区别很微妙，但您应该阅读更多有关它们的信息。

最后，arguments 表示一个类似数组的对象，其中包含传递给函数的参数。最好用一个例子来证明这一点，

function whatever() {
    console.log(arguments);
}

whatever(1, 2);                        // [1, 2]
whatever("foo", "bar", 23, [4, 6, 8]); // ["foo", "bar", 23, [4, 6, 8]]
whatever();                            // undefined

在不给函数参数命名的情况下，我们能够记录传递给函数的所有参数。由于它是一个类似于对象的数组，因此可以将每个参数单独访问为 arguments[0]、arguments[1] 等

现在来回答你的问题，

1) in line 3 of the program below, where it says return context[name] what does this mean? Im guessing that it means name is bound to the context as a result of the apply function? Is that correct?

context[name] 类似于上面的 cars['Ford'] 示例。它应该提供一个函数，然后通过对其调用 apply 来调用该函数。调用该函数时，函数内部 this 将引用对象 - context。

2) If my guess in 1 is correct, why does it use the [] brackets? Is that just the syntax. When I look at it, it makes me think array or object?

希望上面已经回答了这个问题。

3) When it says apply(context, arguments) is arguments not the same as name or is arguments both context and name together? to put it another way, in the language of the call bind(Button, "click") is arguments only "click" or is it both button and click?

arguments 与 context 或 name 无关。它只是调用函数时使用的参数列表。希望上面的描述也能解决这个问题。

4) I tried to rewrite line 3 by substituting name for arguments like this

return context[name].apply(context, name);

but it didn`t work anymore

它不起作用，因为 apply 期望第二个参数是一个数组，而你传递给它的是一个字符串。试试 return context[name].apply(context, [name]); 代替。

which raises the questions

a) if it is returning name bound to context (i.e. context[name]), why isn`t it sufficient to just have apply(context,name)?

b) if arguments includes both name and context, is the third line of the function essentially

return context[name].apply(context, [context, name]);

arguments 与上下文或名称无关。希望上面的例子已经解决了这个问题。

c) if my assumption in 4(b) is correct, why would we effectively have to have context passed twice in order to bind name to context? which is to say, I dont understand why line 3 doesnt work if you just write apply(context, name) instead of apply(context,arguments)

上面的答案已经回答了这部分。