찾다
웹 프론트엔드JS 튜토리얼JavaScript 익명, 명명된 함수 및 즉시 실행 함수에 대한 자세한 설명 IIFE

JavaScript의 함수 범위는 변수와 함수를 "숨기기" 위해 존재합니다.

최소 권한 원칙을 따릅니다.
동시에 또 다른 이점은 같은 이름 기호 충돌
오늘은 이 즉시 실행 함수에 대해 주로 이야기하겠습니다.
그 전에 익명 함수와 명명된 함수를 검토하세요

익명 함수와 명명된 함수

혹시 익명 또는 이름 지정은 함수 표현식에 모두 사용됩니다
함수 선언에는 이름이 있어야 합니다. 그렇지 않으면 오류가 보고됩니다

function foo(){ //函数声明
    //...}

여기서 이스터 에그에 대해 설명하겠습니다. 아마도 내 기사를 읽으실 것입니다. 예제 코드를 사용할 때 저는 항상
을 사용하는 것을 좋아합니다. fn, func, 데모, foo, bar, foobar와 같은 단어
fn과 func는 function "function"의 약어입니다
Demo는 Demonstration "example"이라는 단어의 줄임말입니다
foo, bar, foobar 기술 서적이나 컴퓨터 문헌에서 자주 볼 수 있는
foo는 "엉망진창"을 의미하는 fuck-up의 약어인 fu의 변형입니다.
bar는 "모든 인식을 뛰어넘는 것"입니다. 이는 "인지할 수 없는 것"이라는 뜻입니다. 이는 Xiao Ming Xiao Hong, A, B, B, D, Zhang San, Li Si...

함수 표현식에 이름이 있을 수도 있고 없을 수도 있습니다

var foo = function(){...};
console.log(foo.name); //foo
var bar = function foobar(){...};//不要这么写
console.log(bar.name); //foobar

두 번째 작성 방법은 단순히 함수의 이름 속성을 변경하는 방법입니다

그렇게 작성하지 말자

그렇지 않으면 함수를 가장 많이 사용합니다. 콜백 매개변수로서의 표현식

예를 들어 타이머에서

setTimeout(function(){
    //...},1000);

여기서 익명 함수 표현식을 작성했습니다

사용하기가 간단하고 투박합니다
그러나 몇 가지 단점이 있습니다

  • 추적 스택에 함수 이름이 없어 디버깅이 어렵습니다

  • 자신을 참조해야 하는 경우 인수.callee만 사용할 수 있습니다(ES5에서는 비활성화됨). 엄격 모드)

  • 함수의 가독성 및 이해도 감소

이벤트 바인딩을 해제할 때 함수 이름도 필요합니다(해당되는 경우). onclick 등과 직접적으로 바인딩되지 않습니다. )

그래서
함수 표현식에 이름을 지정하는 것이 가장 좋은 습관이자 좋은 습관입니다

setTimeout(function timerHandler(){
    //...},1000);

함수를 즉시 실행하는 일반적인 사용법

즉시 함수 실행,

자체 실행 함수, 자동 실행 함수 등으로 불리는 것도 있습니다.
더 표준적인
즉시 실행 함수 표현식
주의하세요 제 표현은 함수식입니다

구문은 아닙니다

다들 쓰시면서 이렇게 쓸 수 있다는 걸 발견하고
퍼뜨려 지금까지
이름처럼 실행 흐름은 이 함수로 실행되어 즉시 실행됩니다.
커뮤니티에서 제공한 용어는 다음과 같습니다.
IIFE(즉시 호출되는 함수 표현)

일반적인 사용법은 다음과 같습니다.

(function(){
    //...}());
rrree

IIFE를 사용할 때 일반적으로 익명 함수 표현식을 사용합니다

물론 수식에 이름을 추가하는 것도 좋고, 명명된 함수 표현식의 장점도 있습니다
두 가지 용도는 다음과 같습니다. 완전히 동일하며 어느 것을 사용할지는 사용자의 몫입니다
하지만 저는 괄호를 바깥쪽에 쓰는 것을 선호하므로 보기가 더 편합니다
그리고 많은 마스터가 저와 같은 것을 보았습니다

고급 즉시 실행 함수의 사용법

약간 더 발전된 사용법은 즉시 실행 함수에서 매개변수를 전달하는 것입니다

예를 들어 우리의 일반적인 창 전달 방법

(function(){
    //...})();

전달하면 어떤 이점이 있습니까? 창문?

우리 Scope 관점에서 분석
(내가 작성한 Scope를 보시면 됩니다 -> Portal)
전역 객체의 참조는 로컬 환경에 캐시됩니다
더 빠르게 액세스할 수 있습니다. 전역 객체, 검색을 위해 최상위 범위로 이동할 필요가 없습니다
이 작은 최적화는 초점이 아닙니다
코드를 압축할 때 핵심 포인트를 최적화할 수 있습니다
아마도 위의 코드 압축 도구일 것입니다 이렇게 압축할 수 있습니다

var a = '全局';
(function IIFE(global){    var a = '局部';    console.log(a);// "局部"
    console.log(global.a);// "全局"})(window);

코드가 매우 큰 경우 이 최적화를 과소평가하지 마세요

함수 변경 사용법 즉시 실행

IIFE에는 또 다른 변형이 있습니다. 봤어요

var a = '全局';
(function IIFE(g){    var a = '局部';    console.log(a);// "局部"
    console.log(g.a);// "全局"})(window);

실행할 함수를 매개변수에 넣는 방식은 번거로워 보이지만

jQuery와 같은 프레임워크의 전반적인 아키텍처도 이와 매우 유사합니다
. 익숙해지면 우리보다 더 전통적이라고 느낄 것입니다. 사용법을 이해하기가 더 쉽습니다.

전체 함수 표현은 IIFE의 두 번째 부분에서 정의되고 IIFE의 첫 번째 부분으로 전달됩니다. 매개변수로

그러면 함수가 호출되고, 윈도우가 매개변수로 전달됩니다

즉시 실행 기능의 이해

즉시 실행 기능은 왜 자동으로 실행될 수 있나요? 표현식이므로 실행 가능합니다데모에서 얻는 것은 함수의 반환값입니다

표현식 실행이 가능하므로 다음 메소드를 바로 실행 가능합니다function(){}()

(function IIFE(demo){
    demo(window);})(function demo(global){
    //...
});

그렇습니다. 쉼표도 함수식으로 변환하여 바로 실행할 수 있다고 볼 수 있습니다
하지만 이렇게 쓰면 안됩니다 함수에 반환값이 있으면 예상치 못한 부작용이 발생할 수 있습니다 가독성도 좋지 않습니다

요약

함수 선언에는 이름이 있어야 합니다

  • 이름이 지정된 함수 표현식을 사용하는 것이 좋습니다

  • 함수 표현식 사용 즉시 실행: (function(){}()); (function(){})();

  • 창 매개변수를 전달하는 함수를 즉시 실행하여 스코프 체인에서 창 속도를 최적화합니다. 이는 코드 압축에 유리합니다

  • 수식만 실행 가능

  • 위 내용은 JavaScript 익명, 명명함수, 즉시실행함수 IIFE에 대한 자세한 설명입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!


    성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    자바 스크립트 행동 : 실제 예제 및 프로젝트자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

    실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

    JavaScript 및 웹 : 핵심 기능 및 사용 사례JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

    웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

    JavaScript 엔진 이해 : 구현 세부 사항JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

    보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

    Python vs. JavaScript : 학습 곡선 및 사용 편의성Python vs. JavaScript : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AM

    Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

    Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AM

    Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

    C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AM

    C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

    JavaScript 엔진 : 구현 비교JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

    각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

    브라우저 너머 : 실제 세계의 JavaScript브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

    실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

    See all articles

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    뜨거운 도구

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    Dreamweaver Mac版

    Dreamweaver Mac版

    시각적 웹 개발 도구

    Atom Editor Mac 버전 다운로드

    Atom Editor Mac 버전 다운로드

    가장 인기 있는 오픈 소스 편집기

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    MinGW - Windows용 미니멀리스트 GNU

    MinGW - Windows용 미니멀리스트 GNU

    이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.