JavaScript 関数呼び出し

JavaScript 関数には 4 つの呼び出しメソッドがあります。

各メソッドの違いは、この初期化にあります。

このキーワード

一般に、JavaScript では、関数が実行されるときに 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 ブラウザでは、グローバルオブジェクトはブラウザウィンドウ (ウィンドウオブジェクト) です。

このインスタンスによって返される this の値は window オブジェクトです:

Instance

<!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>

プログラムを実行して試してください

注: 関数がグローバルオブジェクトとして呼び出される場合、の値はこれはグローバルオブジェクトになります。 window オブジェクトを変数として使用すると、プログラムが簡単にクラッシュする可能性があります。

メソッドとしての関数呼び出し

JavaScriptでは、オブジェクトのメソッドとして関数を定義できます。

次の例では、2 つのプロパティ (firstName と lastName) とメソッド (fullName) を持つオブジェクト (myObject) を作成します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>

プログラムを実行して試してみましょう

fullName メソッドは関数です。関数はオブジェクトに属します。 myObject は関数の所有者です。

このオブジェクトは JavaScript コードを保持します。インスタンス内の this の値は myObject オブジェクトです。

以下でテストしてください! fullName メソッドを変更して次の値を返します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>

プログラムを実行して試してください

ヒント: 関数がオブジェクトメソッドとして呼び出される場合、this の値はオブジェクト自体になります。

コンストラクターを使用して関数を呼び出します

関数呼び出しの前に new キーワードを使用すると、コンストラクターが呼び出されます。

これは新しい関数が作成されたように見えますが、実際には JavaScript 関数はオブジェクトを再作成します:

Instance

<!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 つのメソッドを使用できます。両方のメソッドの最初のパラメータはオブジェクト自体である必要があります。

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 はパラメータ配列で渡されます。つまり、複数のパラメータが 1 つの配列に結合されて渡されますが、call は call のパラメータとして (2 番目のパラメータから開始して) 渡されます。

JavaScript 厳密モードでは、パラメーターがオブジェクトでなくても、関数を呼び出すときに最初のパラメーターが this の値になります。

JavaScript の非厳密モードでは、最初のパラメーターの値が null または未定義の場合、代わりにグローバルオブジェクトが使用されます。

ヒント: call() または apply() メソッドを通じて、this の値を設定し、既存のオブジェクトの新しいメソッドとして呼び出すことができます。

学び続ける

新しいファイル

<!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>

リセットコード

自動運転

提出する

プレビュー Clear