javascript - 有关 javascript 回调的详细信息

Question

我对某事感到好奇，想象一下关闭窗口的链接。请参阅下面的代码，并阅读注释:

var a = document.querySelector('a');

//
// Since a.onclick requires a callback I have the following code:
//

a.onclick = function() { window.close() }; // This works fine.
a.onclick = function() { close() }; // This works as well.
a.onclick = () => { close() }; // This also work.
a.onclick = () => close(); // This works.

// But...

a.onclick = window.close; // This doesn't work.
a.onclick = close; // Neither this.

// But, why not?? Since onclick requires a function, and window.close is a 
// function and close is just the shorten way to call window.close?

// However...

a.onclick = close.bind(); // This works fine....

那么各位，既然onclick接收了一个函数，为什么只设置“close”不起作用呢？它应该“注册”函数 close (window.close) 作为该操作的“回调”，并在事件触发时调用它(如 close.call())；

我真的不明白这种行为

Answer 1

这有点棘手。

我们已经习惯于看到 window 包含所有全局变量，以至于我们忘记了 window 本身是一个对象。没错 - 它是代表浏览器窗口的对象。

close 不仅仅是一个函数，而且是 window 对象的一个​​方法(参见:https://developer.mozilla.org/en-US/docs/Web/API/Window/close)。

因此，当您将 close 转换为函数引用时，它会失去与 this(应指向 window)的绑定(bind)。

其他人是偶然工作的:

1. a.onclick = function() { window.close() };

   这是显而易见的。您直接调用该方法，以便它获得正确的 this。

2. a.onclick = function() { close() };

   如果在严格模式下，不属于任何对象的函数将拥有指向全局对象 (window) 或 undefined 的 this。因此，当不在严格模式下时，这将起作用。

3. a.onclick = () => { close() };

   与数字 2 相同的解释。

4. a.onclick = () => close();

   与 3 相同的解释，但不使用可选的 {}。

注意:人们可能会认为 2、3 和 4 是不同的机制，但是虽然箭头函数会影响 this 的行为，但您并没有调用 this.close()。因此只有 close 中的 this 值是重要的。箭头函数不会改变这一点。

请注意，当不在严格模式下时，以下内容也应该有效:

a.onclick = () => { this.close() }

我认为从我之前的解释中可以很明显地看出上述方法为何有效。