javascript - 关于JS函数表达式的疑问？
本文介绍了javascript - 关于JS函数表达式的疑问？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
两个代码示例如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{width: 200px;height: 200px;border:10px solid black;
float: left;background-color: yellow;margin: 10px;}
div#div4{opacity: 0.3;filter: alpha(opacity:30)}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
var oDiv1=document.getElementById('div1');
oDiv1.onmouseover=function()
{
startMove(this,'height',400)
}
oDiv1.onmouseout=function()
{
startMove(this,'height',200)
}
function startMove(obj,attr,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur=parseInt(getStyle(obj,attr))
}
var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget)
{
clearInterval(obj.timer);
}
else
{
if(attr=='opacity')
{
obj.style.opacity=(cur+speed)/100;
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
},30)
}
function getStyle(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr]
}
else
{
return getComputedStyle(obj,false)[attr]
}
}
</script>
</html>
----------------------我是分割线--------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1{width: 200px;height: 200px;background-color: red;position: absolute;}
</style>
</head>
<body style="height:2000px;width:4000px;">
这里是一大堆文字，一大堆文字，一大堆文字。
<div id="div1">这里是一大堆文字，一大堆文字，一大堆文字。</div>
这里是一大堆文字，一大堆文字，一大堆文字。
</body>
<script type="text/javascript">
var oDiv=document.getElementById('div1');
function getPos(ev)
{
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}
}
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event;
var pos=getPos(oEvent);
var disX=pos.x-oDiv.offsetLeft;
var disY=pos.y-oDiv.offsetTop;
if(oDiv.setCapture)
{
oDiv.onmousemove=mouseMove;
oDiv.onmouseup=mouseUp;
oDiv.setCapture();//上锁
}
else
{
document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
}
function mouseMove(ev)
{
var oEvent=ev||event;
var pos=getPos(oEvent);
var l=pos.x-disX;
var t=pos.y-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
function mouseUp()
{
this.onmousemove=null;
this.onmouseup=null;
if(oDiv.releaseCapture)
{oDiv.releaseCapture();}
}
return false;//阻止FF的bug
}
</script>
</html>
————————————————————————————————————————————————————————————————————分割线————————
问题是，第一段代码为什么是
oDiv1.onmouseover=function()
{
startMove(this,'height',400)
}
而第二段代码是
oDiv.onmousemove=mouseMove;这个格式
我互换两种代码格式，两个代码均无法正常运行。
比如第一种：oDiv1.onmouseover=startMove(this,'height',400)；
第二种：
oDiv.onmouseover=function()
{
mouseMove;
}
跪求指点，谢谢各位大神！
解决方案
看你自己写的：
第一段代码：
// 这是正确的写法
oDiv1.onmouseover = function () {
startMove(this, 'height', 400);
};然后，你修改成了这样：
oDiv1.onmouseover = startMove(this, 'height', 400);那么，请问，你修改的写法中的 this 从哪儿来？
第二段代码：
正确的写法是这样：
// 直接将函数赋值给变量，不加括号，就表示调用函数
oDiv.onmousemove = mouseMove;而你改成了这样：
oDiv.onmouseover = function () {
mouseMove;
};那么，你修改的代码里，mousemove 是啥？变量？函数要运行不该要加 () 吗？
所以，第一段代码，你要传入 this，那么，就不能那样简写；第二段代码，在你要运行的函数上加上括号。
这篇关于javascript - 关于JS函数表达式的疑问？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
