JavaScript 함수 호출에 대한 지식 및 적용

JavaScript 함수 호출은 js에서 중요한 역할을 합니다. 이 글에서는 이에 대한 자세한 이해를 제공합니다.

JavaScript 함수를 호출하는 방법에는 4가지가 있습니다.

각 방법의 차이점은 초기화에 있습니다.

이 키워드

일반적으로 Javascript에서 이 키워드는 함수가 실행될 때 현재 개체를 가리킵니다.

이것은 예약된 키워드이므로 이 값을 수정할 수 없습니다. ​

JavaScript 함수 호출

이전 장에서 우리는 함수를 만드는 방법을 배웠습니다.

함수 내부의 코드는 함수가 호출된 후에 실행됩니다.

함수 호출로

Instance

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

위 함수는 어떤 객체에도 속하지 않습니다. 그러나 JavaScript에서는 항상 기본 전역 객체입니다.

HTML의 기본 전역 개체는 HTML 페이지 자체이므로 해당 기능은 HTML 페이지에 속합니다.

브라우저의 페이지 개체는 브라우저 창(창 개체)입니다. 위의 함수는 자동으로 창 개체의 함수가 됩니다.

myFunction() 및 window.myFunction()은 동일합니다.

Instance

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

이는 JavaScript 함수를 호출하는 일반적인 방법이지만 좋은 프로그래밍 관행은 아닙니다.
전역 변수, 메서드 또는 함수 충돌 버그의 이름을 지정하는 것은 쉽습니다.

전역 객체

함수가 자체 객체에 의해 호출되지 않으면 this의 값이 전역 객체가 됩니다.

웹 브라우저에서 전역 개체는 브라우저 창(창 개체)입니다.

이 인스턴스에서 반환된 this의 값은 창 개체입니다.

Instance

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

함수는 전역 개체로 호출되어 this의 값이 전역 개체가 됩니다.
창 개체를 변수로 사용하면 프로그램이 쉽게 중단될 수 있습니다. ​

함수는 메소드로 호출됩니다.

JavaScript에서는 함수를 객체의 메소드로 정의할 수 있습니다.

다음 예제에서는 두 개의 속성(firstName 및 lastName)과 하나의 메서드(fullName)가 있는 개체(myObject)를 만듭니다.

Instance

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

fullName 메서드는 함수입니다. 함수는 객체에 속합니다. myObject는 함수의 소유자입니다.

이 개체에는 JavaScript 코드가 포함되어 있습니다. 인스턴스에서 이 값은 myObject 개체입니다.

아래에서 테스트해보세요! fullName 메소드를 수정하고 다음 값을 반환합니다:

Instance

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

함수는 객체 메소드로 호출되어 this의 값이 객체 자체가 됩니다.

생성자를 사용하여 함수 호출

함수 호출 전에 new 키워드를 사용하면 생성자가 호출됩니다.

새 함수가 생성된 것처럼 보이지만 실제로는 JavaScript 함수가 객체를 다시 생성한 것입니다.

Instance

// 构造函数:function myFunction(arg1, arg2) {
    this.firstName = arg1;    this.lastName  = arg2;}
 // This    creates a new objectvar x = new myFunction("John","Doe");x.firstName;                             // 返回 "John"

생성자를 호출하면 새 객체가 생성됩니다. 새 객체는 생성자의 속성과 메서드를 상속합니다.

생성자의 this 키워드에는 값이 없습니다.
this 값은 객체(새 객체)를 인스턴스화하기 위해 함수가 호출될 때 생성됩니다. ​

함수 메서드로 함수 호출하기

JavaScript에서 함수는 객체입니다. JavaScript 함수에는 속성과 메서드가 있습니다.

call() 및 apply()는 미리 정의된 함수 메서드입니다. 두 가지 메서드를 사용하여 함수를 호출할 수 있으며, 두 메서드 모두의 첫 번째 매개 변수는 개체 자체여야 합니다.

Instance

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

Instance

function myFunction(a, b) {
    return a * b;}myArray = [10, 2];myObject = myFunction.apply(myObject, myArray);  // 返回 20

두 메소드 모두 객체 자체를 첫 번째 매개변수로 사용합니다. 둘 사이의 차이점은 두 번째 매개변수에 있습니다. Apply는 매개변수 배열로 전달됩니다. 즉, 여러 매개변수가 하나의 배열로 결합되어 전달되는 반면, call은 호출의 매개변수로 전달됩니다(두 번째 매개변수부터 시작).

JavaScript 엄격 모드에서는 매개변수가 객체가 아니더라도 함수를 호출할 때 첫 번째 매개변수가 this의 값이 됩니다.

JavaScript 비엄격 모드에서는 첫 번째 매개변수의 값이 null이거나 정의되지 않은 경우 전역 개체를 대신 사용합니다.

이 글에는 JavaScript 함수 호출에 대한 자세한 설명이 나와 있습니다. 더 많은 학습 자료를 보려면 PHP 중국어 웹사이트를 참고하세요.

관련 추천:

JavaScript 타이밍 이벤트에 대한 지식과 사용법

JavaScript 클로저에 대한 지식과 사용법

JavaScript 날짜(날짜) 관련 지식과 사용법

위 내용은 JavaScript 함수 호출에 대한 지식 및 적용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!