JavaScriptの関数呼び出しとパラメータの受け渡し_基礎知識

JavaScript 関数呼び出し
JavaScript 関数を呼び出す方法は 4 つあります。
それぞれの違いは、この初期化にあります。
このキーワード
一般に、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 对象

注: 関数をグローバル オブジェクトとして呼び出すと、この値がグローバル オブジェクトになります。
window オブジェクトを変数として使用すると、プログラムが簡単にクラッシュする可能性があります。
メソッドとして呼び出される関数
JavaScript では、関数をオブジェクトのメソッドとして定義できます。
次の例では、2 つのプロパティ (firstName と lastName) と 1 つのメソッド (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

例

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
}

函数显式参数在函数定义时列出。
函数隐藏参数(arguments)在函数调用时传递给函数真正的值。
参数规则
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中，可以引用对象的值。
因此我们在函数内部修改对象的属性就会修改其初始的值。
修改对象属性可作用于函数外部（全局变量）。