JavaScript에서 즉시 호출되는 함수 표현식을 사용하여 덮어쓰기를 방지하는 방법은 무엇입니까?

JavaScript를 사용하면 개발자는 웹 페이지에 기능과 동작을 추가할 수 있습니다. 개발자는 웹 페이지의 다양한 부분에 기능을 추가하기 위해 여러 함수와 변수를 만들어야 합니다.

실시간 애플리케이션을 개발할 때 여러 개발자가 동일한 프로젝트에서 작업합니다. 따라서 여러 개발자와 작업할 때 실수로 함수와 변수를 덮어쓰는 것을 방지해야 합니다. 이번 튜토리얼에서는 즉시 호출되는 함수 표현식을 사용하여 덮어쓰기를 방지하는 방법을 알아봅니다.

질문 다시 작성

예를 들어, 두 명의 동료가 동일한 프로젝트를 진행하고 있으며 둘 다 코드 내부에 printAge() 함수를 정의하고 코드를 병합합니다. 이제 브라우저는 동일한 이름을 가진 다른 모든 함수 정의를 덮어쓰기 때문에 마지막으로 정의된 함수만 실행합니다. 결과적으로 사용자는 때때로 웹 페이지의 예상치 못한 동작을 보게 됩니다. 또한 변수 이름에서도 이런 일이 발생할 수 있습니다.

예(보장 문제)

아래 예에서는 동일한 이름을 가진 두 개의 변수를 정의했습니다. 우리는 웹 페이지에 변수 값을 표시합니다. 출력에서 사용자는 두 번째 "a" 변수가 첫 번째 "a" 변수의 값을 덮어쓰는 것을 확인할 수 있습니다.

으아악

덮어쓰기 방지를 위해 즉시 기능을 호출하는 솔루션

JavaScript 함수에는 함수 내부에 정의된 변수의 기능적 범위가 있습니다. 따라서 함수 내부에서 정의한 변수가 무엇이든 함수 외부에서는 해당 변수에 접근할 수 없습니다. 따라서 범위가 함수로 제한되는 변수를 정의할 수 있습니다.

즉시 함수 호출을 사용하여 함수 재작성을 해결할 수 있습니다. 즉, 함수를 정의한 후 즉시 실행합니다. 따라서 함수 이름을 정의할 필요가 없으며 재정의가 방지됩니다.

문법

사용자는 다음 구문을 사용하여 즉각적인 함수 호출을 통해 JavaScript의 재정의를 방지할 수 있습니다.

으아악

위 구문에서는 괄호 안에 함수 표현식을 추가했습니다. 또한 함수를 즉시 호출할 수 있도록 함수 정의 뒤에 괄호를 추가했습니다.

예(즉시 통화 기능 무시 방지)

아래 예에서는 즉시 호출되는 두 가지 함수를 정의합니다. 각 함수에서 "obj" 개체 변수를 만들고 id, user 및 age 속성을 저장합니다. 추가적으로 printAge() 함수를 객체에 저장합니다.

두 객체의 printAge() 함수는 서로 다른 메시지를 인쇄합니다. 그런 다음 이 두 개체를 창 개체에 저장하여 전역적으로 액세스합니다. 마지막으로 두 개체의 printAge() 메서드를 실행했으며 사용자는 서로 덮어쓰지 않고 원본 메시지를 인쇄하는 것을 관찰할 수 있습니다.

으아악

예

이 예에서는 즉시 호출되는 두 개의 함수 표현식도 정의합니다. 첫 번째 표현식에서는 음식 객체를 정의합니다. 추가적으로, food 객체에 대한 setId() 및 setName() 메소드를 정의하고 이를 window 객체에 저장했습니다.

두 번째 함수 표현식에서는 setId() 및 setName() 메서드를 다시 정의하고 watch() 개체에 저장합니다. 그런 다음 시계 및 음식 개체를 참조로 사용하여 다양한 방법에 액세스합니다. 출력에서 원본 메시지를 덮어쓰지 않고 인쇄하는 것을 볼 수 있습니다.

으아악

JavaScript 코드로 작업할 때 재정의를 방지하기 위해 즉각적인 함수 표현식을 사용하는 방법을 배웠습니다. 아이디어는 함수 범위에서 변수를 정의하고 재정의 이름이 없어야 하는 특정 전역 개체를 통해 전역적으로 액세스하는 것입니다.

즉시 호출되는 함수 표현식을 사용하여 덮어쓰기를 방지하는 주요 이점은 변수 이름의 전역 오염을 방지하는 것입니다. 또한 이를 통해 코드를 유지 관리 가능하게 만들고 코드 재사용성을 향상할 수 있습니다.

위 내용은 JavaScript에서 즉시 호출되는 함수 표현식을 사용하여 덮어쓰기를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!