JavaScript 関数呼び出し
JavaScript 関数を呼び出す方法は 4 つあります。
それぞれの方法の違いは、thisの初期化です。
thisキーワード
一般に、JavaScriptでは、関数が実行されるときに、thisは現在のオブジェクトを指します。
 | thisは予約されたキーワードであり、thisの値を変更できないことに注意してください。 |
|---|
JavaScript 関数の呼び出し
前の章では、関数の作成方法を学習しました。
関数内のコードは、関数が呼び出された後に実行されます。
関数呼び出しとして
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>
全局函数 (myFunction) 返回参数参数相乘的结果：
</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2);
</script>
</body>
</html>インスタンスを実行する »
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
上記の関数はどのオブジェクトにも属しません。ただし、JavaScript では、これは常にデフォルトのグローバル オブジェクトです。
HTML のデフォルトのグローバル オブジェクトは HTML ページ自体であるため、関数は HTML ページに属します。
ブラウザのページオブジェクトはブラウザウィンドウ(ウィンドウオブジェクト)です。上記の関数は自動的にウィンドウオブジェクトの関数になります。
myFunction() と window.myFunction() は同じです:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>全局函数 myFunction() 会自动成为 window 对象的方法。</p>
<p>myFunction() 类似于 window.myFunction()。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2);
</script>
</body>
</html>インスタンスの実行»
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します
| | これは JavaScript 関数の呼び出しは一般的な方法ですが、グローバル変数、メソッド、関数は名前の競合バグを引き起こしやすいため、適切なプログラミング方法ではありません。 |
|---|
グローバルオブジェクト関数が自身のオブジェクトによって呼び出されない場合、
thisの値がグローバルオブジェクトになります。
Web ブラウザでは、グローバル オブジェクトはブラウザ ウィンドウ (ウィンドウ オブジェクト) です。 このインスタンスによって返される値はウィンドウ オブジェクトです:インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>在 HTML 中 <b>this</b> 的值, 在全局函数是一个 window 对象。</p>
<p id="demo"></p>
<script>
function myFunction() {
return this;
}
document.getElementById("demo").innerHTML = myFunction();
</script>
</body>
</html>オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
| 機能as global Object呼び出しにより、this | の値がグローバルオブジェクトになります。 ウィンドウ オブジェクトを変数として使用すると、プログラムがクラッシュしやすくなる可能性があります。 |
|---|
| | 関数Object メソッド call として、 this の値がオブジェクト自体になります。 |
|---|
コンストラクターを使用して関数を呼び出します
関数呼び出しの前にnewキーワードが使用される場合、コンストラクターが呼び出されます。
これは新しい関数が作成されたように見えますが、実際には JavaScript 関数がオブジェクトを再作成しています:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>该实例中， myFunction 是函数构造函数:</p>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName;
</script>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
コンストラクターを呼び出すと、新しいオブジェクトが作成されます。新しいオブジェクトはコンストラクターのプロパティとメソッドを継承します。
| コンストラクターのthisキーワードには値がありません。 this の値は、関数が呼び出されたときにオブジェクト (新しいオブジェクト) がインスタンス化されるときに作成されます。 |
|---|
関数メソッドとして関数を呼び出す
JavaScript では、関数はオブジェクトです。 JavaScript 関数にはプロパティとメソッドがあります。
call() と apply() は事前定義された関数メソッドです。 関数の呼び出しには 2 つのメソッドを使用できます。両方のメソッドの最初のパラメータはオブジェクト自体である必要があります。
インスタンス
Return a * b;
}
myFunction.call(myObject, 10, 2); // 20 を返す
instance
Return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray); // Return 20
どちらのメソッドも最初のパラメータとしてオブジェクト自体を使用します。 2 つの違いは 2 番目のパラメータです。 apply に渡されるのはパラメータ配列です。つまり、複数のパラメータが 1 つの配列に結合されて渡されますが、call は call のパラメータとして (2 番目のパラメータから開始して) 渡されます。
JavaScript 厳密モードでは、パラメータがオブジェクトでなくても、関数を呼び出すときに最初のパラメータが this の値になります。
JavaScript の非厳密モードでは、最初のパラメーターの値が null または未定義の場合、代わりにグローバル オブジェクトが使用されます。
| call() または apply() メソッドを使用すると、this の値を設定し、既存のオブジェクトの新しいメソッドとして呼び出すことができます。 |
|---|
