使用 javascript 对象时出现未定义错误

Question

我是 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();

Answer 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 Edition 5 引入了 .bind() 方法，该方法允许您将 this 上下文变量 的引用“绑定”到您选择的对象。许多 javascript 框架都提供了一种非常类似的将 this 绑定到对象的方法，甚至 Javascript 本身也可以让您轻松完成此操作。

Answer 2

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 实例，而不是窗口。

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