JavaScript의 즉시 실행 기능에 대한 자세한 답변

JavaScript의 즉시 실행 기능 모드를 사용하면 함수를 정의한 후 즉시 실행할 수 있습니다. JavaScript의 즉시 실행 기능을 자세히 분석해 보겠습니다. 필요한 친구는 이를 참조할 수 있습니다.

그것이 무엇입니까JavaScript에서는 각 기능이 호출되면 새로운 실행 컨텍스트를 생성합니다. 함수 및 함수 내에 정의된 변수는 외부가 아닌 내부적으로 액세스되는 유일한 변수이기 때문에 함수가 제공하는 컨텍스트는 함수가 호출될 때 전용 변수를 생성하는 매우 간단한 방법을 제공합니다.

function makeCounter() {
  var i = 0;
  return function(){
    console.log(++i);
  };  
}

//记住：`counter`和`counter2`都有他们自己的变量 `i`

var counter = makeCounter();
counter();//1
counter();//2

var counter2 = makeCounter();
counter2();//1
counter2();//2

i;//ReferenceError: i is not defined(它只存在于makeCounter里)

많은 경우 누적된 여러 값을 반환하기 위해 makeWhatever와 같은 함수가 필요하지 않을 수 있으며, 단일 값을 얻기 위해 한 번만 호출하면 됩니다. 다른 경우에는 반환 값을 명시적으로 알 필요조차 없습니다.

핵심이제 함수 foo(){} 또는 var foo = function(){}과 같은 함수를 정의하든 호출할 때 다음과 같이 그 뒤에 괄호 쌍을 추가해야 합니다. 푸().

//向下面这样定义的函数可以通过在函数名后加一对括号进行调用，像这样`foo()`，
//因为foo相对于函数表达式`function(){/* code */}`只是一个引用变量

var foo = function(){/* code */}

//那这可以说明函数表达式可以通过在其后加上一对括号自己调用自己吗？

function(){ /* code */}(); //SyntaxError: Unexpected token (

보시다시피 여기서 오류가 발생했습니다. 함수를 호출하기 위한 함수 뒤에 괄호가 나타나는 경우, 전역 환경에서든 로컬 환경에서든 해당 함수 키워드를 만나면 기본적으로 함수 표현식이 아닌 함수 선언으로 처리합니다. 괄호에 표현식임을 명시적으로 알리지 않으면 이름이 없는 함수 선언으로 처리되어 오류가 발생합니다. 함수 선언에는 이름이 필요하기 때문입니다.

질문 1: 여기서 질문에 대해 생각해 볼 수 있습니다. var foo = function(){console.log(1)}()와 같은 함수를 직접 호출할 수도 있습니까? 대답은 '예'입니다.
질문 2: 마찬가지로, 이와 같은 함수 선언을 마지막에 괄호와 함께 직접 호출하면 어떻게 될까요?라는 질문에 대해서도 생각해 볼 수 있습니다. 아래 답변을 참조하세요.

함수, 괄호, 오류 흥미롭게도 함수에 이름을 지정하고 그 뒤에 괄호 한 쌍을 넣으면 동일한 오류가 발생하지만 이번에는 다른 이유가 있습니다. 함수 표현식 뒤에 괄호가 있으면 호출된 함수임을 나타내고, 선언 뒤에 괄호가 있으면 이전 함수 선언과 완전히 분리된다는 의미입니다. 이때 괄호는 단순한 것일 뿐입니다. 표현. 괄호(연산의 우선순위를 제어하는 ​​데 사용되는 괄호).

//然而函数声明语法上是无效的，它仍然是一个声明，紧跟着的圆括号是无效的，因为圆括号里需要包含表达式

function foo(){ /* code */ }();//SyntaxError: Unexpected token

//现在，你把一个表达式放在圆括号里，没有抛出错误...,但是函数也并没有执行，因为：

function foo(){/* code */}(1)

//它等同于如下，一个函数声明跟着一个完全没有关系的表达式:

function foo(){/* code */}
(1);

즉시 실행되는 함수 표현식(IIFE)다행히 구문 오류를 수정하는 것은 쉽습니다. 가장 널리 사용되고 허용되는 방법은 함수 선언을 괄호로 묶어 파서에게 함수 표현식을 표현하도록 지시하는 것입니다. 왜냐하면 JavaScript에서는 괄호에 선언이 포함될 수 없기 때문입니다. 이 때문에 괄호로 함수를 묶고 function 키워드를 만나면 함수 선언이 아닌 함수 표현식으로 구문 분석하는 것을 알고 있습니다. 즉, 여기의 괄호는 함수를 만날 때 위의 괄호와 다르게 동작한다는 점을 이해하세요.

익명 함수 끝에 괄호가 표시되고 함수를 호출하려는 경우 해당 함수가 함수 선언으로 기본 설정됩니다.
함수를 괄호로 묶으면 기본적으로 함수 선언 대신 표현식으로 함수를 구문 분석합니다.

//这两种模式都可以被用来立即调用一个函数表达式，利用函数的执行来创造私有变量

(function(){/* code */}());//Crockford recommends this one，括号内的表达式代表函数立即调用表达式
(function(){/* code */})();//But this one works just as well，括号内的表达式代表函数表达式

// Because the point of the parens or coercing operators is to disambiguate
// between function expressions and function declarations, they can be
// omitted when the parser already expects an expression (but please see the
// "important note" below).

var i = function(){return 10;}();
true && function(){/*code*/}();
0,function(){}();

//如果你并不关心返回值，或者让你的代码尽可能的易读，你可以通过在你的函数前面带上一个一元操作符来存储字节

!function(){/* code */}();
~function(){/* code */}();
-function(){/* code */}();
+function(){/* code */}();

// Here's another variation, from @kuvos - I'm not sure of the performance
// implications, if any, of using the `new` keyword, but it works.
// http://twitter.com/kuvos/status/18209252090847232

new function(){ /* code */ }
new function(){ /* code */ }() // Only need parens if passing arguments

괄호에 관한 중요 사항 경우에 따라 함수 표현식 주위에 추가로 모호한 괄호가 있을 경우에는 필요하지 않지만(이때 괄호가 이미 표현식으로 표현하고 있기 때문에), 괄호가 있을 때는 그래도 좋은 생각입니다. 함수 표현식을 호출하는 데 사용됩니다.

이러한 괄호는 함수 표현식이 즉시 호출되고 변수는 함수 자체가 아닌 함수의 결과를 저장한다는 것을 나타냅니다. 매우 긴 함수 표현식인 경우 코드를 읽는 사람이 함수가 호출되었는지 확인하기 위해 페이지 하단으로 스크롤해야 하는 시간을 절약할 수 있습니다.

원칙적으로 명확하고 모호하지 않은 코드를 작성할 때는 JavaScript에서 오류가 발생하는 것을 방지해야 하며, 다른 개발자가 귀하에게 WTFError 오류를 발생시키는 것을 방지하는 것도 필요합니다.

클로저 상태를 저장하세요 그냥! 함수가 호출될 때 인수가 전달되고, 함수 표현식이 즉시 호출될 때 인수가 전달됩니다. 즉시 호출되는 함수 표현식을 사용하면 값을 잠그고 현재 상태를 효과적으로 저장할 수 있습니다. 함수 내에 정의된 모든 함수는 외부 함수에서 전달된 매개변수와 변수를 사용할 수 있기 때문입니다(이 관계를 클로저라고 함).

// 它的运行原理可能并不像你想的那样，因为`i`的值从来没有被锁定。
// 相反的，每个链接，当被点击时（循环已经被很好的执行完毕），因此会弹出所有元素的总数，
// 因为这是 `i` 此时的真实值。

var elems = document.getElementsByTagName('a');
for(var i = 0;i < elems.length; i++ ) {
  elems[i].addEventListener(&#39;click&#39;,function(e){
    e.preventDefault();
    alert(&#39;I am link #&#39; + i)
    },false);
}

// 而像下面这样改写，便可以了，因为在IIFE里，`i`值被锁定在了`lockedInIndex`里。
// 在循环结束执行时，尽管`i`值的数值是所有元素的总和，但每一次函数表达式被调用时，
// IIFE 里的 `lockedInIndex` 值都是`i`传给它的值,所以当链接被点击时，正确的值被弹出。

var elems = document.getElementsByTagName(&#39;a&#39;);
for(var i = 0;i < elems.length;i++) {
  (function(lockedInIndex){
    elems[i].addEventListener(&#39;click&#39;,function(e){
      e.preventDefault();
      alert(&#39;I am link #&#39; + lockedInIndex);
      },false)
  })(i);
}

//你同样可以像下面这样使用IIFE，仅仅只用括号包括点击处理函数，并不包含整个`addEventListener`。
//无论用哪种方式，这两个例子都可以用IIFE将值锁定，不过我发现前面一个例子更可读

var elems = document.getElementsByTagName( &#39;a&#39; );

for ( var i = 0; i < elems.length; i++ ) {
  elems[ i ].addEventListener( &#39;click&#39;, (function( lockedInIndex ){
    return function(e){
      e.preventDefault();
      alert( &#39;I am link #&#39; + lockedInIndex );
    };
    })( i ),false);
  }

이 마지막 두 예제에서 LockedInIndex는 문제 없이 i에 액세스할 수 있지만 함수 매개 변수로 다른 이름의 식별자를 사용하면 개념을 더 쉽게 설명할 수 있다는 점을 기억하세요.

함수 즉시 실행의 가장 큰 장점 중 하나는 이름이 없거나 익명이더라도 식별자를 사용하지 않고 함수 표현식을 즉시 호출할 수 있고, 현재 변수가 오염되지 않고 클로저를 즉시 호출할 수 있다는 것입니다. 사용된.

자체 실행 익명 함수("자체 실행 익명 함수")에 어떤 문제가 있나요?

你看到它已经被提到好几次了，但是它仍然不是那么清楚的被解释，我提议将术语改成"Immediately-Invoked Function Expression"，或者，IIFE，如果你喜欢缩写的话。

什么是Immediately-Invoked Function Expression呢？它使一个被立即调用的函数表达式。就像引导你去调用的函数表达式。

我想Javascript社区的成员应该可以在他们的文章里或者陈述里接受术语，Immediately-Invoked Function Expression和 IIFE，因为我感觉这样更容易让这个概念被理解，并且术语"self-executing anonymous function"真的也不够精确。

//下面是个自执行函数，递归的调用自己本身

function foo(){foo();};

//这是一个自执行匿名函数。因为它没有标识符，它必须是使用`arguments.callee`属性来调用它自己

var foo = function(){arguments.callee();};

//这也许算是一个自执行匿名函数，但是仅仅当`foo`标识符作为它的引用时，如果你将它换成用`foo`来调用同样可行

var foo = function(){foo();};

//有些人像这样叫'self-executing anonymous function'下面的函数,即使它不是自执行的，因为它并没有调用它自己。然后，它只是被立即调用了而已。

(function(){ /*code*/ }());

//为函数表达式增加标识符(也就是说创造一个命名函数)对我们的调试会有很大帮助。一旦命名，函数将不再匿名。

(function foo(){/* code */}());

//IIFEs同样也可以自执行，尽管，也许他不是最有用的模式

(function(){arguments.callee();}())
(function foo(){foo();}())

// One last thing to note: this will cause an error in BlackBerry 5, because
// inside a named function expression, that name is undefined. Awesome, huh?

(function foo(){ foo(); }());

希望上面的例子可以让你更加清楚的知道术语'self-executing'是有一些误导的，因为他并不是执行自己的函数，尽管函数已经被执行。同样的，匿名函数也没用必要特别指出，因为，Immediately Invoked Function Expression，既可以是命名函数也可以匿名函数。

最后：模块模式当我调用函数表达式时，如果我不至少一次的提醒我自己关于模块模式，我便很可能会忽略它。如果你并不属性 JavaScript 里的模块模式，它和我下面的例子很像，但是返回值用对象代替了函数。

var counter = (function(){
  var i = 0;
  return {
    get: function(){
      return i;
    },
    set: function(val){
      i = val;
    },
    increment: function(){
      return ++i;
    }
  }
  }());
  counter.get();//0
  counter.set(3);
  counter.increment();//4
  counter.increment();//5

  conuter.i;//undefined (`i` is not a property of the returned object)
  i;//ReferenceError: i is not defined (it only exists inside the closure)

模块模式方法不仅相当的厉害而且简单。非常少的代码，你可以有效的利用与方法和属性相关的命名，在一个对象里，组织全部的模块代码即最小化了全局变量的污染也创造了使用变量。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JavaScript中各数制转换全面总结（图文教程）

原生JavaScript来实现对dom元素class的操作方法（图文教程）

JavaScript中的字符串连接问题（图文教程）

위 내용은 JavaScript의 즉시 실행 기능에 대한 자세한 답변의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!