js 함수의 자체 실행 기능

저는 코드를 작성할 때 tpl의 에서 비슷한 코드를 자주 작성합니다.

$(function(){ alert("我好饿"); }); 처음 작성을 시작할 때는 호출할 필요가 없고 직접 실행된다는 것만 알았습니다. , 나는 많은 코드가 작성되었습니다. 그런데 이 제품의 로딩 순서에 대해서도 말씀드리고 싶은데요, 스크립트 태그에 직접 코드를 작성하면 페이지가 로딩될 때 스크립트 태그 안의 코드가 실행됩니다. 언로드된 DOM이 이 코드에서 사용되거나 언로드된 메서드가 호출되면 오류가 보고됩니다. 가까운 곳에서 이 함수는 실제로 자체 실행 함수입니다. 많은 사람들이 전문적으로 이를 "즉시 호출되는 함수 표현"이라고 부릅니다.

좀 더 전문적인 느낌이 드는 limlimlim님의 블로그를 인용합니다...원본 주소

function foo(){} 또는 var foo = function(){}과 같은 함수를 선언할 때 마지막에 괄호를 추가하면 됩니다. foo()와 같은 자체 실행을 달성할 수 있는 경우 코드를 살펴보세요.

// 因为想下面第一个声明的function可以在后面加一个括弧()就可以自己执行了，比如foo()，// 因为foo仅仅是function() { /* code */ }这个表达式的一个引用 var foo = function(){ /* code */ } // ...是不是意味着后面加个括弧都可以自动执行？ function(){ /* code */ }(); // SyntaxError: Unexpected token (// 위 코드가 실행되더라도 두 번째 코드는 오류가 발생합니다. 왜냐하면 파서가 전역 함수 또는 함수 내부 함수 키워드를 구문 분석할 때 때문입니다. , 기본값은 함수 표현식이 아닌 함수 선언을 고려하는 것입니다. 컴파일러에 명시적으로 알리지 않으면 함수 선언에 이름이 필요하기 때문에 이름이 없는 함수가 기본값으로 지정되고 구문 오류 메시지가 발생합니다. .

흥미롭게도 위의 잘못된 코드에 이름을 추가해도 구문 오류가 발생하는데 그 이유는 위와 다릅니다. 표현식 뒤에 괄호()를 추가하면 표현식이 즉시 실행되지만 명령문 뒤에 괄호()를 추가하는 것은 단지 그룹화 연산자일 뿐입니다.

// 下面这个function在语法上是没问题的，但是依然只是一个语句// 加上括号()以后依然会报错，因为分组操作符需要包含表达式 function foo(){ /* code */ }(); // SyntaxError: Unexpected token ) // 但是如果你在括弧()里传入一个表达式，将不会有异常抛出// 但是foo函数依然不会执行function foo(){ /* code */ }( 1 ); // 因为它完全等价于下面这个代码，一个function声明后面，又声明了一个毫无关系的表达式： function foo(){ /* code */ } ( 1 ); 위 문제를 해결하려면 매우 간단합니다. JavaScript는 괄호() 안에 명령문을 포함할 수 없기 때문에 중괄호만 사용하면 됩니다. function 키워드를 사용하면 해당 코드가 함수 선언 대신 함수 표현식으로 구문 분석됩니다.

// 下面2个括弧()都会立即执行(function () { /* code */ } ()); // 推荐使用这个(function () { /* code */ })(); // 但是这个也是可以用的// 由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的// 所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了// 不过，请注意下一章节的内容解释var i = function () { return 10; } ();true && function () { /* code */ } ();0, function () { /* code */ } ();// 如果你不在意返回值，或者不怕难以阅读// 你甚至可以在function前面加一元操作符号!function () { /* code */ } ();~function () { /* code */ } ();-function () { /* code */ } ();+function () { /* code */ } ();// 还有一个情况，使用new关键字,也可以用，但我不确定它的效率// new function () { /* code */ }new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧() 위에 언급된 괄호는 명확성을 위해 사용됩니다. 실제로 괄호는 함수 표현식으로 예상되기 때문에 전혀 필요하지 않지만 주로 개발자의 편의를 위해 계속 사용합니다. 이렇게 자동으로 실행되는 표현식을 변수에 할당하면 괄호(((처음에)가 표시되는데, 괄호가 있는지 확인하기 위해 코드를 끝까지 끌어오지 않고도 빠르게 이해할 수 있습니다.

여기 이번 포스팅에서는 자체 실행 함수, 정확히는 자체 실행 익명 함수(Self-executing anonymous function)라고 불러왔는데, 영어 원문의 저자는 항상 Immediate라는 이름의 사용을 옹호해왔습니다. Invoked Function Expression. , 저자는 설명하기 위해 여러 가지 예를 제시했습니다. 살펴보겠습니다.

// 这是一个自执行的函数，函数内部执行自身，递归function foo() { foo(); }// 这是一个自执行的匿名函数，因为没有标示名称// 必须使用arguments.callee属性来执行自己var foo = function () { arguments.callee(); };// 这可能也是一个自执行的匿名函数，仅仅是foo标示名称引用它自身// 如果你将foo改变成其它的，你将得到一个used-to-self-execute匿名函数var foo = function () { foo(); };// 有些人叫这个是自执行的匿名函数（即便它不是），因为它没有调用自身，它只是立即执行而已。(function () { /* code */ } ());// 为函数表达式添加一个标示名称，可以方便Debug// 但一定命名了，这个函数就不再是匿名的了(function foo() { /* code */ } ());// 立即调用的函数表达式（IIFE）也可以自执行，不过可能不常用罢了(function () { arguments.callee(); } ()); (function foo() { foo(); } ());// 另外，下面的代码在黑莓5里执行会出错，因为在一个命名的函数表达式里，他的名称是undefined// 呵呵，奇怪(function foo() { foo(); } ()); 여기에 있는 몇 가지 예를 통해 모든 사람이 자기 실행이 무엇인지, 즉시 호출이 무엇인지 이해할 수 있기를 바랍니다. 아직 조금 이해가 안 됐어요. 이론 만세)

다음으로 limlimlim이 앞으로 배워야 할 중요한 모듈 모드 에 대해서도 이야기했습니다. 물론 마무리도 있습니다. 이 전에 (큰 머리)

예를 보여드릴게요

// 创建一个立即调用的匿名函数表达式// return一个变量，其中这个变量里包含你要暴露的东西// 返回的这个变量将赋值给counter，而不是外面声明的function自身var counter = (function () {var i = 0;return { get: function () {return i; }, set: function (val) { i = val; }, increment: function () {return ++i; } }; } ());// counter是一个带有多个属性的对象，上面的代码对于属性的体现其实是方法counter.get(); // 0counter.set(3); counter.increment(); // 4counter.increment(); // 5counter.i; // undefined 因为i不是返回对象的属性i; // 引用错误: i 没有定义（因为i只存在于闭包）