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

jAndy が言ったことは正しいです。windowオブジェクトが を呼び出すとき、 (関数が匿名でない限り、関数の呼び出し元を参照しpics.initialiseます)thisを参照します。windowthis

ただし、より簡単な解決策があります。

それ以外の

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

できるよ：

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

無名関数にラップされているため、 ではなくインスタンスthisを参照します。gallerywindow

jAndy の提案は間違いなくより堅牢ですが、まだ Javascript に取り組んでいる人にとっては少し難しいかもしれません。

于 2011-07-01T13:26:52.547 に答える
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 context variable多くの JavaScript フレームワークはthis、オブジェクトへのバインドに非常によく似た方法を提供しています。

于 2011-07-01T13:13:31.087 に答える