时间戳

首页 > 解决方案 > 我是否以字符串形式分配对函数或函数的引用？

javascript - 我是否以字符串形式分配对函数或函数的引用？

问题描述

将函数处理程序分配给变量让我相信我的变量现在是对我的函数的引用。虽然这一切看起来都很好，但为什么我可以将一个字符串与我的“引用”连接起来，为什么当我将“引用”写入屏幕时会反映这种连接？

为什么我的函数引用既被处理又被写成字符串？

引用和类型的幕后发生了什么？ 

var x = tester;

document.getElementById("test_button").onclick = x;

document.getElementById("test_p").innerHTML += (x + "<br>");
x += "Did I just concatenate a string?";
document.getElementById("test_p").innerHTML += (x);

function tester() {
  document.write("Hello World!");
}
<button id="test_button">Press Me</button>
<br>
<p id="test_p"></p>

我将引用分配为按钮的 onclick，并且该函数仍按预期执行。

[Press Me] 
function tester() { document.write("Hello World!"); }
function tester() { document.write("Hello World!"); }Did I just concatenate 
a string?

上面是输出，按下按钮时"Hello World!"会写入屏幕。

标签： javascript

解决方案

为什么我可以将一个字符串与我的“参考”连接起来

因为 JavaScript 在将运算符应用于运算符不支持的数据类型的值时会执行类型转换。连接运算符 ( +) 没有为函数定义，因此函数首先转换为字符串。
用户定义函数的字符串表示是它的源代码。

为什么当我将“参考”写入屏幕时会反映这种连接？

因为x += y(and .innerHTML += y) 与 相同x = x + y。您正在执行字符串连接并将新值（字符串）分配回x( .innerHTML)。x用于保存一个函数，在该操作之后它保存一个字符串。

为什么我的函数引用既被处理又被写成字符串？

它不是。当您这样做（或）时， 的值document.getElementById("test_button").onclick不会改变。x += ....innerHTML += ...

当你做了

document.getElementById("test_button").onclick = x

x您分配了to的当前值的副本element.onclick。此时的值x是对函数的引用。

当您这样做时，x += ...您将新值分配给x，但这不会更改onclick属性的值。

我们从

                        +---------------+
                        |               |
x: ref ---------------->|function tester|
                        |               |
                        +---------------+

分配给.onclick我们之后

                                +---------------+
                                |               |
x: ref ------------------------>|function tester|
                                |               |
                                +---------------+
                                        ^        
                                        |        
element.onclick: ref  ------------------+

在将连接的字符串分配给x我们之后

                                          +---------------+
                                          |               |
                                          |function tester|
                                          |               |
x: string "function tester()...."         +---------------+
                                                  ^        
                                                  |        
element.onclick: ref  ----------------------------+

引用和类型的幕后发生了什么？

参考文献在这里与此没有任何关系。JavaScript 中的对象是引用类型值，但它不像其他语言那样可以访问引用或被引用的值。这一切都发生在幕后。

推荐阅读