Question

我回到基础，以便更好地理解JavaScript。我有一个测试网站。这是我的代码

<html>
<head>
test
</head>

<script type="text/javascript">
function saySomething(message)
{
alert(message);
}

saySomething('Hello world!');

function addLoadListener(fn){
window.addEventListener('load', fn, false);
alert("the previous alert came from onload");
}

addLoadListener(saySomething);


</script>


<body>
<div>blah blah blah</div>
</body>
</html>

所以，有这个函数，saySomething提醒Hello World!。我将其添加到addLoadListener，以便在页面加载期间调用它。直到这一部分工作正常。但之后，在代码运行时再次调用，并警告[object Event]而不是Hello World!。为什么？我错过了什么？

由于

Answer 1

问题在于，一旦将saySomething函数作为事件侦听器附加到窗口的load事件，稍后在事件触发时使用不同的参数调用它。实际上，参数是一个事件对象，这就是为什么你看到[object Event]被警告的原因。

虽然我不知道您的代码的真正目的，但如果您想提醒"Hello World!"字符串并且您不需要触发事件附带的事件参数，您可以将saySomething函数的第一个参数绑定到"Hello World!"：

var boundHandler = saySomething.bind(window, "Hello World!");
addLoadListener(boundHandler);

编辑：Function.prototype.bind创建一个新函数，其中this并且新函数的所有参数都可以被绑定＆＃39;具体的价值观。值得注意的是，bind会创建一个新函数，并保留原始函数。您可以根据需要创建任意数量的原始版本。

如果您致电boundHandler("something else")或boundHandler()，我们仍会提醒"Hello World!"而不是新文字。这就是事件处理代码以后工作的原因。

如果以这种方式创建绑定函数：

function alertThis() { alert(this); }
var boundFn = alertThis.bind("my new this");

alertThis() // "[object Window]" is alerted
boundFn() // "my new this" is alerted

以下是有关Function.prototype.bind的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind。

Answer 2

<script type="text/javascript">
  function saySomething(message)
  {
 alert(message);
 }

 saySomething('Hello world!');

function addLoadListener(fn){
  window.addEventListener('load', fn, false);
alert("the previous alert came from onload");
}

 addLoadListener( function() { saySomething('Hello world!') });


 </script>

Answer 3

当“load”事件发生时，它以这种方式调用你的函数：“saySomething（event）” - 第一个参数是一个事件对象。不是字符串。

所以你必须在代码中改变一些东西。例如：

function saySomething(message)
{
    var msg = typeof message != 'string' ? 'Hello world!' : message; //setting default message
    alert(msg);
}

Answer 4

这是因为您将此函数添加为事件侦听器。事件侦听器函数的第一个参数是一个事件对象。这就是你得到[object Event]的原因。

您可以将邮件绑定到上下文对象。这是解决问题的一种方法：

function saySomething(message) {
    alert(message);
}

function saySomethingListener(message) {
    saySomething(this.message);
}

saySomething('Hello world!');

function addLoadListener(fn) {
    window.addEventListener('load', fn.bind({message: 'Hello world!'}), false);
    alert("the previous alert came from onload");
}

addLoadListener(saySomethingListener);

Answer 5

可能是你错过了你的论点

<html>
 <head>
 test
 </head>

 <script type="text/javascript">
  function saySomething(message)
  {
 alert(message);
 }

 saySomething('Hello world!');

function addLoadListener(fn){
  window.addEventListener('load', fn, false);
alert("the previous alert came from onload");
}

 addLoadListener(saySomething('Hello world!'));


 </script>


  <body>
  <div>blah blah blah</div>
  </body>
  </html>

javascript函数的执行顺序

5 个答案: