JavaScriptで関数を呼び出す方法にはどのようなものがありますか?

JavaScript で関数を呼び出す方法は次のとおりです: 1. makeArray 関数をメソッドの 1 つとして使用し、json を使用してオブジェクトを宣言します; 2. [obj.myFunction()] メソッドを使用して構文を呼び出します。

このチュートリアルの動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、DELL G3 コンピューター。

JavaScript で関数を呼び出す方法は次のとおりです。

JavaScript 関数呼び出しのルール 1

明確な所有者なしで関数を呼び出すobject myFunction() などの関数を直接呼び出すと、 this の値がデフォルトのオブジェクト (ブラウザのウィンドウ) になります。

関数呼び出し

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

//creating the object
var arrayMaker = {
    someProperty: 'some value here',
    make: makeArray
};
 
//invoke the make() method
arrayMaker.make('one', 'two');
// => [ arrayMaker, 'one', 'two' ]
// alternative syntax, using square brackets
arrayMaker['make']('one', 'two');
// => [ arrayMaker, 'one', 'two' ]

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

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

JavaScript 関数呼び出しルール 2

obj.myFunction( ) や obj['myFunction' などのメソッド呼び出し構文内]() の場合、この値は obj になります。

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

<input type="button" value="Button 1" id="btn1"  />
<input type="button" value="Button 2" id="btn2"  />
<input type="button" value="Button 3" id="btn3"  onclick="buttonClicked();"/>
 
<script type="text/javascript">
function buttonClicked(){
    var text = (this === window) ? &#39;window&#39; : this.id;
    alert( text );
}
var button1 = document.getElementById(&#39;btn1&#39;);
var button2 = document.getElementById(&#39;btn2&#39;);
 
button1.onclick = buttonClicked;
button2.onclick = function(){   buttonClicked();   };
</script>

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

jQuery のような JS ライブラリを使用すると、次のような利点があります。イベント処理関数が jQuery で定義されている場合、JS ライブラリは this の値を書き換えて、現在のイベント ソース要素への参照が確実に含まれるように支援します。

//使用jQuery
$('#btn1').click( function() {
    alert( this.id ); // jQuery ensures 'this' will be the button
});

関連の無料学習推奨事項: JavaScript ビデオ チュートリアル

以上がJavaScriptで関数を呼び出す方法にはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。