TECH I.S.

JavaScript 関数呼び出し

JavaScript内のコードは、function「何か」がそれを呼び出すと実行されます。

JavaScript 関数の呼び出し

関数の定義時には、関数内のコードは実行されません。

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

関数を関数として呼び出す

例

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

自分で試してみる»

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

HTMLでは、デフォルトのグローバル オブジェクトはHTMLページ自体であるため、上記の関数はHTMLページに「属します」。

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


注意
これは、JavaScript 関数を呼び出す一般的な方法ですが、あまり良い方法ではありません。グローバル変数、メソッド、または関数により、グローバル オブジェクトで名前の競合やバグを簡単に作成する可能性があります。


myFunction() と window.myFunction() は同じ関数です。

例

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

自分で試してみる»

thisとは?

JavaScript では、キーワードはオブジェクトthisを指します.

どのthisオブジェクトがどのように呼び出されるか (使用または呼び出されるか)によって決まります。

キーワードthisは、使用方法に応じてさまざまなオブジェクトを指します。


オブジェクトメソッドでは、オブジェクトthisを参照します。
単独で、グローバルオブジェクトthisを参照します。
関数内では、グローバルオブジェクトthisを参照します。
関数では、strict モードで、thisはundefined.
イベントでは、イベントを受け取った要素thisを指します。
call()などのメソッドはapply()、 そしてbind()はこれを任意のオブジェクトthisに参照できます。
注意thisは変数ではなくキーワードですthisの値を変更することはできません. 関連項目 JavaScriptのthisのチュートリアル

グローバル オブジェクト

所有者オブジェクトなしで関数が呼び出されると、thisの値はグローバルオブジェクトになります。

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

この例では、ウィンドウオブジェクトをthisの値として返します。

例

let x = myFunction();           // xはウィンドウオブジェクトになります。 function myFunction() {   return this; }

自分で試してみる»

関数をグローバル関数として呼び出すと、thisの値がグローバルオブジェクトになります。ウィンドウオブジェクトを変数として使用すると、プログラムが簡単にクラッシュする可能性があります。

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

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

次の例では、2 つのプロパティ (firstNameとlastName)とメソッド (fullName)を持つオブジェクト (myObject)を作成します。

例

const myObject = {   lastName:"山田",   firstName: "太郎",   fullName: function () {     return this.lastName + " " + this.firstName;   } } myObject.fullName();         // 山田太郎を返します。

自分で試してみる»

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

thisと呼ばれるものは、JavaScript コードを「所有」するオブジェクトです。この場合、thisの値はmyObjectです。

試してみましょう！fullNameメソッドを変更して、thisの値を返します。

例

const myObject = {   lastName:"山田",   firstName: "太郎",   fullName: function () {     return this;   } } //これは[object Object] (所有者オブジェクト)を返します。 myObject.fullName();

自分で試してみる»

関数をオブジェクト メソッドとして呼び出すと、thisの値がオブジェクトそのものになります。

関数コンストラクターを使用した関数の呼び出し

関数呼び出しの前にnewキーワードが付いている場合、それはコンストラクターの呼び出しです。

新しい関数を作成したように見えますが、JavaScript 関数はオブジェクトであるため、実際には新しいオブジェクトを作成します。

例

// これは関数コンストラクターです: function myFunction(arg1, arg2) {   this.lastName = arg1;   this.firstName  = arg2; } // 新しいオブジェクトが生成されます const myObj = new myFunction("山田", "太郎"); // 「太郎」が返されます myObj.firstName;

自分で試してみる»

コンストラクターの呼び出しにより、新しいオブジェクトが作成されます。新しいオブジェクトは、そのコンストラクターからプロパティとメソッドを継承します。


コンストラクター内のキーワードthisには値がありません。thisの値は、関数が呼び出されたときに作成される新しいオブジェクトになります。




チュートリアル