JavaScript 関數(shù)呼び出し
JavaScript関數(shù)呼び出し
JavaScript関數(shù)には4つの呼び出しメソッドがあります。
各メソッドの違いは、この初期化にあります。
このキーワード
一般に、JavaScript では、関數(shù)が実行されるときに、これは現(xiàn)在のオブジェクトを指します。
これは予約されたキーワードであり、この値は変更できないことに注意してください。
JavaScript 関數(shù)の呼び出し
前の章では、関數(shù)の作成方法を?qū)W習(xí)しました。
関數(shù)內(nèi)のコードは、関數(shù)が呼び出された後に実行されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
全局函數(shù) (myFunction) 返回參數(shù)參數(shù)相乘的結(jié)果：
</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2);
</script>
</body>
</html>上記の関數(shù)はどのオブジェクトにも屬しません。ただし、JavaScript では、これは常にデフォルトのグローバル オブジェクトです。
HTML のデフォルトのグローバル オブジェクトは HTML ページ自體であるため、関數(shù)は HTML ページに屬します。
ブラウザのページオブジェクトはブラウザウィンドウ(ウィンドウオブジェクト)です。上記の関數(shù)は自動(dòng)的にウィンドウオブジェクトの関數(shù)になります。
myFunction() と window.myFunction() は同じです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>全局函數(shù) myFunction() 會(huì)自動(dòng)成為 window 對(duì)象的方法。</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 関數(shù)を呼び出す一般的な方法ですが、良いプログラミング方法ではありません
グローバル変數(shù)、メソッド、または関數(shù)は、名前の競(jìng)合バグを簡(jiǎn)単に引き起こす可能性があります。
グローバルオブジェクト
関數(shù)が自身のオブジェクトから呼び出されない場(chǎng)合、thisの値がグローバルオブジェクトになります。
Web ブラウザでは、グローバル オブジェクトはブラウザ ウィンドウ (ウィンドウ オブジェクト) です。
このインスタンスによって返される this の値は window オブジェクトです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>在 HTML 中 <b>this</b> 的值, 在全局函數(shù)是一個(gè) window 對(duì)象。</p>
<p id="demo"></p>
<script>
function myFunction() {
return this;
}
document.getElementById("demo").innerHTML = myFunction();
</script>
</body>
</html>この関數(shù)はグローバル オブジェクトとして呼び出され、this の値がグローバル オブジェクトになります。
ウィンドウ オブジェクトを変數(shù)として使用すると、プログラムがクラッシュしやすくなる可能性があります。
メソッドとしての関數(shù)呼び出し
JavaScript では、関數(shù)をオブジェクトのメソッドとして定義できます。
fullNameメソッドは関數(shù)です。関數(shù)はオブジェクトに屬します。 myObject は関數(shù)の所有者です。
このオブジェクトは JavaScript コードを保持します。インスタンス內(nèi)の this の値は myObject オブジェクトです。
コンストラクターを使用して関數(shù)を呼び出します
関數(shù)呼び出しの前に new キーワードを使用すると、コンストラクターが呼び出されます。
これは新しい関數(shù)が作成されたように見えますが、実際には JavaScript 関數(shù)はオブジェクトを再作成されます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>該實(shí)例中， myFunction 是函數(shù)構(gòu)造函數(shù):</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>コンストラクターへの呼び出しにより、新しいオブジェクトが作成されます。新しいオブジェクトはコンストラクターのプロパティとメソッドを継承します。
コンストラクター內(nèi)の this キーワードには値がありません。
this の値は、関數(shù)が呼び出されたときにオブジェクト (新しいオブジェクト) がインスタンス化されるときに作成されます。
関數(shù)メソッドとして関數(shù)を呼び出す
JavaScriptでは、関數(shù)はオブジェクトです。 JavaScript 関數(shù)にはプロパティとメソッドがあります。
call() と apply() は事前定義された関數(shù)メソッドです。 関數(shù)の呼び出しには 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 はパラメータ配列で渡されます。つまり、複數(shù)のパラメータが 1 つの配列に結(jié)合されて渡されますが、call は call のパラメータとして (2 番目のパラメータから開始して) 渡されます。
JavaScript 厳密モードでは、パラメーターがオブジェクトでなくても、関數(shù)を呼び出すときに最初のパラメーターが this の値になります。
JavaScript の非厳密モードでは、最初のパラメーターの値が null または未定義の場(chǎng)合、代わりにグローバル オブジェクトが使用されます。
call() または apply() メソッドを使用すると、this の値を設(shè)定し、既存のオブジェクトの新しいメソッドとして呼び出すことができます。
