JavaScript 関數(shù)呼び出し
JavaScript 関數(shù)には 4 つの呼び出しメソッドがあります。
各メソッドの違いは、この初期化にあります。
このキーワード
一般に、JavaScript では、関數(shù)が実行されるときに this は現(xiàn)在のオブジェクトを指します。
注: これは予約されたキーワードであり、この値を変更することはできません。
JavaScript 関數(shù)の呼び出し
前の章では、関數(shù)の作成方法を?qū)Wびました。
関數(shù)內(nèi)のコードは、関數(shù)が呼び出された後に実行されます。
関數(shù)として呼び出す
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</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>プログラムを?qū)g行して試してみる
上記の関數(shù)はどのオブジェクトにも屬しません。ただし、JavaScript では、これは常にデフォルトのグローバル オブジェクトです。
HTML のデフォルトのグローバル オブジェクトは HTML ページ自體であるため、関數(shù)は HTML ページに屬します。
ブラウザのページオブジェクトはブラウザウィンドウ(ウィンドウオブジェクト)です。上記の関數(shù)は自動的にウィンドウオブジェクトの関數(shù)になります。
myFunction() と window.myFunction() は同じです:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>全局函數(shù) 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>プログラムを?qū)g行して試してください
ヒント: これは JavaScript 関數(shù)を呼び出す一般的な方法ですが、プログラミングが良くない習(xí)慣、グローバル変數(shù)、メソッド、または関數(shù)により、名前の競合バグが簡単に発生する可能性があります。
グローバルオブジェクト
関數(shù)が自身のオブジェクトから呼び出されない場合、thisの値がグローバルオブジェクトになります。
Web ブラウザでは、グローバル オブジェクトはブラウザ ウィンドウ (ウィンドウ オブジェクト) です。
このインスタンスによって返される this の値は window オブジェクトです:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>在 HTML 中 <b>this</b> 的值, 在全局函數(shù)是一個 window 對象。</p>
<p id="demo"></p>
<script>
function myFunction() {
return this;
}
document.getElementById("demo").innerHTML = myFunction();
</script>
</body>
</html>プログラムを?qū)g行して試してください
注: 関數(shù)がグローバル オブジェクトとして呼び出される場合、 の値はこれはグローバル オブジェクトになります。 window オブジェクトを変數(shù)として使用すると、プログラムが簡単にクラッシュする可能性があります。
メソッドとしての関數(shù)呼び出し
JavaScriptでは、オブジェクトのメソッドとして関數(shù)を定義できます。
次の例では、2 つのプロパティ (firstName と lastName) とメソッド (fullName) を持つオブジェクト (myObject) を作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>myObject.fullName() 返回 John Doe:</p>
<p id="demo"></p>
<script>
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>プログラムを?qū)g行して試してみましょう
fullName メソッドは関數(shù)です。関數(shù)はオブジェクトに屬します。 myObject は関數(shù)の所有者です。
このオブジェクトは JavaScript コードを保持します。インスタンス內(nèi)の this の値は myObject オブジェクトです。
以下でテストしてください! fullName メソッドを変更して次の値を返します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>在一個對象方法中 ，<b>this</b> 的值是對象本身。</p>
<p id="demo"></p>
<script>
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>プログラムを?qū)g行して試してください
ヒント: 関數(shù)がオブジェクト メソッドとして呼び出される場合、this の値はオブジェクト自體になります。
コンストラクターを使用して関數(shù)を呼び出します
関數(shù)呼び出しの前に new キーワードを使用すると、コンストラクターが呼び出されます。
これは新しい関數(shù)が作成されたように見えますが、実際には JavaScript 関數(shù)はオブジェクトを再作成します:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>該實例中， 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>プログラムを?qū)g行して試してみましょう
コンストラクターへの呼び出しにより、新しいオブジェクトが作成されます。新しいオブジェクトはコンストラクターのプロパティとメソッドを継承します。
ヒント: コンストラクターの this キーワードには値がありません。 this の値は、関數(shù)が呼び出されたときにオブジェクト (新しいオブジェクト) がインスタンス化されるときに作成されます。
関數(shù)メソッドとして関數(shù)を呼び出す
JavaScriptでは、関數(shù)はオブジェクトです。 JavaScript 関數(shù)にはプロパティとメソッドがあります。
call() と apply() は事前定義された関數(shù)メソッドです。 関數(shù)の呼び出しには 2 つのメソッドを使用できます。両方のメソッドの最初のパラメータはオブジェクト自體である必要があります。
function myFunction(a, b) {
return a * b;
}
myFunction.call(myObject, 10, 2) // Return 20
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 または未定義の場合、代わりにグローバル オブジェクトが使用されます。
ヒント: call() または apply() メソッドを通じて、this の値を設(shè)定し、既存のオブジェクトの新しいメソッドとして呼び出すことができます。
