JavaScript 関数呼び出し

JavaScript の関数には4つの呼び出し方があります。

それぞれの方法の違いはthisthis の初期化にあります。

thisキーワード

一般的に、JavaScript では、this は関数実行時の現在のオブジェクトを指します。

Note 注意thisは予約キーワードであり、変更することはできませんthisthis の値。

JavaScript 関数の呼び出し

前の章では、関数の作成方法をすでに学びました。

関数内のコードは、関数が呼び出された後に実行されます。

関数として呼び出す

例

function myFunction(a, b) { return a * b; } myFunction(10, 2); //myFunction(10, 2) は 20 を返します

試してみる »

上記の関数はどのオブジェクトにも属しません。しかし、JavaScript では、それは常にデフォルトのグローバルオブジェクトです。

HTML では、デフォルトのグローバルオブジェクトは HTML ページ自体なので、関数は HTML ページに属します。

ブラウザでは、ページオブジェクトはブラウザウィンドウ（window オブジェクト）です。上記の関数は自動的に window オブジェクトの関数になります。

myFunction() と window.myFunction() は同じです：

例

function myFunction(a, b) { return a * b; } window.myFunction(10, 2); //window.myFunction(10, 2) は 20 を返します

試してみる »

Note これは JavaScript 関数を呼び出す一般的な方法ですが、良いプログラミング習慣ではありません。
グローバル変数、メソッド、関数は、名前の衝突によるバグを引き起こしやすくなります。

グローバルオブジェクト

関数が自身のオブジェクトによって呼び出されていないとき、thisthis の値はグローバルオブジェクトになります。

Web ブラウザでは、グローバルオブジェクトはブラウザウィンドウ（window オブジェクト）です。

この例で返されるthisthis の値は window オブジェクトです：

例

function myFunction() { return this; } myFunction(); //window オブジェクトを返します

試してみる »

Note 関数をグローバルオブジェクトとして呼び出すと、thisthis の値がグローバルオブジェクトになります。
window オブジェクトを変数として使用すると、プログラムがクラッシュしやすくなります。

関数をメソッドとして呼び出す

JavaScript では、関数をオブジェクトのメソッドとして定義できます。

次の例ではオブジェクトを作成します（myObject）。そのオブジェクトには2つのプロパティ（firstNameとlastName）と1つのメソッドがあります（fullName):

例

var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this.firstName + " " + this.lastName; } } myObject.fullName(); //"John Doe" を返します

試してみる »

fullNameメソッドは関数です。関数はオブジェクトに属します。myObjectthis は関数の所有者です。

thisオブジェクトは JavaScript コードを所有しています。この例ではthisthis の値はmyObjectオブジェクトです。

以下をテストしてください！fullNamefullName メソッドを変更してthisthis の値を返します：

例

var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this; } } myObject.fullName(); //[object Object] を返します（所有者オブジェクト）

試してみる »

Note 関数をオブジェクトのメソッドとして呼び出すと、thisthis の値はオブジェクト自体になります。

コンストラクタを使って関数を呼び出す

関数を呼び出す前にnewnew キーワードを使用した場合は、コンストラクタを呼び出したことになります。

これは新しい関数を作成しているように見えますが、実際には JavaScript 関数は再作成されたオブジェクトです：

例

//コンストラクタ： function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } // This creates a new object var x = new myFunction("John","Doe"); x.firstName; //"John" を返します

試してみる »

コンストラクタの呼び出しは新しいオブジェクトを作成します。新しいオブジェクトはコンストラクタのプロパティとメソッドを継承します。

Note コンストラクタ内ではthisthis キーワードには値がありません。
thisthis の値は、関数呼び出しがオブジェクトをインスタンス化する（new object）ときに作成されます。

関数を関数メソッドとして呼び出す

JavaScript では、関数はオブジェクトです。JavaScript 関数にはプロパティとメソッドがあります。

call()とapply()call() と apply() は定義済みの関数メソッドです。2つのメソッドは関数の呼び出しに使用でき、最初の引数はオブジェクト自体でなければなりません。

例

function myFunction(a, b) { return a * b; } myObject = myFunction.call(myObject, 10, 2); //20 を返します

試してみる »

例

function myFunction(a, b) { return a * b; } myArray = [10, 2]; myObject = myFunction.apply(myObject, myArray); //20 を返します

試してみる »

2つのメソッドはどちらも最初の引数としてオブジェクト自体を使用します。両者の違いは2番目の引数にあります。apply は引数の配列を渡します。つまり複数の引数を1つの配列にまとめて渡します。一方、call は call の引数として渡します（2番目の引数から始まります）。

JavaScript の厳格モード（strict mode）では、関数を呼び出すときに最初の引数はthisthis の値になります。たとえその引数がオブジェクトでなくても。

JavaScript の非厳格モード（non-strict mode）では、最初の引数の値が null または undefined の場合、代わりにグローバルオブジェクトが使用されます。

Note call() または apply() メソッドを使用すると、thisthis の値を設定し、既存のオブジェクトの新しいメソッドとして呼び出すことができます。
その他の拡張