須知
1.函數(shù)只有被聲明(var fn=...)后，才能被讀(...=fn return fn)或?qū)?fn())
2.下述中的匿名函數(shù)可以用回調(diào)函數(shù)代替
分析以下代碼中各個函數(shù)被聲明或調(diào)用的順序
setTimeout
先聲明fn,再聲明setTimeout
var fn=function(){
console.log('setTimeout起效果')
}
setTimeout(fn, 1000)
// setTimeout起效果
fn被聲明------>setTimeout被聲明------>setTimeout(fn)被調(diào)用
先聲明setTimeout,再聲明fn
setTimeout(fn, 1000)
var fn=function(){
console.log('qa')
}
//報錯
使用匿名函數(shù)
var ft=function(){
setTimeout(fn, 1000) //只有當(dāng)ft()被調(diào)用時，setTimeout()才被聲明并調(diào)用
}
var fn=function(){
console.log('qa')
}
ft()
//'setTimeout起效果'
ft被聲明------> fn被聲明------>ft()被調(diào)用------> setTimeout被聲明------>setTimeout(fn)被調(diào)用
采用function a(){...}命名方式
setTimeout(fn, 1000) // setTimeout起效果
function fn(){
console.log('qa')
}
onclick
先聲明onclick,再聲明fnclick
var oDiv=document.getElementById("div")
oDiv.onclick=fnclick
var fnclick=function(){
alert('onclick起效果')
}
// 報錯
先聲明fnclick,再聲明onclick
var oDiv=document.getElementById("div")
var fnclick=function(){
alert('onclick起效果')
}
oDiv.onclick=fnclick
//onclick起效果
fnclick被聲明------>oDiv.onclick被聲明
---(按下鼠標(biāo))--->oDiv.onclick(fnclick被調(diào)用)
使用匿名函數(shù)
var oDiv=document.getElementById("div")
oDiv.onclick=function(){
fnclick() //只有當(dāng)oDiv.onclick被調(diào)用時,fnclick才被
}
var fnclick=function(){
alert('onclick起效果')
}
oDiv.onclick被聲明------>fnclick被聲明
---(按下鼠標(biāo))--->oDiv.onclick(fnclick被調(diào)用)
一個較復(fù)雜的例子
var oDiv
var disX
var disY
oDiv=document.getElementById("div")
var fndown=function(ev){
disX=ev.clientX-oDiv.offsetLeft
disY=ev.clientY-oDiv.offsetTop
oDiv.onmousemove=fnmove //只有當(dāng)fndown()被調(diào)用時oDiv.onmousemove才被聲明,注意此處fnmove沒有被調(diào)用
}
oDiv.onmousedown=fndown
var fnmove=function(ev){
oDiv.style.left=ev.clientX-disX+'px'
oDiv.style.top=ev.clientY-disY+'px'
oDiv.onmouseup=fnup //只有當(dāng)fnmove()被調(diào)用時oDiv.onmouseup才被聲明,注意此處fnup沒有被調(diào)用
}
var fnup=function(){
oDiv.onmouseup=null
oDiv.onmousemove=null
}
fndown被聲明------>oDiv.onmousedown被聲明------>fnmove被聲明------>fnup被聲明
---(按下鼠標(biāo))--->oDiv.onmousedown(fndown)被調(diào)用------>oDiv.onmousemove被聲明
---(移動鼠標(biāo))--->oDiv.onmousemove(fnmove)被調(diào)用------>oDiv.onmouseup被聲明
---(松開鼠標(biāo))--->oDiv.onmouseup(fnup)被調(diào)用
用回調(diào)函數(shù)
var callback=function(ev){
fndown(ev)
}
var oDiv
var disX
var disY
oDiv=document.getElementById("div")
oDiv.onmousedown=callback //匿名函數(shù)可以和回調(diào)函數(shù)互相轉(zhuǎn)化
var fndown=function(ev){
disX=ev.clientX-oDiv.offsetLeft
disY=ev.clientY-oDiv.offsetTop
oDiv.onmousemove=fnmove //這里fnmove只是被讀
}
var fnmove=function(ev){
oDiv.style.left=ev.clientX-disX+'px'
oDiv.style.top=ev.clientY-disY+'px'
oDiv.onmouseup=fnup
}
var fnup=function(){
oDiv.onmouseup=null
oDiv.onmousemove=null
}
callback被聲明------>oDiv.onmousedown被聲明-------> fndown被聲明------>fnmove被聲明------>fnup被聲明
---(按下鼠標(biāo))--->oDiv.onmousedown(callback/fndown)被調(diào)用------>oDiv.onmousemove被聲明
---(移動鼠標(biāo))--->oDiv.onmousemove(fnmove)被調(diào)用------>oDiv.onmouseup被聲明
---(松開鼠標(biāo))--->oDiv.onmouseup(fnup)被調(diào)用
結(jié)論
1.js中函數(shù)聲明順序為從上至下，某個函數(shù)在讀或?qū)懬氨仨毐宦暶鬟^。
2.異步函數(shù)的調(diào)用(執(zhí)行)是異步的，但聲明仍然是同步的蜗搔。涉及的函數(shù)必須先于異步函數(shù)聲明。
