JavaScript 함수 호출 및 매개변수 전달_기본 지식

JavaScript 함수 호출
JavaScript 함수를 호출하는 방법에는 4가지가 있습니다.
각각이 다른 방식은 초기화에 있습니다.
이 키워드
일반적으로 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 값이 전역 객체가 됩니다.
웹 브라우저에서 전역 개체는 브라우저 창(창 개체)입니다.
이 인스턴스에서 반환된 값은 창 개체입니다.
예시

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

참고: 함수를 전역 객체로 호출하면 이 값이 전역 객체가 됩니다.
창 개체를 변수로 사용하면 프로그램이 쉽게 중단될 수 있습니다.
메서드라고 불리는 함수
JavaScript에서는 함수를 객체의 메서드로 정의할 수 있습니다.
다음 예에서는 두 개의 속성(firstName 및 lastName)과 하나의 메서드(fullName)를 사용하여 객체(myObject)를 만듭니다.
예시

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

fullName 메소드는 함수입니다. 함수는 객체에 속합니다. myObject는 함수의 소유자입니다.
이 객체에는 JavaScript 코드가 들어 있습니다. 인스턴스에서 이 값은 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()는 미리 정의된 함수 메서드입니다. 두 가지 메서드를 사용하여 함수를 호출할 수 있으며, 두 메서드 모두의 첫 번째 매개 변수는 개체 자체여야 합니다.
예시

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

두 메서드 모두 개체 자체를 첫 번째 매개 변수로 사용합니다. 둘 사이의 차이점은 두 번째 매개변수에 있습니다. Apply는 매개변수 배열로 전달됩니다. 즉, 여러 매개변수가 하나의 배열로 결합되어 전달되는 반면, call은 호출의 매개변수로 전달됩니다(두 번째 매개변수부터 시작).
JavaScript 엄격 모드에서는 매개변수가 객체가 아니더라도 함수를 호출할 때 첫 번째 매개변수가 this의 값이 됩니다.
JavaScript 비엄격 모드에서는 첫 번째 매개변수의 값이 null이거나 정의되지 않은 경우 전역 개체를 대신 사용합니다.
참고 call() 또는 apply() 메소드를 사용하면 이 값을 설정하고 이를 기존 객체에 대한 새 메소드로 호출할 수 있습니다.

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中，可以引用对象的值。
因此我们在函数内部修改对象的属性就会修改其初始的值。
修改对象属性可作用于函数外部（全局变量）。