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函數的執行順序

回答

相關問題