JavaScript_javascript スキルにおけるこのポインターの柔軟な理解

これは JavaScript のキーワードの 1 つであり、プログラムを作成する際によく使用されます。このキーワードを正しく理解して使用することが特に重要です。まず第一に、this のポイントは関数の定義時には決定できないということです。実際、this が最終的にそれを呼び出すオブジェクトを指すことが決定できるのは、関数が実行されるときだけです。この文はやや問題があります。なぜ問題があるのか​​は後ほど説明します。インターネット上のほとんどの記事ではこのように書かれていますが、そのように理解すれば問題ない場合が多いのですが、実際にはその理解は正確ではありません。ということなので、理解する前は「理解できない」という気持ちになると思いますので、次にこの問題を詳しく見ていきたいと思います。

なぜこれを学ぶ必要があるのですか?関数型プログラミングやオブジェクト指向プログラミングを学習したことがある方は、それが何に使われるかを必ず知っています。まだ学習していない方は、当面この記事を読む必要はありません。興味があるなら、これはマスターする必要があるものです。

例 1:

function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this); //Window
}
a();

上で述べたように、これは最終的にそれを呼び出すオブジェクトを指します。 、次のコードが証明できるように、ここでの関数 a は実際には Window オブジェクトによって指されています。

function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this);　　//Window
}
window.a();

実際には、alert もウィンドウの属性であり、ウィンドウごとにクリックされます。

例 2:

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
o.fn();

これを fn と呼ぶので、これはオブジェクト o を指します。 o.fn() を通じて実行されるため、本来のポイントはオブジェクト o です。この関数のポイントは関数の作成時には決定できず、関数を呼び出すときにのみ決定できることをもう一度強調しておきます。それを理解するために。

実際、例 1 と例 2 は十分に正確ではありません。次の例は、上記の理論を覆す可能性があります。

これを完全に理解したい場合は、次のいくつかの例を読む必要があります。

例 3:

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
window.o.fn();

このコードは上記のコードとほぼ同じですが、上記の理論によれば、最終的に this がそれを呼び出すオブジェクトを指しているのであれば、なぜこれがウィンドウを指していないのでしょうか?余分なことを言っておきますが、Window は js のグローバル オブジェクトです。作成した変数は実際に window に属性を追加するので、ここでは window dot オブジェクトを使用できます。

上記のコードでこれがウィンドウを指していない理由は説明しません。コードの一部を見てみましょう。

var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12
}
}
}
o.b.fn();

ここでもオブジェクト o がクリックされていますが、これも実行されません。そうすると、私が で言ったように間違いなく言うでしょう。始まり それは全部間違っていませんか？実際にはそうではなく、最初に述べたことが不正確だっただけです。次に、これで指摘されている問題を完全に理解できると思います。

ケース 1: 関数内に this があるが、上位レベルのオブジェクトによって呼び出されない場合、this はウィンドウを指します。ここで説明する必要があるのは、厳密な関数内にあるものです。 js のバージョン、これはウィンドウを指しませんが、ここでは厳密なバージョンについては説明しません。詳しく知りたい場合は、オンラインで検索してください。

ケース 2: 関数内に this があり、この関数が上位レベルのオブジェクトによって呼び出される場合、this は上位レベルのオブジェクトを指します。

ケース 3: 関数内に this がある場合、この関数には複数のオブジェクトが含まれていますが、この関数は最外層のオブジェクトを指しているだけです。例 3 で証明できます。信じられない場合は、続けていくつかの例を見てみましょう。

var o = {
a:10,
b:{
// a:12,
fn:function(){
console.log(this.a); //undefined
}
}
}
o.b.fn();

オブジェクト b には属性 a はありませんが、これはオブジェクト b を指します。これは、その上位のみを指すためです。このオブジェクトに必要なものがあるかどうかに関係なく、レベル オブジェクト。

別の特殊なケースがあります。例 4:

var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();

ここでは window を指します。少し混乱していますか？実際、それはあなたが文章を理解していなかったからであり、これも重要です。

例 4 では、関数 fn に値が割り当てられている場合、関数 fn はオブジェクト b によって参照されますが、これは常に最後に呼び出したオブジェクトを指します。変数 j が与えられても実行されないため、最終的には window を指します。これは、fn を直接実行する例 3 とは異なります。

これは実際には同じものですが、状況によっては異なるものを指します。上記の要約にはいくつかの小さな間違いがあり、間違いであるとは言えません。環境が違えば状況も異なるので、一度にわかりやすく説明することはできず、ゆっくりと体験していただくしかありません。

これのコンストラクター バージョン:

function Fn(){
this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子

The reason why object a can point out the user in function Fn is because the new keyword can change the point of this and point this this to object a. Why do I say a is an object? Because using the new keyword is to create an object. Object instance. To understand this sentence, you can think about our example 3. Here we create an instance of Fn using variable a (equivalent to copying a copy of Fn into object a). At this time, it is only created and not executed. The object that calls this function Fn is object a, so this naturally points to the object, so why is there user in object Fn? Because you have copied a copy of the Fn function to object a, and using the new keyword is equivalent to copying. Ordered one.

In addition to the above, we can also change the point of this by ourselves. Regarding changing the point of this by ourselves, please see the summary of the call, apply, and bind methods in JavaScript. This article explains in detail. How do we manually change the pointer of this.

The above is the content of flexibly understanding this pointing to _javascript skills in JavaScript. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!