JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JS非同期

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


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つのプロパティ(firstNamelastName)とメソッド(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コードを「所有する」オブジェクトです。この場合、の値thismyObjectです。

試して!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、関数が呼び出されたときに作成される新しいオブジェクトになります。