Question

所以我很好地掌握了大多数静态类型语言，主要是C和C ++。但是当我进入javascript时，我注意到一些令我失望的东西。

我学会了编写这个函数来与内部HTML进行交互：

document.getElementById("SomeHTML").onclick = function(){



    document.getElementById("AnotherHTML").innerHTML = "<p> Joe has a cat </p>";

}

这一切都很好，但有一个问题。我应该如何重用它并使其可读？...来自C ++，我总是被教导以这种方式编写代码：

function MyFunc()
{
           document.getElementById("AnotherHTML").innerHTML = "<p> Joe has a cat </p>";
}

document.getElementById("SomeHTML").onclick = MyFunc();

后一个代码更干净（至少对我来说）并且我可以重用该功能，但它不起作用......我能够在每种编程语言中编写这种方式但在javascript中它会产生错误。我不知道自己错过了什么，我知道它很简单。有人可以帮我理解为什么我不能用这种方式编写javascript函数吗？或者，如果我可以请告诉我如何，因为我更喜欢后者而不是前者。提前完成。

Answer 1

你很幸运！后面的代码也适用于JavaScript。

下面，我概述了使用更熟悉的语法实现此目的的三种不同方法。

// The function to call
function MyFunc(){
  alert('Working!');
}

// Option 1 (Link 1)
document.getElementById("one").addEventListener("click", MyFunc);

// Option 2 (Link 2)
document.getElementById("two").onclick = MyFunc;

<a href="#" id="one">Link 1</a><br>
<a href="#" id="two">Link 2</a><br>
<a href="#" id="three" onclick="MyFunc()">Link 3</a>

Answer 2

你的功能不太可重用，对我来说我会用另一种方法

// Original version
function MyFunc() {
    document.getElementById("AnotherHTML").innerHTML = "<p> Joe has a cat </p>";
}

document.getElementById("SomeHTML").onclick = MyFunc();

// Function Generator
function MyFunc_generator(element, html_content) {
    return function() { 
        element.innerHTML = html_content;
    }
}

myfunc = MyFunc_generator(    
    document.getElementById("AnotherHTML"),
    "<p> Joe has a cat </p>"
}

document.getElementById("SomeHTML").addEventListener("click", myfunc);

代码有很多不同之处。我们可以从比较原始MyFunc函数和MyFunc_generator函数开始。

第一个没有return语句，因此赋值 document.getElementById("SomeHTML").onclick = MyFunc();会为值undefined分配html元素的onclik处理程序，其id为＆＃34; SomeHTML＆＃34;。

＆＃34; MyFunc_generator＆＃34; function是一个Higher order function，一个函数返回一个函数作为他的评估结果。

生成器函数的执行结果是创建一个具有实数值的专用函数，而不是通用值。

示例中的赋值将创建一个函数（匿名）并为其指定名称myfunc。那个功能将等于你的。

您可以更改生成器的参数，以创建具有不同目标和/或不同内容的类似功能。

显然，在这种简单案例中的努力不值得结果，但如果你必须描述的策略非常复杂，那么收益就会增加。

最后一点。处理函数对事件的赋值是不同的。在javascript中，首选方式是使用addEventListener

为什么JavaScript函数以这种方式工作？

2 个答案: