首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

请教大家这两段代码有什么区别

2012-08-10 
请问大家这两段代码有什么区别?代码一的鼠标移上去 this指向当前对象。但代码二的鼠标移上去 this 指向wind

请问大家这两段代码有什么区别?
代码一的鼠标移上去 this 指向当前对象。
但代码二的鼠标移上去 this 指向window。
请看这2个代码。。为什么会指向window啊。
self.startMove(this,{backgroundPositionX:-self.lang+this.offsetWidth});
startMove函数

我已经把startMove函数添加到Astyle对象的一个方法:this.startMove = startMove;为什么还会这样指向window ?


代码一:

HTML code
<!doctype html><html>    <head>    </head>        <body>        <p id="para">para</p>        <script type="text/javascript">            var $ = function(id){return typeof id == "string"?document.getElementById(id):id}            function Person(name,age,job){                this.name = name;                this.age = age;                this.job = job;                this.show = show;                var self = this;                this.start = start;                $("para").onmouseover = function(){                    self.start(this)                }            }            function start(target){                console.log(target)            }            function show(){                console.log(this.name)            }            var obj = new Person("deepblue",28,"Web Engineer");            obj.show();        </script>    </body>    </html>

代码二:
HTML code
<!DOCTYPE HTML><html> <head>  <title> New Document </title>  <style type="text/css">    *{padding:0;margin:0;}.box{ float:left;}.box li{ list-style:none; height:24px;}.box a{ font-size:12px; color:#333;}.menuBox li{ list-style:none; height:24px; float:left; margin-right:5px;}.menuBox a{ font-size:12px; color:#333;}.menuBox a:hover{ color:#000;}  </style> </head> <body>  <div class="box">    <ul>        <li><a href="#" class="ButtonStyle">·红十字总会今年财务收入近6亿</a></li>        <li><a href="#" class="ButtonStyle">·中国南极科考队直升机失事 2名机组</a></li>        <li><a href="#" class="ButtonStyle">·今年255人因食品安全案获刑 李克强要</a></li>        <li><a href="#" class="ButtonStyle">·北京地税局证实年终奖多1元或多缴千元个税</a></li>        <li><a href="#" class="ButtonStyle">·欧央行两个月内再次降息 宣布多项措施拯救欧洲</a></li>        <li><a href="#" class="ButtonStyle">·时代周刊公布年度全球十大新闻:阿拉伯之春居首</a></li>        <li><a href="#" class="ButtonStyle">·伊朗军方通过电视台播出击落美国无人机画面</a></li>        <li><a href="#" class="ButtonStyle">·王晨会见ICANN总裁 政务微博:力行"织博为民"</a></li>        <li><a href="#" class="ButtonStyle">·第五届中美互联网论坛举行 钱小芊发表演讲(图)</a></li>        <li><a href="#" class="ButtonStyle">·高官全部落选工程院院士 个别单位领导曾拉票</a></li>        <li><a href="#" class="ButtonStyle">·住建部官员:PM2.5指数升高与建造玻璃幕墙有关</a></li>    </ul></div>    <script type="text/javascript">        //var $ = function(id){return document.getElementById(id)}            function Astyle(cName,seat){                this.cName = cName;                this.seat = seat;                this.elem = document.body;                this.obj = getClass;                this.lang = 1000;                this.startMove = startMove;                var self = this;                for(var i=0; i<this.obj().length; i++){                    this.obj()[i].style.textDecoration = "none";                    this.obj()[i].style.background = "url(images/a_line.jpg) no-repeat "+(-this.lang)+"px "+this.seat;                    this.obj()[i].onmouseover = function(){                        var tar  =this;                        this.style.backgroundPosition = -this.lang*2 + "px";                        if(this.style.backgroundPositionX != undefined){                            //console.log(this)                            self.startMove(this,{backgroundPositionX:-self.lang+this.offsetWidth});                        }                    }                }            }            function startMove(target,object,onComplete){                console.log(target + ":" + this.cName)            }            function getClass(){                var aElem = this.elem.getElementsByTagName("*");                var aClass = [];                var i=0;                for(i=0; i<aElem.length; i++){                    if(aElem[i].className == this.cName){                        aClass.push(aElem[i])                    }                }                return aClass;            }            var astyle = new Astyle("ButtonStyle","bottom");            astyle.obj()    </script> </body></html> 




[解决办法]
<!DOCTYPE HTML>
<html>
 <head>
<title> New Document </title>
<style type="text/css">
*{padding:0;margin:0;}
.box{ float:left;}
.box li{ list-style:none; height:24px;}
.box a{ font-size:12px; color:#333;}

.menuBox li{ list-style:none; height:24px; float:left; margin-right:5px;}
.menuBox a{ font-size:12px; color:#333;}
.menuBox a:hover{ color:#000;}

</style>
 </head>

 <body>
  
<div class="box">
<ul>
<li><a href="#" class="ButtonStyle">·红十字总会今年财务收入近6亿</a></li>
<li><a href="#" class="ButtonStyle">·中国南极科考队直升机失事 2名机组</a></li>
<li><a href="#" class="ButtonStyle">·今年255人因食品安全案获刑 李克强要</a></li>
<li><a href="#" class="ButtonStyle">·北京地税局证实年终奖多1元或多缴千元个税</a></li>
<li><a href="#" class="ButtonStyle">·欧央行两个月内再次降息 宣布多项措施拯救欧洲</a></li>
<li><a href="#" class="ButtonStyle">·时代周刊公布年度全球十大新闻:阿拉伯之春居首</a></li>
<li><a href="#" class="ButtonStyle">·伊朗军方通过电视台播出击落美国无人机画面</a></li>
<li><a href="#" class="ButtonStyle">·王晨会见ICANN总裁 政务微博:力行"织博为民"</a></li>
<li><a href="#" class="ButtonStyle">·第五届中美互联网论坛举行 钱小芊发表演讲(图)</a></li>
<li><a href="#" class="ButtonStyle">·高官全部落选工程院院士 个别单位领导曾拉票</a></li>
<li><a href="#" class="ButtonStyle">·住建部官员:PM2.5指数升高与建造玻璃幕墙有关</a></li>
</ul>
</div>


<script type="text/javascript">
//var $ = function(id){return document.getElementById(id)}
function Astyle(cName,seat){
this.cName = cName;
this.seat = seat;
this.elem = document.body;
this.obj = getClass;
this.lang = 1000;
this.startMove = startMove;
var self = this;
for(var i=0; i<this.obj().length; i++){
this.obj()[i].style.textDecoration = "none";
this.obj()[i].style.background = "url(images/a_line.jpg) no-repeat "+(-this.lang)+"px "+this.seat;
this.obj()[i].onmouseover = function(){
alert( this.tagName ) 是指向的链接啊,不明白楼主的意思
this.style.backgroundPosition = -this.lang*2 + "px";
if(this.style.backgroundPositionX != undefined){
//console.log(this)
self.startMove(this,{backgroundPositionX:-self.lang+this.offsetWidth});
}
}
}
}
function startMove(target,object,onComplete){
console.log(target + ":" + this.cName)
}
function getClass(){
var aElem = this.elem.getElementsByTagName("*");
var aClass = [];
var i=0;
for(i=0; i<aElem.length; i++){
if(aElem[i].className == this.cName){
aClass.push(aElem[i])
}
}
return aClass;
}


var astyle = new Astyle("ButtonStyle","bottom");
astyle.obj()

</script>

 </body>
</html>

热点排行