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

JavaScript 익명, 명명된 함수 및 즉시 실행 함수에 대한 자세한 설명 IIFE

黄舟
黄舟원래의
2017-02-28 15:06:452728검색

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으로 문의하세요.