JavaScript 関数呼び出し
JavaScript関数呼び出し
JavaScript関数には4つの呼び出しメソッドがあります。
各メソッドの違いは、この初期化にあります。
このキーワード
一般に、JavaScript では、関数が実行されるときに、これは現在のオブジェクトを指します。
これは予約されたキーワードであり、この値は変更できないことに注意してください。
JavaScript 関数の呼び出し
前の章では、関数の作成方法を学習しました。
関数内のコードは、関数が呼び出された後に実行されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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() は同じです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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 ブラウザでは、グローバル オブジェクトはブラウザ ウィンドウ (ウィンドウ オブジェクト) です。
このインスタンスによって返される this の値は window オブジェクトです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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>この関数はグローバル オブジェクトとして呼び出され、this の値がグローバル オブジェクトになります。
ウィンドウ オブジェクトを変数として使用すると、プログラムがクラッシュしやすくなる可能性があります。
メソッドとしての関数呼び出し
JavaScript では、関数をオブジェクトのメソッドとして定義できます。
fullNameメソッドは関数です。関数はオブジェクトに属します。 myObject は関数の所有者です。
このオブジェクトは JavaScript コードを保持します。インスタンス内の this の値は myObject オブジェクトです。
コンストラクターを使用して関数を呼び出します
関数呼び出しの前に new キーワードを使用すると、コンストラクターが呼び出されます。
これは新しい関数が作成されたように見えますが、実際には JavaScript 関数はオブジェクトを再作成されます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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 つのメソッドを使用できます。両方のメソッドの最初のパラメータはオブジェクト自体である必要があります。
Instance
function myFunction(a, b) {
return a * b;
}
myFunction.call(myObject, 10, 2); // 返回 20Instance
function myFunction(a, b) {
return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray); // 返回 20どちらのメソッドも、オブジェクト自体を最初のパラメータとして使用します。 2 つの違いは 2 番目のパラメータにあります。apply はパラメータ配列で渡されます。つまり、複数のパラメータが 1 つの配列に結合されて渡されますが、call は call のパラメータとして (2 番目のパラメータから開始して) 渡されます。
JavaScript 厳密モードでは、パラメーターがオブジェクトでなくても、関数を呼び出すときに最初のパラメーターが this の値になります。
JavaScript の非厳密モードでは、最初のパラメーターの値が null または未定義の場合、代わりにグローバル オブジェクトが使用されます。
call() または apply() メソッドを使用すると、this の値を設定し、既存のオブジェクトの新しいメソッドとして呼び出すことができます。
