JavaScript の this は、

初心者にとっては、次の例のように js について多くの混乱を招くでしょう: ヴァル a =

;var obj = {a: 'トム',b : 機能 ( ){ console.log(this.a);}} ;var c = obj .. ここでの出力は tom, であるべきだと思いますが、実際には、ここでの出力は jack , しかし、これは何を求めていますか?そして、投稿者はそれを段階的に分析します . js で指す一般的な this

4 つの タイプ:1 に分かれています。 何オブジェクト this 、 内にあります。つまり、オブジェクトのプロパティは function、、および function

this、たとえば、次の例は :

var obj = {a: 'tom',b: 関数(){ コンソール.ログ( this.a);}};obj.b(); //出力はですtom

この場合、thisは関数を呼び出すオブジェクトを指します、ここにobj、別の例は次のとおりです:

var obj = {a: 'tom',b: function(){ console.log ( これ . a);},c: {c0: 'rose',c1 : 機能 () { console.log(this.c0);} } };obj.c 。c1();//出力ジャック

関数が呼び出されるとき、には複数のオブジェクトが含まれていますが、この関数は最も外側のオブジェクトによって呼び出されますが、thisはその上位レベルのオブジェクト

?

var a = 'jack';var obj = {a : 'トム、 b: 関数(){ (this。a); } };var c = obj.b;c();//outputjack 全員に一つのことthis

を指しているということを覚えておいてください。つまり、ここのcにはobj.b、の値が割り当てられていますが、変数は割り当てられていますcは依然としてグローバルwindowオブジェクト、にハングしているため、最終的にthisはグローバルwindowオブジェクト2を指します。 関数を直接呼び出す

、関数をグローバルに直接呼び出します

var name = 'tom';var a = function(){ var name = 'ジャック';console.log(this.name);};console.log (あ( ; ああ。a()つまり、thisはグローバルwindow

を指します:var 名前 = 'トム' ;var a = function(){

var name = 'jack' ;機能b (){ console.log(this.name);}b( ); //出力トムコンソール.ログ(this.name);};コンソール.ログ( あ()) ; //出力トム

a と b は両方とも tom を出力しますが、 関数 b は、後で関数 a で呼び出されたときに、依然としてグローバル window オブジェクト を指しています。 、なぜこれなのか?関数を直接呼び出すオブジェクトがjsにない限り、関数が呼び出されたときにthisのポインタを一つ覚えておけば大丈夫です。 がポイントされる グローバル window object が前の例のように呼び出される場合、 、 obect.function() 、および this

上の object をポイントします。 、 like var

obj = {a: 'tom',b: 関数(){ コンソール.log (this.a);}};obj.b ()/ /outputtom 冒頭の例のように、この文だとわかりやすいです、関数の呼び出しc

ウィンドウオブジェクト

var a = 'ジャック';var obj = {a: 'トム', b: function(){ console.log(this.a);}} ;var c = object. Js 、 では、コンストラクターと通常の関数の間に明確な区別はありません。オブジェクトの型を作成するために通常の関数が使用される場合、それはコンストラクターまたはコンストラクターと呼ばれます。関数が真のコンストラクターとして機能するには、次の条件を満たす必要があります: 1。通常はプロパティとメソッドを追加して、関数内に新しいオブジェクト (this) のプロパティを設定します。

2、 コンストラクターには return ステートメントを含めることができます (非推奨) が、戻り値は this

例:

関数人(名前、年齢、性別){この.名前 =名前;これ p = 新しい人('トム'、12、'男性'); console.log (p.名前+ p.性別+ p.年齢); //出力tom 男性12 ここにthisは現在の作成されたオブジェクトを指しますもちろん、コンストラクターには特殊なケースもあります、例えば:

関数人(名前、年齢、性別){この.名前 =名前;これ .年齢 = 年齢;this.性別= 性別; return {}; }ヴァール p = 新しい人('トム',12,'男性' );コンソール log(p.name);//outputunknown

this または非オブジェクト型 、 したがって、ここでの People は、厳密な意味ではコンストラクターではありません、ここで宣言されている p は、実際には関数 People の単なる戻り値です, したがって、最終的な出力は未定義です、ここで戻り値が非オブジェクト型に変更されると、最終結果は異なります

関数人(名前、年齢、性別){この.名前 =名前;これ .年齢=年齢;this.性別=性別;}; p = 新しい 人々(「トム」、12、「男性」);コンソール。 ログ(p.) name);//outputtomここでのPeopleは、厳密な意味でのコンストラクターです、 So

this はまだ現在作成されているものを指しますオブジェクト

4. callまたはapply関数呼び出し

Callとapply関数はほぼ同じです、最初のパラメータは呼び出し関数のオブジェクトです、 背後にあるパラメータはすべて関数のパラメータです、は単なるcall関数のパラメータの受け渡し方法は、無制限の数のパラメータ、を渡すこと、つまりcall([ thisObject[,arg1 [,arg2 [,...,argn]]]]) の後のパラメータはそれぞれ関数呼び出しのパラメータ 、 に対応し、 apply 関数の最初のパラメータはcall、と同じ 2番目のパラメータは配列型、apply([thisObj [,argArray] ]) 配列の各要素は関数呼び出しのパラメータにも対応します、callまたはapplyを使用する場合、関数はメソッド内の、thisであり、callの最初のパラメータにリダイレクトされますまたはお申し込みください関数、例:

var a = 1;var b = 2;var c = {a: 3 ,b: 4};function add(){ console.log( これ. a + this.b)}add();//output3add .申し込む(c );//Output7

最初のadd呼び出しにはオブジェクトへの直接呼び出しがないため、グローバルwindowオブジェクトを指すことになります。出力結果は 3, 最初の add 関数は apply 関数を通じて呼び出されるため、 this のポインタは c に向けられます。最終的な出力結果は 7

Es6Expansion:

Es6のアロー関数のthisポインタは、es5のthisとは異なります、ここで言及しましょう: バインディングこれ、それは、それが存在するコンテキスト (つまり、定義されている場所) の this 値を独自の this 値としてキャプチャするため、 call() / apply() / binding() このメソッドはアロー関数にパラメータを渡すだけであり、その this には影響しません。 this が語彙レベルにあることを考慮すると、厳密モードのthis に関連するルールは無視されます。

c

};a.b , so オブジェクト内でアロー関数を使用する場合、this のポインタグローバルwindowオブジェクトも指します。2. メソッド内のアロー関数の呼び出し

var test = function(){this.time = 1 ;setTimeout(()= > 00)}; var t = 新しいテスト();//出力1そこにアロー関数のthisは、pointer、soです。ポインティングは、それが作成されたコンテキストにのみ関連します、ここではコンストラクターの呼び出しであるため、thisのポインティングは行われません。 testのはt

, したがって、アロー関数のthisも戻りオブジェクトを指します。のためにその他の関連コンテンツについては、php 中国語 Web サイトに注目してください。 関連する推奨事項: Word、txt、Excel、PPT、その他のファイルをアップロードするWeChatミニプログラムの詳細な説明バックエンドPHPを介してWeChatミニプログラムを通じてファイルをダウンロードする方法 MySQL のパフォーマンスを向上させる 7 つのヒントを紹介します

以上がこれをJavaScriptで説明するとの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。