JavaScriptの関数呼び出しとパラメータ受け渡しの使用例を詳しく解説

JavaScript 関数呼び出し

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

パラメータを値で渡す
関数内で呼び出されるパラメータは、関数のパラメータです。関数がパラメーターの値を変更する場合、パラメーターの初期値 (関数の外部で定義された) は変更されません。関数のパラメーターを変更しても、関数の外部の変数 (ローカル変数) には影響しません。
オブジェクトを介してパラメーターを渡す
JavaScript では、オブジェクトの値を参照できます。したがって、関数内でオブジェクトのプロパティを変更すると、その初期値も変更されます。オブジェクトのプロパティの変更は、関数 (グローバル変数) の外部で行うことができます。

このキーワード

一般に、JavaScript では、関数が実行されるときに、これは現在のオブジェクトを指します。注 これは予約されたキーワードであり、この値は変更できないことに注意してください。

JavaScript 関数を呼び出す

関数内のコードは、関数が呼び出された後に実行されます。

関数として呼び出される

インスタンス

function myFunction(a, b) {
  return a * b;
}
myFunction(10, 2);      // myFunction(10, 2) 返回 20

上記の関数はどのオブジェクトにも属しません。ただし、JavaScript では、これは常にデフォルトのグローバル オブジェクトです。 HTML のデフォルトのグローバル オブジェクトは HTML ページ自体であるため、関数は HTML ページに属します。ブラウザ内のページ オブジェクトはブラウザ ウィンドウ (ウィンドウ オブジェクト) です。上記の関数は自動的にウィンドウオブジェクトの関数になります。 myFunction() と window.myFunction() は同じです:

function myFunction(a, b) {
  return a * b;
}
window.myFunction(10, 2);  // window.myFunction(10, 2) 返回 20

注: これは JavaScript 関数を呼び出すための一般的な方法ですが、メソッドや関数によって名前の競合が発生しやすいため、良いプログラミング方法ではありません。
グローバルオブジェクト
関数が自身のオブジェクトから呼び出されない場合、thisの値がグローバルオブジェクトになります。 Web ブラウザでは、グローバル オブジェクトはブラウザ ウィンドウ (ウィンドウ オブジェクト) です。このインスタンスによって返される this の値は window オブジェクトです:

function myFunction() {
  return this;
}
myFunction();        // 返回 window 对象

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

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

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

var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}
myObject.fullName();     // 返回 "John Doe"

fullName メソッドは関数です。関数はオブジェクトに属します。 myObject は関数の所有者です。 このオブジェクトは JavaScript コードを保持します。インスタンス内の this の値は myObject オブジェクトです。 以下でテストしてください! fullName メソッドを変更し、次の値を返します:

var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this;
  }
}
myObject.fullName();     // 返回 [object Object] (所有者对象)

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

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

関数呼び出しの前に new キーワードが使用される場合、コンストラクターが呼び出されます。 これは新しい関数が作成されたように見えますが、実際には JavaScript 関数はオブジェクトを再作成されます:

// 构造函数:
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;               // 返回 "John"

コンストラクターへの呼び出しにより、新しいオブジェクトが作成されます。新しいオブジェクトはコンストラクターのプロパティとメソッドを継承します。注 コンストラクター内の this キーワードには値がありません。 this の値は、関数が呼び出されたときにオブジェクト (新しいオブジェクト) がインスタンス化されるときに作成されます。

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

JavaScript では、関数はオブジェクトです。 JavaScript 関数にはプロパティとメソッドがあります。 call() と apply() は事前定義された関数メソッドです。 関数の呼び出しには 2 つのメソッドを使用できます。両方のメソッドの最初のパラメータはオブジェクト自体である必要があります。

function myFunction(a, b) {
  return a * b;
}
myFunction.call(myObject, 10, 2);   // 返回 20

Instance

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 の値を設定し、既存のオブジェクトの新しいメソッドとして呼び出すことができます。

JavaScript関数のパラメータ

JavaScript関数はパラメータ(引数)の値のチェックを行いません。 関数の明示的なパラメーターと隠しパラメーター (引数) 前のチュートリアルでは、関数の明示的なパラメーターについて学習しました:

functionName(parameter1, parameter2, parameter3) {
  code to be executed
}

関数の明示的なパラメーターは、関数が定義されるときにリストされます。 関数の隠しパラメータ（引数）は、関数が呼び出されたときに関数に渡される実際の値です。

参数规则
JavaScript 函数定义时参数没有指定数据类型。
JavaScript 函数对隐藏参数(arguments)没有进行检测。
JavaScript 函数对隐藏参数(arguments)的个数没有进行检测。
默认参数
如果函数在调用时缺少参数，参数会默认设置为： undefined

有时这是可以接受的，但是建议最好为参数设置一个默认值：

function myFunction(x, y) {
  if (y === undefined) {
     y = 0;
  } 
}

或者，更简单的方式：

function myFunction(x, y) {
  y = y || 0;
}

Note 如果y已经定义 ， y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名。 只能使用 arguments 对象来调用。

Arguments 对象
JavaScript 函数有个内置的对象 arguments 对象.argument 对象包含了函数调用的参数数组。通过这种方式你可以很方便的找到最后一个参数的值：

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
  var i, max = 0;
  for (i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}

或者创建一个函数用来统计所有数值的和：

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
  var i, sum = 0;
  for (i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

以上がJavaScriptの関数呼び出しとパラメータ受け渡しの使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。