JavaScript関数の呼び出し
JavaScript内のコードはfunction
、「何か」がそれを呼び出すときに実行されます。
JavaScript関数の呼び出し
関数が定義されている場合、関数内のコードは実行されません。
関数内のコードは、関数が呼び出されたときに実行されます。
「関数を呼び出す」の代わりに「関数を呼び出す」という用語を使用するのが一般的です。
また、「関数の呼び出し」、「関数の開始」、または「関数の実行」と言うこともよくあります。
このチュートリアルでは、JavaScript関数を呼び出さなくても呼び出すことができるため、invokeを使用します。
関数を関数として呼び出す
例
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); //
Will return 20
上記の関数はどのオブジェクトにも属していません。ただし、JavaScriptには、常にデフォルトのグローバルオブジェクトがあります。
HTMLでは、デフォルトのグローバルオブジェクトはHTMLページ自体であるため、上記の関数はHTMLページに「属します」。
ブラウザでは、ページオブジェクトはブラウザウィンドウです。上記の関数は自動的にウィンドウ関数になります。
myFunction()とwindow.myFunction()は同じ関数です:
例
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // Will also return 20
これはJavaScript関数を呼び出す一般的な方法ですが、あまり良い方法ではありません。
グローバル変数、メソッド、または関数は、グローバルオブジェクトに名前の競合やバグを簡単に作成する可能性があります。
このキーワード_
JavaScriptでは、と呼ばれるものthis
は、現在のコードを「所有する」オブジェクトです。
の値はthis
、関数で使用される場合、関数を「所有する」オブジェクトです。
this
これは変数ではないことに注意してください。キーワードです。の値は変更できませんthis
。
ヒント:JS thisKeywordthis
でキーワードの詳細をお読みください。
グローバルオブジェクト
所有者オブジェクトなしで関数が呼び出されると、の値がthis
グローバルオブジェクトになります。
Webブラウザーでは、グローバルオブジェクトはブラウザーウィンドウです。
この例では、ウィンドウオブジェクトを次の値として返しますthis
。
例
let x = myFunction();
// x will be the window object
function myFunction() {
return this;
}
関数をグローバル関数として呼び出すと、この値がグローバルオブジェクトになります。
ウィンドウオブジェクトを変数として使用すると、プログラムが簡単にクラッシュする可能性があります。
メソッドとしての関数の呼び出し
JavaScriptでは、関数をオブジェクトメソッドとして定義できます。
次の例では、 2つのプロパティ(firstNameとlastName)とメソッド(fullName)を持つオブジェクト( myObject )を作成します。
例
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"
fullNameメソッドは関数です。関数はオブジェクトに属しています。myObjectは関数の所有者です。
と呼ばれるものthis
は、JavaScriptコードを「所有する」オブジェクトです。この場合、の値this
はmyObjectです。
試して!fullNameメソッドを変更して、次の値を返しthis
ます。
例
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
// This will return [object Object] (the owner object)
myObject.fullName();
関数をオブジェクトメソッドとして呼び出すと、の値がthis
オブジェクト自体になります。
関数コンストラクターを使用した関数の呼び出し
関数呼び出しの前にnew
キーワードがある場合、それはコンストラクター呼び出しです。
新しい関数を作成しているように見えますが、JavaScript関数はオブジェクトであるため、実際には新しいオブジェクトを作成します。
例
// This is a function constructor:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
const myObj = new myFunction("John", "Doe");
// This will return "John"
myObj.firstName;
コンストラクターの呼び出しにより、新しいオブジェクトが作成されます。新しいオブジェクトは、そのコンストラクターからプロパティとメソッドを継承します。
コンストラクターのthis
キーワードに値がありません。
の値はthis
、関数が呼び出されたときに作成される新しいオブジェクトになります。