誰かthis
がJavascriptでキーワードを説明できますか?オンラインソースや教科書を引用せずに、できれば平易な英語で。私はすでにそれらを読んだと確信しています。私はまだその概念を完全には理解していません。
this
いつどのように使用するかによって、いくつかの異なる意味を持つ可能性が あることを理解しています。
たとえば、場合によってはグローバルオブジェクトを参照できると読みました。の意味this
が変わるさまざまな状況と、それがどのように使用されるかを説明できますか?
誰かthis
がJavascriptでキーワードを説明できますか?オンラインソースや教科書を引用せずに、できれば平易な英語で。私はすでにそれらを読んだと確信しています。私はまだその概念を完全には理解していません。
this
いつどのように使用するかによって、いくつかの異なる意味を持つ可能性が あることを理解しています。
たとえば、場合によってはグローバルオブジェクトを参照できると読みました。の意味this
が変わるさまざまな状況と、それがどのように使用されるかを説明できますか?
これを調べるより良い方法は、「関数は Javascript でどのように呼び出されるのか?」です。
"[[Call]]"
内部的には、私たちがここで使用するインターフェイスを持つ関数プリミティブがありFunction.prototype.call(thisArg, arguments...)
ます。
Javascript で関数を呼び出すたびに、同等Function.call
のステートメントに変換される構文を記述し、それを渡しthisArg
ます。これは、関数を呼び出す方法にのみ依存し、他のオブジェクト指向の概念には依存しません。これは、クラスベースのオブジェクト セマンティクスが他の言語で機能する方法に慣れているプログラマーが Javascript に関して直面する主な混乱の 1 つです。
グローバル コンテキストで呼び出される関数の場合:
function foo(a) { console.log(a); return this; }
foo(5); // equivalent to foo.call(window, 5);
// outputs 5, returns (Window)
オブジェクトにリンクされているかのように呼び出される関数の場合(ドット構文):
var o = { foo: function(a) { console.log(a); return this; } };
o.foo(5); // equivalent to o["foo"].call(o, 5)
// outputs 5, returns (Object(o))
本当にそれだけです。同じ関数に別の方法でアクセスできることに注意してください。
var x = o.foo;
x(5); // equivalent to x.call(window, 5);
// outputs 5, returns (Window)
o
そして、このまったく同じ関数は、それを作成した と何らかの形で関連していることをまったく知りません。
このトピックが得られると思うほど平易な英語で:
this
になります。window
this
前のオブジェクトになります。この動作が気に入らない場合は、さまざまな方法でさまざまな動作をシミュレートできます (独自の動作をまたはにFunction.prototype.bind
渡すなど)。thisArg
call
apply
細字: ECMAScript の厳格モードでwindow
は、上記の例で渡された場所は、代わりに を渡しundefined
ます。そして、「前のドット」によって、私は実際に話しているo["foo"](6)
だけo.foo(6)
ですthis
.
理解this
するには、オブジェクト指向プログラミングを理解する必要があります。
オブジェクト指向プログラミングでは、ほとんどのメソッド (関数) は に属しobjects
ます。Javascript では、ほとんどobjects
がウィンドウ要素です。ボタン、リスト、div。Web ページで名詞として説明できるものはほとんどすべてobject
、何らかの形で , である可能性があります。そうでないいくつかのものは、のメンバーですobjects
。
したがって、オブジェクト指向プログラミングでは、たとえばonclick
. 内部onclick
には、実行するコードがいくつかあります。の背景を<div>
青から緑に変更し、クリックすると元に戻るとします。英語/疑似コードでそれを構築しましょう。
myDiv.onClick {
if the div that was clicked on has a background of blue then set that div's background to green
else if the div that was clicked on has a background of green then set it to blue
}
とても簡単ですよね?これがオブジェクト指向プログラミングでない場合、関数は引数div_id
. そう、
onClick(div_id theDiv) {
if theDiv.background=blue then theDiv.background=green
else if theDiv.background=green then theDiv.backgrond=blue
}
ただし、これはオブジェクト指向プログラミングです。onClick は div のメソッドであり、オブジェクト指向プログラミングの利点の 1 つは、どの div を意味するかなどの引数を渡す必要がないことです。もちろん、あなたが意味する div は、引数が呼び出されたものです! 各 div には onClick への独自の参照があり、メソッドの記述方法によっては独自のコピーになる可能性があります。
ただし、それには問題が残ります。どのように言いますか、
if this Div's background is blue then set this div's background to green
? 答えはthis
です。 this
現在のメソッドが属するオブジェクトを参照します。したがって、div がクリックされると、その onClick メソッドが呼び出されます。そしてあなたは持っています:
div.onClick() {
if this.background=blue then this.background=green
else if this.background=green then this.background=blue
}
したがって、div.onClick 関数を 1 つだけ記述すれば、すべての div を自由に青または緑に変えることができます。