1

我是 javascript 对象的新手，我有一个问题。我正在尝试制作一个图片库，但我不断收到一个错误，即 this.current、this.size 和 this.initial 未定义，因此脚本无法工作。请帮我解决这个错误。以下是完整的脚本。

function gallery()
{
    this.image = new Array(10);
    this.initial = 1;   
    this.current = 0;
    this.size = 10;
    this.frame_height = 400;
    this.frame_width = 600;
    this.initialize=function()
    {
        if(document.images)
        {
            var count = 1;
            for(count=1;count<=this.size;count++)
            {
               this.image[count] = new Image();
               this.image[count].src = 'images/'+count+'.jpg';                 
            }
        }

    divImg.id = "divImg";   
    divImg.setAttribute("Width",this.frame_width);
    divImg.setAttribute("align","center");   
    divImg.setAttribute("margin","0px auto"); 


    divBtn.id = "divBtn";    
    divBtn.setAttribute("align","center");  
    divBtn.setAttribute("backgroung-color","Black"); 
    divBtn.setAttribute("color","White"); 
    divBtn.style.margin = "0px auto";   
    divBtn.className ="btn";

    pictureFrame.src = this.image[this.initial].src;
    pictureFrame.setAttribute('Width',this.frame_width);
    pictureFrame.setAttribute('Height',this.frame_height);
    pictureFrame.name = 'img';

    btnNext.innerHTML='NEXT';
    btnPrevious.innerHTML='PREVIOUS';
    btnLast.innerHTML='LAST';
    btnFirst.innerHTML='FIRST';

    btnFirst.onclick=this.first;
    btnLast.onclick=this.last;
    btnPrevious.onclick=this.previous;
    btnNext.onclick=this.next;  

    myForm.appendChild(pictureFrame);
    divImg.appendChild(myForm);

    divBtn.appendChild(btnFirst);
    divBtn.appendChild(btnPrevious);
    divBtn.appendChild(btnNext);
    divBtn.appendChild(btnLast);

    pageBody.appendChild(divImg);
    pageBody.appendChild(divBtn);
    headerTag.appendChild(pageBody);
}

this.next=function()
{
    alert(this.size);
    alert(this.current);
    if (this.current < this.size) 
    {
        this.current +=1;
        pictureFrame.src = this.image[this.current].src;
    }
    else
    {
        alert("This is the last image");
    }
}   
this.previous=function()
{
    alert(this.current);
    alert(this.initial);
    if (this.current > this.initial) 
    {
        this.current = this.current-1;
        pictureFrame.src = this.image[this.current].src;
    }
    else 
    {
        alert("This is the first image");
    }

}
this.first=function()
{
    this.current=this.initial;
    pictureFrame.src = this.image[this.current].src;
}
this.last=function()
{
    alert(this.size);
    this.current=this.size;
    pictureFrame.src = this.image[this.current].src;
}

};

var divImg= document.createElement('div');
var divBtn = document.createElement('div');
var btnFirst= document.createElement('button');
var btnNext= document.createElement('button');
var btnPrevious= document.createElement('button');
var btnLast= document.createElement('button');
var divTop = document.createElement('div');
var headerTag = document.getElementsByTagName('html')[0];
var pageBody = document.createElement('body');
var myForm=document.createElement("form");
var pictureFrame = document.createElement('img');


var pics=new gallery();
window.onload=pics.initialize();
4

2 回答 2

1

您正在经历超出范围的故障，这对于 ECMAscript 新手来说很常见。

每个函数都有自己的执行上下文，ECMA-/Javascript 中的每个上下文都有自己的this上下文变量。为避免这种情况，最常见的方法是将对“外部”上下文变量的引用存储this在局部变量中：

function gallery()
{
    this.image = new Array(10);
    this.initial = 1;   
    this.current = 0;
    this.size = 10;
    this.frame_height = 400;
    this.frame_width = 600;

    var self = this;

    //...

    this.initialize=function()
    {
        if(document.images)
        {
            var count = 1;
            for(count=1;count<=self.size;count++)
            {
               self.image[count] = new Image();
               self.image[count].src = 'images/'+count+'.jpg';                 
            }
        }
    // ...

这将像每个 Javascript 环境一样工作。与此同时，在 ECMA 中有“更好的”（其他）方法可以避免这个问题。例如，ECMAscript 第 5 版引入了.bind()一种方法，可让您将引用“绑定”this context variable到您选择的对象。许多 javascript 框架提供了一种非常相似的绑定this到对象的方式，甚至 Javascript 本身也可以让您轻松完成。

于 2011-07-01T13:13:31.087 回答
1

jAndy说的没错，当window对象调用时pics.initialise，this指的是window（this指函数的调用者，除非函数是匿名的）。

但是，您可能更喜欢一个更简单的解决方案：

代替

var pics = new gallery();
window.onload = pics.initialize;

你可以做：

var pics = new gallery();
window.onload = function() {
    pics.initialize();
};

因为它被包装在一个匿名函数中，所以this会引用gallery实例，而不是window.

jAndy 的建议肯定更可靠，但对于仍在努力使用 Javascript 的人来说可能有点困难。

于 2011-07-01T13:26:52.547 回答