1

jsを学ぶために書いている画像ギャラリーから少しクリーンアップされたコードをここに示します。ギャラリーをオブジェクトとして作成しましたが、ある時点で「これ」が何を指しているのかわからなくなりました。一番下で何が起こっているのか、私には意味がありません（コメントを見てください）。誰か説明してくれませんか？

function Gallery(parentID)
{
        // ...
    this.showDiv = document.createElement("div");
        // ...
    this.show = function ()
        {
        document.body.appendChild(this.showDiv); //will be given css absolute position to "pop up"
        this.showDiv.innerHTML = '<img class="displayImage" src="' + this.picList[this.showIndex] + '">'; //fill with image
        this.showDiv.focus();
        this.showDiv.onclick = this.hide;
        }   

    this.hide = function ()
        {
        alert(this.innerHTML); // <= WHY DOES THIS SHOW THE INNERHTML CONTENTS OF this.showDiv??????
            //alert(this.showDiv.innerHTML); // <= shouldnt this be correct?
        this.parentNode.removeChild(this); //doesnt work
        }
}

結果に影響を与えた可能性のあるコードをクリーンアップして、それを埋めていないかどうか教えてください。

ありがとう。

4

3 に答える 3

4 
    this.showDiv.onclick = this.hide;

この行が問題です。Python のようには機能しません。this.hideバインドされたメソッドではありません。それは単なるhide関数であり、特定の にバインドされていませんthis。

それを修正する1つの方法は次のとおりです。

    this.showDiv.onclick = this.hide.bind(this);

しかし、.bind()関数のメソッドはかなり新しい標準です。すべての古いブラウザにあるわけではありません。したがって、代わりに独自のロールを作成することもできます。

function bindMethod(object, func) {
    return function () { return func.apply(object, arguments); };
}

this.showDiv.onclick = bindMethod(this, this.hide);

(一般thisに、JavaScript では奇妙な振る舞いをします。覚えておくべき主なことは、this常に最も内側の関数のthisを参照するということです。これは、呼び出し元が望むものであれば何でもかまいません。JS コードがvar self = this;特定の関数thisに名前を付けるようなことをするのを見ることがあります。ネストされた関数で使用できます; もちろん、Python では、これは物事が自動的に機能する方法の一種です。)

于 2012-09-12T00:08:17.143 に答える
0

ファクトリではなくコンストラクタ関数を使用することを主張する場合はthis、心に留めておいてください-

メソッド (またはコンストラクターとしてではなくメソッドとして呼び出す関数) があり、そのメソッドが を参照するthis場合、そのthisステートメントは、関数が定義されたときではなく、関数が呼び出された瞬間に解決されます。

function sayName () { console.log(this.name); }

var bob = { name : "Bob" },
      doug = { name : "Doug" };

bob.greet = sayName;
doug.greet = sayName;

厳密なクラスベースの言語では、あらゆる種類のエラーが発生します。

しかし、レイト バインディング (this実行中の可能な限り最後の 1 秒で何を意味するかを決定する) の魔法により、問題なく終了します。

ただし、問題が 1 つあります。関数内の関数です。外側のメソッドのthisを指したい。thisそうではありません。古い (現在の) JS では、 を指しwindowます。将来の JS では、何も指しません。

function sayNameAndAge () {
   var outerThis = this,
         name = this.name;

   function sayAge () { console.log(outerThis.age); }

     console.log(name);
     sayAge();
 }

ボブが名前と年齢の両方を持っていると仮定すると、今度は前回のように機能を割り当てることができ、機能します。関数はそれbobがドットの前にあることを認識し、したがってthis(注: 実際にどのように機能するかではなく、どのように機能するように見えるか、1 つの関数の深さ) の対象になります。 outerThis内部関数が使用する参照を保存します。

別のオプションは次のとおりです。

sayNameAndAge.call(bob);

callは、関数が持つメソッドです (関数はオブジェクトであると言いました)。これによりthis、別のオブジェクトにメソッド (実際には参照) を与えるのではなく、その特定の実行を指定できます。

bindが渡された値に永続的に設定されてcallいる関数を返すことを除いて、 と同じように機能します。また、OldIE にはありません。thisbind

もう 1 つの主要な参照ポイント: イベント リスナーを使用する場合this、リスナーを配置する要素を指します。

リスナーをデリゲートできます (1 つのリスナーを にアタッチすると、たとえば<ul>、その の任意のクリックをリッスンします。その場合、は、トリガーされたときにリスナーがアタッチされたオブジェクトになるため、 になります。<li>this<ul>

物事が少し明確になることを願っています。

于 2012-09-12T01:58:52.593 に答える
0

これは、関数を呼び出したオブジェクトを参照します。だからあなたが言うときthis.showDiv.onclick、showDivは関数を呼んでいるものです。したがってthis.innerHTML、実際にはthis.showDiv.innerHTML

于 2012-09-12T00:08:57.180 に答える