js创建可重用对象的简单问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="bb"></div>
<div id="tt"></div>
<script type="text/javascript">
function test(){
_this = this;
}
test.prototype = {
alertt:function(i){
document.getElementById(_this.div).innerHTML = i;
},
dd:function(){
var self = this;
var i;
var tt = setInterval(function(){
i = self.age;
self.age += self.age;
self.alertt(i);
if(i.length > 100){
clearInterval(tt);
}
},200) }
}
test.prototype.init = function(age, div){
_this.age = age;
_this.div = div;
}
var ff = new test();
ff.init('0', 'bb');
ff.dd();
var tt = new test();
tt.init('1', 'tt');
tt.dd();
</script>
</body>
</html>
运行结果屏幕上只会打印出‘111111111111111111111111111111’，0000000000000000000000却不见了（被覆盖了，没哟显示），这是什么原因，怎么改？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

function test(){
_this = this;
}这句，_this变成了全局变量，var tt = new test();之后_this指向的都是tt对象，所以结果全打印在了<div id="tt"></div>里面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="bb"></div>
<div id="tt"></div>
<script type="text/javascript">
function test(){
}
test.prototype = {
alertt:function(i){
document.getElementById(this.div).innerHTML = i;
},
dd:function(){
var self = this;
var i;
var tt = setInterval(function(){
i = self.age;
self.age += self.age;
self.alertt(i);
if(i.length > 100){
clearInterval(tt);
}
},200)}
}
test.prototype.init = function(age, div){
this.age = age;
this.div = div;
}
var ff = new test();
ff.init('0', 'bb');
ff.dd();
var tt = new test();
tt.init('1', 'tt');
tt.dd();
</script>
</body>
</html>不要指定_this就好了
请问lianqin7，那我怎么定义这个_this才好呢？有的时候this在prototype的方法中就发生变化了
发生变化了是什么意思，一般在prototype的定义中，this都不会发生变化，有具体例子么
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div style="height:150px; position:relative; overflow:hidden;">
<div id="show-tab" style="background:#000000; position:absolute; top:0; left:0; height:450px;
width:200px;"></div></div>
<script type="text/javascript">
//构造函数
function slide(){
//_this = this;
}slide.prototype = {
initftn:function(){
for(var i = 0; i < this.len; i++){
this.eleSpace[i] = - i * this.initSpace;
}
},
tab:function(i){
var _this = this;
var type = _this.type;
_this.n = i;
var changes = 0;//变化频率
_this.init = parseInt(chao_f.getStyle(_this.imgNum,_this.type));//初始值
_this.space = _this.eleSpace[i] - _this.init;//变化值
_this.glide = setInterval(function(){
var change = _this.space / _this.frequency;
changes += change;
if(Math.abs(change) <= 0.1){
if(_this.type == 'top'){
_this.imgNum.style.top = _this.eleSpace[i] + "px";
}else{
_this.imgNum.style.left = _this.eleSpace[i] + "px"
}
change = 0;
}else{
if(_this.type == 'top'){
_this.imgNum.style.top = _this.init + changes + "px"
}else{
_this.imgNum.style.left = _this.init + changes + "px"
}
_this.space -= change;
}
if(change == 0){
_this.clearGlide();
}
},_this.tabTimer)
},
clearGlide:function(){
clearInterval(_this.glide);
},
/* on:function(){
for(var i = 0; i < _this.len; i++){
(function(i){
chao_f.addEvent(_this.Num[i], 'click', function(){
_this.clearGlide();
_this.clearSlide();
_this.tab(i);
_this.setSlide();
})
})(i)
}
},*/
demo:function(){
var _this = this;
var len = _this.len - 1;
if(_this.n > len){
_this.n = 0;
}
if(_this.n < 0){
_this.n = len;
}
_this.n = (_this.n + 1)%(len + 1);
_this.tab(_this.n);
},
setSlide:function(){
var _this = this;
_this.setTim = setInterval(_this.demo,_this.timer);
},
clearSlide:function(){
var _this = this;
clearInterval(_this.setTim);
}
}
slide.prototype.initPara = function(elem, type, tabElem, ispace, len, timer, tabTimer){
this.imgNum = elem;
this.type = type || 'left';
this.Num = tabElem || null;
this.len = len || 3;
this.initSpace = ispace || 535;//图片间距
this.timer = timer || 4000;
this.tabTimer = tabTimer || 50;
this.n = 0;
this.init = 0;//滑动的初始值
this.space = 0;//滑动间距(变化范围)
this.eleSpace = new Array;//元素的确定位置
this.frequency = 10;//变化频率
this.setTim = null;
this.glide = null;
}
var slide1 = new slide();
slide1.initPara(document.getElementById('show-tab'), 'top', null, 150);
slide1.initftn();
slide1.setSlide();//_this.on();
</script>
</body>
</html>
错误提示：79行：_this.tab is not a function
你在ff中运行一下就知道了，海王指教
_this.init = parseInt(chao_f.getStyle(_this.imgNum,_this.type));//初始值
这句就是获得属性的函数
function getStyle(elem, property){
var value = elem.style[camelize(property)];
if(!value){
if(document.defaultView && document.defaultView.getComputedStyle){
//DOM
var css = document.defaultView.getComputedStyle(elem, null);
value = css ? css.getPropertyValue(property) : null;
}else if(elem.currentStyle){
//MSIE
value = elem.currentStyle[camelize(property)];
}
}
return value == 'auto' ? '' : value;
}
忘记改了
完整代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div style="height:150px; position:relative; overflow:hidden;">
<div id="show-tab" style="background:#000000; position:absolute; top:0; left:0; height:450px;
width:200px;"></div></div>
<script type="text/javascript">
//构造函数
function slide(){
//_this = this;
}slide.prototype = {
initftn:function(){
for(var i = 0; i < this.len; i++){
this.eleSpace[i] = - i * this.initSpace;
}
},
tab:function(i){
var _this = this;
var type = _this.type;
_this.n = i;
var changes = 0;//变化频率
_this.init = parseInt(getStyle(_this.imgNum,_this.type));//初始值
_this.space = _this.eleSpace[i] - _this.init;//变化值
_this.glide = setInterval(function(){
var change = _this.space / _this.frequency;
changes += change;
if(Math.abs(change) <= 0.1){
if(_this.type == 'top'){
_this.imgNum.style.top = _this.eleSpace[i] + "px";
}else{
_this.imgNum.style.left = _this.eleSpace[i] + "px"
}
change = 0;
}else{
if(_this.type == 'top'){
_this.imgNum.style.top = _this.init + changes + "px"
}else{
_this.imgNum.style.left = _this.init + changes + "px"
}
_this.space -= change;
}
if(change == 0){
_this.clearGlide();
}
},_this.tabTimer)
},
clearGlide:function(){
clearInterval(_this.glide);
},
/* on:function(){
for(var i = 0; i < _this.len; i++){
(function(i){
chao_f.addEvent(_this.Num[i], 'click', function(){
_this.clearGlide();
_this.clearSlide();
_this.tab(i);
_this.setSlide();
})
})(i)
}
},*/
demo:function(){
var _this = this;
var len = _this.len - 1;
if(_this.n > len){
_this.n = 0;
}
if(_this.n < 0){
_this.n = len;
}
_this.n = (_this.n + 1)%(len + 1);
_this.tab(_this.n);
},
setSlide:function(){
var _this = this;
_this.setTim = setInterval(_this.demo,_this.timer);
},
clearSlide:function(){
var _this = this;
clearInterval(_this.setTim);
}
}
slide.prototype.initPara = function(elem, type, tabElem, ispace, len, timer, tabTimer){
this.imgNum = elem;
this.type = type || 'left';
this.Num = tabElem || null;
this.len = len || 3;
this.initSpace = ispace || 535;//图片间距
this.timer = timer || 4000;
this.tabTimer = tabTimer || 50;
this.n = 0;
this.init = 0;//滑动的初始值
this.space = 0;//滑动间距(变化范围)
this.eleSpace = new Array;//元素的确定位置
this.frequency = 10;//变化频率
this.setTim = null;
this.glide = null;
}
var slide1 = new slide();
slide1.initPara(document.getElementById('show-tab'), 'top', null, 150);
slide1.initftn();
slide1.setSlide();function getStyle(elem, property){
var value = elem.style[camelize(property)];
if(!value){
if(document.defaultView && document.defaultView.getComputedStyle){
//DOM
var css = document.defaultView.getComputedStyle(elem, null);
value = css ? css.getPropertyValue(property) : null;
}else if(elem.currentStyle){
//MSIE
value = elem.currentStyle[camelize(property)];
}
}
return value == 'auto' ? '' : value;
}//_this.on();
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div style="height:150px; position:relative; overflow:hidden;">
<div id="show-tab" style="background:#000000; position:absolute; top:0; left:0; height:450px;
width:200px;"></div></div>
<script type="text/javascript">
//构造函数
function slide(){
//_this = this;
}slide.prototype = {    initftn:function()
    {
        for(var i = 0; i < this.len; i++)
        {
            this.eleSpace[i] = - i * this.initSpace;
        }
    },


    tab:function(i)
    {
        var type = this.type;
        this.n = i;
        var changes = 0;//变化频率
        //我会在这里出错，应该是chao_f未定义的原因，后面无法调试了，请LZ自己调试
        this.init = parseInt(chao_f.getStyle(this.imgNum,this.type));//初始值
        this.space = this.eleSpace[i] - this.init;//变化值


        var _this = this;
        this.glide = setInterval(function()
        {
            var change = _this.space / _this.frequency;
            changes += change;

            if(Math.abs(change) <= 0.1)
            {
                _this.type == 'top' ? _this.imgNum.style.top = _this.eleSpace[i] + "px" : _this.imgNum.style.left = _this.eleSpace[i] + "px";
                change = 0;
            }
            else
            {
                _this.type == 'top' ? _this.imgNum.style.top = _this.init + changes + "px" : _this.imgNum.style.left = _this.init + changes + "px";
                _this.space -= change;
            }


            if(change == 0){
                _this.clearGlide();
            }
        },this.tabTimer);
    },



    clearGlide:function()
    {
        clearInterval(this.glide);
    },


    /* on:function(){
    for(var i = 0; i < _this.len; i++){
    (function(i){
    chao_f.addEvent(_this.Num[i], 'click', function(){
    _this.clearGlide();
    _this.clearSlide();
    _this.tab(i);
    _this.setSlide();
    })
    })(i)
    }
    },*/
    demo:function()
    {
        var len = this.len - 1;
        if(this.n > len)
        {
            this.n = 0;
        }
        if(this.n < 0)
        {
            this.n = len;
        }
        this.n = (this.n + 1)%(len + 1);
        this.tab(this.n);
    },


    setSlide:function()
    {
        var _this = this;
        //关键在这句，setInterval里指定的函数的作用域固定为window,所以在demo中this指的是window对象而不是slide的某个实例
        //this.setTim = setInterval(_this.demo,this.timer);
        this.setTim = setInterval(function(){_this.demo();},this.timer);
    },


    clearSlide:function()
    {
        clearInterval(this.setTim);
    }
}
slide.prototype.initPara = function(elem, type, tabElem, ispace, len, timer, tabTimer){
    this.imgNum = elem;
    this.type = type || 'left';
    this.Num = tabElem || null;
    this.len = len || 3;
    this.initSpace = ispace || 535;//图片间距
    this.timer = timer || 4000;
    this.tabTimer = tabTimer || 50;
    this.n = 0;
    this.init = 0;//滑动的初始值
    this.space = 0;//滑动间距(变化范围)
    this.eleSpace = new Array;//元素的确定位置
    this.frequency = 10;//变化频率
    this.setTim = null;
    this.glide = null;
}
var slide1 = new slide();
slide1.initPara(document.getElementById('show-tab'), 'top', null, 150);
slide1.initftn();
slide1.setSlide();//_this.on();
</script>
</body>
</html>
不要滥用对this的引用，只有在必要的情况下使用，既调用的函数与当前的作用域不同的时候再用