Javascriptの“ this”のより良い名前は何でしょうか?
-
05-07-2019 - |
質問
私は、Javaベースの継承モデルを使用して、Javascriptのプロトタイプベースの継承モデルを理解しようとしています。私を追い払っているのは、Javaの「これ」という意味があるからだと思います。念頭に置いて-とJavascriptの「これ」非常に異なる獣です。私は、Javascriptの「これ」を理解しています関数が定義されたスコープではなく、常に関数の呼び出し元を参照します-つまり、私はそれを読んで表面的に意味を理解しています。しかし、私はより深く理解したいと思います、そして、それに対して別の名前を持つことは助けになると思います。 JS「これ」についてどう思いますか?あなたはそれに出くわすたびに精神的な交換をしますか?もしそうなら-あなたはどんな単語やフレーズを使いますか?
解決
this
は、Javascriptで context
に合理的に名前が変更される場合があります。
実際には現在のスコープの実行コンテキストを参照しており、そのコンテキストはクラスのインスタンスである可能性がありますが、 は確かに—である必要はありません。どんなオブジェクトでもかまいませんし、実行時に変更することもできます。
"メソッド" Javascriptの" class"のインスタンスで動作しています。定義されている場所:
function Cat(){
this.texture = 'fluffy';
this.greet = function(){
alert("Pet me, I'm " + this.texture);
}
}
var cat = new Cat();
// Default to using the cat instance as the this pointer
cat.greet(); // Alerts "Pet me, I'm fluffy"
// Manually set the value of the this pointer!
cat.greet.call({texture: 'scaly'}); // Alerts "Pet me, I'm scaly"
this
オブジェクトの値は、含まれる関数が定義されている場所から完全に独立していることに注意することが重要です。
他のヒント
可能な代替名の1つは owner
です。これは、実行しているコードに応じて所有者が変更できるという方向にあなたの心を導くでしょう。
この例は、 quirksmode からのものです。
JavaScriptでは、 this
は常に“ owner”を参照します実行している関数の、またはむしろ、関数がメソッドであるオブジェクトに対して。ページで忠実な関数doSomething()を定義する場合、その所有者はページ、またはJavaScriptのウィンドウオブジェクト(またはグローバルオブジェクト)です。ただし、onclickプロパティは、それが属するHTML要素によって所有されます。
次のコードでは、
function doSomething() {
this.style.color = '#cc0000';
}
and
element.onclick = doSomething;
、 owner
は、実行時にメソッドを含むオブジェクトを指します。
------------ window --------------------------------------
| / \ |
| | |
| this |
| ---------------- | |
| | HTML element | <-- this ----------------- |
| ---------------- | | doSomething() | |
| | | ----------------- |
| -------------------- |
| | onclick property | |
| -------------------- |
| |
----------------------------------------------------------
JavaScriptの this
は、思っているよりもJavaの this
にずっと近いと思います。 OOPコンテキストでは、 this
は「このインスタンス」を意味します。 JavaScriptの this
キーワードの混乱を招く可能性があるのは、コンテキストに応じて 意味が異なる可能性があることです。
this
は関数の呼び出し元ではないかもしれませんが、関数が定義されたスコープではないかもしれませんが、関数の context です。
@Andrew Hareが指すシフトする意味は、おそらくあなたの混乱の原因に近いでしょう。 JSのプロトタイプ継承メカニズムのため、 function
キーワードは、その使用方法に応じて、Javaのメソッド定義よりもJavaの class
に近いものを意味します。
ブラウザでの実行を想定:
var q = this.document; //this is window
var o = new (function pseudoconstructor(){
this.property = "something else" //the new keyword changed 'this' to mean 'the object I'm about to return'
})();
「JavaScript this」はどうですか?自分がやっていることに直接結び付けられ、現在作業している「これ」の概念がJavaScriptの概念であることを心に留めておくことができます。
最終的には、「JavaScript this」と呼ぶのをやめて、「this」と呼ぶだけで、作業中のコンテキストでそれが何を意味するのかを完全に認識してくれることを期待します。とにかく行きたい場所。
次のような入力しにくいメンタルモデルを使用して、新しい構文を吸収します。
$(document).ready(function() {
function baffle() {
alert(this.b);
}
function what() {
this.b = "Hello";
baffle();
}
function huh() {
this.b = "World";
baffle();
}
what();
huh();
}
);
これは、次のように、ずさんな想像上のC ++にひどく変換されます:
template <class This>
function baffle() {
alert(This.b);
}
function what() {
b = "Hello";
baffle<what>();
}
function huh() {
b = "World";
baffle<huh>();
}
what();
huh();
this
は歴史的な理由から最も適切だと思います。 JavaScriptの this
には、1つのサイズに完全に適合するフレーズはありません。なぜなら、 this
手続き関数のコンテキストまたはオブジェクトのコンテキスト内の this
。ただし、 this
は、 Function.apply
を使用してスクリプト作成者が割り当てることもできます。 Function.call
。
ただし、 this
の意味は調整可能です。これは、JavaScriptとDOMが非常に奇妙な方法で機能するためです。たとえば、 Function.apply
の主な用途は、イベント呼び出しで要素参照のコンテキストを保持することです。これは、Prototyeの Function.bind()
メソッドで確認できます。
this
は、関数が実行されているコンテキストのプレースホルダーであり、それ以上特定することは困難です。ただし、ほとんどの this
の使用により、意味的に適切なキーワードになります。 bind()
の場合、関数内で this
の意味を任意に変更するメソッドを使用している場合でも、 thisを作成するために使用する必要があります
なしよりも適切です。多くのアマチュアJavaScriptプログラマーは、イベントハンドラーでの this
の奇妙な動作に見舞われており、 Function.apply
を使用してその「間違った」を正しています。
自己参照ロジック(自己またはこれ)は、自己(これ)以外で作業することの利点に対する矛盾を回避します。 self(これ)がすべてを1つに維持し、インスタンスなしでクラスメソッド(static)を使用して静的のままにすることもできます。パラドックスを避けるために、自己参照を避け、ロジックはすべての真実を証明可能にし、逆もまた真であり、すべての証明可能物を真にします。