Javascript -调用函数

Javascript - Calling a function

本文关键字：函数 调用 Javascript      更新时间：2023-09-26
<div id='dependent'>
<input type="button" value="Add" id='btn' onclick='addfunction()' />
</div>
<script type="text/javascript">
    var a = 1;
    var b = 1;
    var c = 1;
    function addfunction() {
        var c1 = document.createElement('input');
        c1.type = "checkbox";
        c1.id = "a" + a++;
        var c2 = document.createElement('input');
        c2.type = "checkbox";
        c2.id = "b" + b++;
        var c3 = document.createElement('input');
        c3.type = "checkbox";
        c3.id = "c" + c++;
        var c4 = document.createElement('br');

        document.getElementById("dependent").appendChild(c1);
        document.getElementById("dependent").appendChild(c2);
        document.getElementById("dependent").appendChild(c3);
        document.getElementById("dependent").appendChild(c4);
        // c1.onclick = dep();
        // function dep() { alert(this.id); }
        c1.onclick = function () { alert(this.id); };
    }
</script>

当我像这样调用函数时，

c1.onclick = function () { alert(this.id); };

按预期工作。例如，当我单击复选框时，会出现带有其id的警报。

但是如果我以这种方式调用函数，

c1.onclick = dep();
function dep() { alert(this.id); }

警报出现，当我点击"添加"按钮(在调用addfunction())。为什么?

因为你正在执行dep()并将返回值赋给c1.onclick。

如果你想给函数本身赋值，不要叫它:

c1.onclick = dep;

您正在传递函数调用的结果而不是对您需要在单击事件时异步调用的函数的引用

所以改变这个

c1.onclick = dep(); 


c1.onclick = dep;

原因是dep()是函数调用表达式。所以你实际上在这里做的是调用函数dep()，然后将结果(undefined)分配给c1.onclick。你应该这样做:

function dep() { alert(this.id); }
c1.onclick = dep;

你不想把调用dep() (undefined)的结果赋值给onclick。你应该给函数本身赋值

 c1.onclick = dep;

代码

   c1.onclick = dep();

实际上调用了deep .见括号??。这就是它们所做的，它们实际执行代码。匿名函数似乎是可行的方法。注意this这个词。在

   c1.onclick = function () { alert(this.id); };

this可以引用函数本身，如果你"命名"它。既然您已经引用了c1, c2和c3，您可以使用各种解决方案，例如:

c1.onclick=function() {alert(c1.id);}

或

function click_handler(v_param) {alert(v_param.id);}
c1.onclick=function() {click_handler(c1);}
如果你试图把JS中的

作用域看作是C或c++之类的语言，它可能会很棘手。

相关文章：