7

これらは、tuts-premiumJqueryvidチュートリアルから取得されます。
http://tutsplus.com/lesson/the-this-keyword/ ジェフは、「これ」が毎回何を指しているのかを説明していますが、それらすべての背後にある理由を理解したかどうかはわかりません。

例1

function doSomething(e) { 
e.preventDefault(); 
console.log(this);
} 

$('a').on('click', doSomething);

この場合、「これは「a」要素を参照します」（この場合は親オブジェクトです）

これは、ここでのステ​​ートメントが次のように等しいためだと思います。

$('a').on('click', function (e) { 
    e.preventDefault(); 
    console.log(this);
    }

したがって、「a」は親オブジェクトです

例2

var obj = { 
    doIt: function(e){ 
    e.preventDefault(); 
    console.log(this);
    }
}

$('a').on('click',  obj.doIt);

この場合、「これはまだ「a」要素を参照しています」（*しかし、明らかにそれは親オブジェクトではありませんか？）

今回はメソッドを呼び出しているようですが、ステートメントはまだEg1と同じものに相当します。

*チュートリアルの1つで、少し混乱しています。「this」は常に親オブジェクトを参照していると思ったので、この場合は「a」が引き続き親オブジェクトです。しかし（チュートリアルの05.23で）彼はそうではないと推測し、「この」がその親オブジェクトである「obj」を参照するようにしたい場合があり、その場合はeg3を作成します。

例3

var obj = { 
    doIt: function(){ 
    console.log(this);
    }
}

$('a').on('click',  function(e){    
obj.doIt(); 
        };
e.preventDefault();

この場合、「これはobjオブジェクトを参照します」

このステートメントは次のように等しいので、'this'は入れ子関数にあるという事実でこれを推測します：

$('a').on('click',  function(){    
function(){ console.log(this);}
};
e.preventDefault();

しかし、特に入れ子関数で「これ」が「道に迷い、ヘッドオブジェクト（ウィンドウオブジェクト）を参照する」という記事を読んだとき、その理由はよくわかりません。

Eg4 

var obj = { 
    doIt: function(){ 
    console.log(this);     
    }
}

$('a').on('click',  function(e){    
       obj.doIt.call(this);             
       e.preventDefault(); 
});

この場合、「これは「a」を指します」

Javascript Definitive Guideによると、「両方のcall（）の最初の引数は、関数が呼び出されるオブジェクトです」ここでは、「this」が最初の引数として使用されます。しかし、「これ」は関数が呼び出されるオブジェクトではありませんか？
関数の呼び出しは、関数を呼び出し、その最初のパラメーターを別のオブジェクトへのポインターとして使用するためにあると思いますが、「this」を使用すると、関数が「a」によって呼び出されることを意味します。他のcall（）の例でも見たものではありません。

そのような巨大な投稿でごめんなさい。うまくいけば、誰かがこの段階でまだ読んでいる…</ p>

4

4 に答える 4

4

これが問題の明確化に役立つことを願っていますが、実際には混乱する可能性があります。

  • がコード上でゆるい場合this、グローバル オブジェクト (Web ブラウザではwindow) を参照します。

    console.log(this); // window

  • オブジェクトメソッド内にある場合this（Eg 3のように）、オブジェクトを参照します。これは、インスタンス化されたオブジェクトnew、またはオブジェクト リテラルとして適用されます (例のように)。

     var obj = { 
     doIt: function(e){ 
         console.log(this);
     }
 }
 obj.doIt(); // obj

  • イベント ハンドラー内でthisは、イベントがバインドされているオブジェクトを参照します。

    // This is the plain js equivalent of your jQuery example
document.getElementsByTagName['a'][0].addEventListener('click', function(e){
    console.log(this); // the first anchor on the document
});

// This is exactly the same:
var clickHandler = function(e){
    console.log(this); // the first anchor on the document
};
document.getElementsByTagName['a'][0].addEventListener('click', clickHandler); 

// Even if the handler is defined inside of another object, this will be
// the obj the event is bound to. It's the case of your E.g. 2
var obj = { 
    doIt: function(e){  
        console.log(this); // the first anchor on the document
    }
}
document.getElementsByTagName['a'][0].addEventListener('click', obj.doIt);
// When you pass obj.doIt to addEventListener above, you are passing a reference
// to that function. It's like "stealing" the function from the object

  • オブジェクトがFunction.callorの最初のパラメータとして渡されるとき、関数内にあるFunction.apply場合は、渡したオブジェクトを参照します。これは、何を指してthisいるのかを強制する方法です。this

    var obj = { 
    doIt: function(){ 
        console.log(this); // window 
    }
}
obj.doIt.call(window);
于 2012-04-12T00:59:49.463 に答える
0

JavaScript でののthis動作は、最初は少し混乱します。基本的に、(静的にスコープされる) 変数とは異なり、this動的にスコープされます。つまり、 の値は、関数を記述した場所ではなく、関数を呼び出しthisた場所によって決定されます。

関数を に渡すと、後で問題の要素でonあるコンテキストから呼び出されます。thisこれは、その機能をどのように取得したかに関係なく発生します。つまり、関数は、構文 like を使用してアクセスするかobj.fn、名前だけを使用してアクセスするかは気にしませんfn。どちらの場合でも、式の値は同じです。

関数以外のものでは、これは理にかなっています。与えられた:

var a   = 10,
    obj = { a : 10 };

a式とobj.aが同じ値を持つことに同意するでしょう。これは関数にも当てはまります。

つまり、 の値はthis、関数を宣言する方法と場所、または呼び出す前に関数を参照する方法ではなく、関数を呼び出す場所と方法に依存します。

于 2012-04-12T00:49:07.040 に答える
0
于 2012-04-12T11:34:52.977 に答える
0

https://developer.mozilla.org/en/JavaScript/Reference/Operators/これはthisキーワードの簡単な紹介です。のリファレンスを参照してくださいcall()。

jQuery が dom 要素のコンテキストでイベント ハンドラーを (はい、.call()メソッドを使用して) 呼び出すと、すべての例が説明されます。

于 2012-04-12T00:55:49.303 に答える