javascript函数的执行顺序

我回到了基础，以更好地理解JavaScript。我有一个测试网站。这里是我的代码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!。为什么？我错过了什么？

感谢

来源

2014-03-31 slevin

尝试小提琴，一切正常http://jsfiddle.net/X3vLP/1/ –

@PratikJoshi谢谢帕特里克，但是我点看到另一个'你好世界'！在页面加载之后。如果您提供解释为什么会发生这种情况，那也是很好的。谢谢 – slevin

@PratikJoshi您必须将jsFiddle的加载机制从'onLoad'更改为'No wrap - in ' – friedi

-3

可能是你缺少你的论点

<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>

来源

2014-03-31 10:48:24 Coder

这并不能解决问题。现在'saySomething'函数立即被触发，而不是'load'事件。 – friedi

@Coder啊哈！所以它是相反的。 'onload'中的函数不起作用。说得通。谢谢。理解基础的方法。有什么不对吗？ – slevin

<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>

来源

2014-03-31 10:56:07

的问题是，一旦你附加saySomething函数作为事件侦听器窗口的Load事件是以后在事件发生时用不同的论点进行调用。其实参数是一个事件对象，这就是为什么你看到[object Event]警报。

虽然我不知道代码的真正目的，但如果要提醒"Hello World!"字符串，并且不需要事件参数与触发事件一起提供，则可以绑定saySomething的第一个参数功能"Hello World!"：

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

编辑：Function.prototype.bind创建其中this和所有的新功能的参数可以“绑定”到特定值的新功能。注意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。

来源

2014-03-31 10:56:56 simich

我的代码的目的只是测试并更好地理解JavaScript行为。你能否澄清一下这条线的确切含义？ 'saySomething.bind（窗口，“Hello World！”）;'。谢谢 – slevin

当然，我编辑了我的答案以包含更多信息。我希望它有帮助。 – simich

对不起再次打扰，我不确定我是否理解使用'window'作为'this'的值。我冲你提供的链接，但仍然没有真正了解正在发生的事情。谢谢你。 – slevin

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

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

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

来源

2014-03-31 10:57:16 Stalinko

这是因为您将此函数添加为事件侦听器。事件监听器函数的第一个参数是一个事件对象。这就是你得到[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);

来源

2014-03-31 10:59:19 friedi

javascript函数的执行顺序

回答

相关问题