JavaScript で関数を呼び出す 5 つの方法_javascript スキル

この記事では、JavaScript のさまざまな関数呼び出しの方法と原理を詳しく紹介します。これは、JavaScript 関数を理解するのに非常に役立ちます。

JavaScript、関数を呼び出す 5 つの方法

バグのある JavaScript コードは、JavaScript 関数がどのように機能するかを実際には理解していない結果であることに何度も気づきました (ちなみに、JavaScript には関数型プログラミングの特性が備わっています)。それは私たちの進歩の障害になるでしょう

。

初心者として、関数呼び出しの 5 つのメソッドをテストしてみましょう。表面的には、これらの関数は C# の関数と非常によく似ていると思いますが、まだ非常に重要な違いがあることがすぐにわかります。これらの違いを無視すると、間違いなくバグの追跡が困難になります。まず、以下で使用する単純な関数を作成しましょう。この関数は、this と 2 つの指定されたパラメーターのみを返します。

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

<スクリプトタイプ="text/javascript">
関数 makeArray(arg1, arg2){
Return [ this, arg1, arg2 ];
}

最も一般的に使用されるメソッドですが、残念なことに、グローバル関数呼び出し

Javascript を学習したとき、上記の例の構文を使用して関数を定義する方法を学びました。
また、この関数の呼び出しは非常に簡単であることもわかります。必要な作業は次のとおりです。

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

makeArray('1', 'two');
// => [ウィンドウ, '1', '2' ]

ちょっと待ってください、あの窓は何ですか


alert( typeof window.methodThatDoesntExist );
// => 未定義
alert(window.makeArray の種類);
// =>


window.makeArray('one', 'two');
// => [ウィンドウ, '1', '2' ]

最も一般的な呼び出しメソッドは、宣言した関数がデフォルトでグローバルになるため、残念だと言えます。これは、JavaScript では特に当てはまり、JavaScript では使用を避けてください。グローバルメンバーの皆さん、後悔はしないでしょう。

JavaScript 関数呼び出しルール 1
myFunction() など、明示的な所有者オブジェクトなしで直接呼び出される関数では、this の値がデフォルトのオブジェクト (ブラウザーのウィンドウ) になります。

関数呼び出し

メソッドの 1 つとして makeArray 関数を使用して、単純なオブジェクトを作成しましょう。json を使用してオブジェクトを宣言し、このメソッドも呼び出します。

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

// オブジェクトを作成します
var arrayMaker = {
SomeProperty: 'ここに何らかの値',
作成: makeArray
};

// make() メソッドを呼び出します
arrayMaker.make('1', 'two');
// => [ arrayMaker, 'one', 'two' ]
// 角括弧を使用した代替構文
arrayMaker['make']('1', 'two');
// => [ arrayMaker, 'one', 'two' ]

ここで違いを見てください。 this の値はオブジェクト自体になります。なぜ元の関数定義が変更されていないのか、なぜ window ではないのか疑問に思うかもしれません。これが JSavacript で渡される関数です。関数は JavaScript の標準データ型であり、オブジェクトを渡すこともコピーすることもできます。これは、パラメーター リストと関数本体を含む関数全体がコピーされ、arrayMaker 属性に割り当てられてから、 を定義するようなものです。 arrayMaker は次のようになります:

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

var arrayMaker = {
SomeProperty: 'ここに何らかの値',
Make: function (arg1, arg2) {
return [ this, arg1, arg2 ];
}
};

JavaScript 関数呼び出しルール 2

obj.myFunction() や obj['myFunction']() などのメソッド呼び出し構文では、この値は obj

です。

これはイベント処理コードのバグの主な原因です。これらの例を確認してください

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

<スクリプトタイプ="text/javascript">
関数 buttonClicked(){
var text = (this === window) : this.id;
アラート(テキスト);
}
var button1 = document.getElementById('btn1');
var button2 = document.getElementById('btn2');

button1.onclick = buttonClicked;
button2.onclick = function(){ buttonClicked() };

最初のボタンをクリックすると、メソッド呼び出しであるため「btn」が表示され、これが属するオブジェクト (ボタン要素) になります。2 番目のボタンをクリックすると、(obj とは異なり) buttonClicked が直接呼び出されるため、「window」が表示されます。 buttonClicked().) これは 3 番目のボタンと同じで、イベント ハンドラー関数をラベルに直接配置します。そのため、3 番目のボタンをクリックした結果は 2 番目のボタンと同じになります。 jQuery のような JS ライブラリを使用すると、jQuery でイベント処理関数が定義されているときに、JS ライブラリが this の値を書き換えて、現在のイベント ソース要素
への参照が確実に含まれるようにするという利点があります。

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

//jQueryを使用します
$('#btn1').click( function() {
alert( this.id ); // jQuery は 'this' がボタンであることを保証します
});

jQuery はこの値をどのようにオーバーロードしますか? 続きを読む
他の 2 つ: apply() と call()

JavaScript 関数を使えば使うほど、Qjuery がイベント ハンドラーで行うのと同じように、関数を渡して別のコンテキストで呼び出す必要があることがわかり、この値をリセットする必要があることがよくあります。関数は Javascript のオブジェクトでもあり、関数オブジェクトにはいくつかの定義済みメソッドが含まれており、そのうちの 2 つは Set.

を変更するために使用できます。

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

var GasGuzzler = { 年: 2008、モデル: 'ダッジ ベイルアウト' };
makeArray.apply(gasGuzzler, [ 'one', 'two' ] );
// => [ガスガズラー, '1' , '2' ]
makeArray.call(gasGuzzler, 'one', 'two' );
// => [ガスガズラー, '1' , '2' ]

2 つのメソッドは似ています。違いは次のパラメータです。Function.apply() は配列を使用して関数に渡しますが、Function.call() はこれらのパラメータを個別に渡します。 ) ほとんどの場合、より便利です。

JSavacript 関数呼び出しルール 3

関数をメソッドにコピーせずに this の値をオーバーロードしたい場合は、myFunction.apply( obj ) または myFunction.call( obj ) を使用できます。

コンストラクター

JavaScript の型の定義については詳しく説明したくありませんが、現時点では、JavaScript にはクラスが存在せず、カスタム型にはプロトタイプ オブジェクト (次のように) を使用して定義された初期化関数が必要であることを知っておく必要があります。初期化関数の属性) あなたの型も素敵なイズムなので、単純な型を作成しましょう

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

//コンストラクターを宣言します
function ArrayMaker(arg1, arg2) {
This.someProperty = '何でも';
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', 'next' );

am.getArray();
// => [午前, '1' , '2' ]

非常に重要で注目すべき点は、関数呼び出しの前に表示される new 演算子です。これがなければ、関数はグローバル関数と同様になり、作成するプロパティはグローバル オブジェクト (ウィンドウ) 上に作成されます。それは望ましくありません。別のトピックは、コンストラクターには戻り値がないため、new 演算子を使用するのを忘れると、一部の変数が未定義に割り当てられることになります。このため、コンストラクター関数はそれです。大文字で始めることをお勧めします。これは、電話をかけるときに前の新しい演算子を忘れないように注意するために役立ちます。

この点に注意してください。初期化関数のコードは、他の言語で作成する初期化関数と似ています。

この値は、作成するオブジェクトになります。

JavaScript 関数呼び出しルール 4

MyFunction() などの関数を初期化関数として使用すると、JavaScript ランタイムは新しく作成されたオブジェクトに this の値を割り当てます。

さまざまな関数の呼び出し方法の違いを理解することで、JavaScript コードをバグから遠ざけることができれば幸いです。また、この値の値を常に認識することがバグを回避するための第一歩です。