javascript - 我是在分配对函数的引用还是字符串形式的函数？

Question

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

为什么我的函数引用被处理和写入为字符串？

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

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!" 被写入屏幕。

Answer 1

why can I concatenate a string with my "reference"

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

why is this concatenation reflected when I write my "reference" to the screen?

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

Why is my function reference being both handled and written as a string?

不是。 document.getElementById("test_button").onclick 的值当你做 x += ... 时不会改变(或 .innerHTML += ... )。

当你做的时候

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

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

当你做 x += ...您为 x 分配了一个新值，但这不会改变 onclick 的值属性(property)。

我们从

开始

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

赋值给.onclick后我们有

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

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

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

What is going on behind the scenes with references and type?

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