JavaScript this 呼び出しルール description_javascript スキル

JavaScript 関数呼び出しルール 1
(1) グローバル関数呼び出し:

コードをコピー コードは次のとおりです:

function makeArray( arg1, arg2 ){
return [this , arg1 , arg2 ];
}

これは関数を定義するために最も一般的に使用される方法です。 JavaScript を学習している人はその使い方に精通していると思います。
呼び出しコードは次のとおりです:
makeArray('one', 'two');
// => [ window, 'one', 'two' ]
このメソッドは次のようになります。グローバル関数呼び出しと言われます。
なぜグローバル関数と言われるのですか?
これはグローバル オブジェクト ウィンドウのメソッドであるため、
次のメソッドで確認できます。
alert( typeof window.methodThatDoesntExist );
// => ( typeof window .makeArray);
// => function
したがって、makeArray を呼び出すために使用したメソッドは、以下で呼び出されるメソッドと同じです
window.makeArray('one', 'two') ;
// => [ window, 'one', 'two' ]
JavaScript 関数呼び出しルール 2
(1) オブジェクトメソッド呼び出し:

コードをコピー コードは次のとおりです:

//オブジェクトの作成
var arrayMaker = {
someProperty: 'ここに値を入力します',
make: makeArray
};
arrayMaker.make('one', 'two') // => [ arrayMaker, 'one', 'two' ]
//または次のメソッドを使用して呼び出します:
arrayMaker['make']('one', 'two') // => [ arrayMaker, 'one', 'two' ]

ここと先ほどを参照してください。違いを見てください。this の値はオブジェクト自体になります。

元の関数定義は変更されないのに、これはなぜ変更されるのかと疑問に思うかもしれません。
なるほど、疑問を持つのは当然です。これには、JavaScript で関数を渡す方法が関係します。
関数は JavaScript の標準データ型です。
それはオブジェクト全体を渡すことも、コピーすることもできます。 function パラメータリストと関数本体の両方がコピーされ、
が arrayMaker の属性 make に割り当てられます。これは、次のように arrayMaker を定義するのと似ています。 code


コードは次のとおりです:

var arrayMaker = { someProperty: 'some value here', make: function (arg1, arg2) ) { return [ this, arg1, arg2 ]; } };

2 番目の呼び出しルールを理解していないと、多くの場合、さまざまな問題が発生します。イベント処理コードのバグ、例:




コードをコピー

コードは次のとおりです:

< ;input type= "button" value="ボタン 1" id="btn1" /> < ;input type= "button" value="Button 3" id="btn3" onclick="buttonClicked();"/> function buttonClicked( ){ var text = (this === window) ? 'window' : alert( text );

var button1 = document.getElementById('btn1') ;

var button2 = document.getElementById('btn2');
button1.onclick = function(){
buttonClicked(); >< / script>


これはメソッド呼び出しであり、これが属するオブジェクト (ボタン要素) であるため、最初のボタンをクリックすると「btn1」が表示されます。
2 番目のボタンをクリックすると、buttonClicked が直接呼び出されるため、「ウィンドウ」が表示されます (obj.buttonClicked() とは異なります)。
このボタンと 3 番目のボタンでは、イベント ハンドラーがラベルに直接配置されます。したがって、3 番目のボタンをクリックした結果は 2 番目のボタンと同じになります。
注意してください:




コードをコピーします


コードは次のとおりです:

button1 .onclick = buttonClicked;
button2.onclick = function(){
buttonClicked();
このポインタは異なります。

JavaScript 関数呼び出しルール 3 もちろん、jQuery ライブラリを使用している場合は、現在の値への参照が確実に含まれるように this の値を書き換えるのに役立ちます。イベントソース要素。 コードをコピー

コードは次のとおりです:


//jQuery を使用
$( '#btn1 ').click( function() {

alert( this.id ); // jQuery は 'this' がボタン
になることを保証します });
それでは、jQuery は this の値をどのようにオーバーロードするのでしょうか?
答えは次のとおりです: call() と apply();
関数を使用する機会が増えると、必要な this が不足していることがわかります。同じ状況において、これはコミュニケーションを非常に困難にします。
JavaScript では、関数もオブジェクトです。関数オブジェクトにはいくつかの事前定義メソッドが含まれており、そのうちの 2 つは this のコンテキストをリセットするために使用できます。

コードをコピー コードは次のとおりです:

function buttonClicked(){
var text = (this = == ウィンドウ) : this.id;
alert( text );
var button1 = document.getElementById('btn1'); .getElementById( 'btn2');
button1.onclick = buttonClicked;
buttonClicked.call(this); ; /script> ;


JavaScript 関数の呼び出しルール 4
(1) コンストラクター
JavaScript の型の定義について詳しく説明する必要はありません。 Javascript にはクラスがないことを知ってください。
また、カスタム型には初期化関数が必要です。(初期化関数のプロパティとして) プロトタイプ オブジェクトを使用して型を定義することもお勧めします。

作成しましょう単純な型




コードをコピー

コードは次のとおりです: //コンストラクターを宣言しますfunction ArrayMaker(arg1, arg2) { this.someProperty = 'whatever';

this.theArray = [ this, arg1, arg2 ]

// インスタンス化メソッドを宣言します
ArrayMaker.prototype = {
someMethod: function () {
alert( 'someMethod が呼び出されました');
},
getArray: function () {
return this.theArray; >}
};
var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'first' ); );
// = > [ am, 'one' , 'two' ]
other.getArray();
// => 🎜>

非常に重要で注目すべき点は、関数呼び出しの前に表示される new 演算子です。これがなければ、関数はグローバル関数と同じであり、作成するプロパティはグローバル関数で作成されます。オブジェクト（ウィンドウ）、そしてあなたはそれを望んでいません。
もう 1 つの点は、コンストラクターには戻り値がないため、new 演算子の使用を忘れた場合、変数の一部が未定義に割り当てられることになります。
したがって、コンストラクター関数を大文字で始めるのは良い習慣です。これは、呼び出し時に前の new 演算子を忘れないようにするために使用できます。
このように、初期化関数のコードは次のようになります。この言語で記述された他の初期化関数で使用するコードと同じです。この値が作成するオブジェクトになります。
概要
これらを通じて、方法の違いを理解していただければ幸いです。さまざまな関数が呼び出されるため、
JavaScript コードにバグが発生しないようにします。
この値の価値を知ることが、バグを回避するための第一歩です。