3

それで、これが取引です。私は onclick イベントを使用して関数を起動しているので、クリックするたびに div の元の innerHTML と別の変数を切り替えます。testfunction をコールバックとして割り当てると機能します。コードは次のとおりです。

var c = '';

function testfunction()
{
    var a = this.innerHTML;

    var b = 'blah';

    if (a !== b)
    {
        c = a;
        return this.innerHTML = b;
    }
    else
    {
        return this.innerHTML = c;
    }

    window.onload = function()
    {
         document.getElementById('rightcontent').onclick = testfunction;
    }

c はグローバルスコープであるため、その値を保持していることを理解しています。しかし、私が理解していないのは、関数を匿名コールバックにそのまま入れたときに c が未定義に戻る理由です。

    windows.onload = function()
    {
    document.getElementById('rightcontent').onclick = function()
    {
         this.innerHTML = testfunction();
    }
    }

これには意味がありません。私はただいじっているだけです...しかし、ボンネットの下で何が起こっているのか知りたいです.

これが他の場所でカバーされている場合は申し訳ありません。答えを見つけるためにいくつかの投稿を調べましたが、見つかりません。

前もって感謝します :-)

4

2 に答える 2

2

c はグローバルスコープであるため、その値を保持していることを理解しています。しかし、私が理解していないのは、関数を匿名コールバックにそのまま入れたときに c が未定義に戻る理由です。

2 番目のスニペットでthisは、 は と等しくなく#rightcontent、 と等しくなりwindowます。window.innerHTMLは未定義であるため、最初のブランチがif/elseブロックで取得されます。

c割り当てられundefinedundefined返されます。

callメソッドを呼び出して、またはで特定のコンテキストを指定できますapply

document.getElementById('rightcontent').onclick = function () {
    this.innerHTML = testfunction.call(this);
}

例: http://jsfiddle.net/dySA5/

最初のスニペットがこの動作を示さない理由はthis、メソッドが呼び出されたときにブラウザーがクリックされた要素になるように設定しているためです。

于 2013-01-08T23:26:02.687 に答える
1

http://jsfiddle.net/2aDJS/4/

読みやすくするために、例をクリーンアップして jQuery 化しました。

var c = '';

function testfunction() {
  console.log(this)
  var a = this.innerHTML;

  var b = 'blah';

  if (a !== b) {
    c = a;
    this.innerHTML = b;
  } else {
    this.innerHTML = c;
  }
}

$(document).ready(function () {
  $('#rightcontent').click(function () {
    testfunction.call(this);
    //testfunction();
  });

  //$('#rightcontent').click(testfunction);
})

関数にラップされている関数呼び出しが失敗する理由は、それを行うとスコープが変更されるためです。thisイベント ハンドラーのイベント誘導要素として解釈されます。イベント ハンドラ内で関数を呼び出して参照させたい場合、 をthis使用してスコープを明示的に呼び出さない限り、その関数は変更されませんfunction.call(scope)

于 2013-01-08T23:48:49.763 に答える