js 함수 앞에 기호를 추가하는 역할에 대한 자세한 설명

일부 jquery 플러그인을 보면 js 함수 앞에 세미콜론, 느낌표 등이 추가되어 있는 것을 종종 볼 수 있는데, 많은 학생들이 이 기호를 추가하는 기능을 이해하지 못하는 것이 정상이지 않습니까? 그럼 오늘은 js 함수 앞에 기호를 추가하는 역할에 대해 자세히 알아볼까요?

js 함수 앞에 세미콜론과 느낌표를 추가하는 역할

js 함수 앞에 기호가 무슨 뜻인가요? 무슨 소용이 있나요?

일반적으로 JQuery 플러그인에 쓰는 것은 이렇습니다

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

오늘 bootstrap의 javascript 컴포넌트가 이렇게 쓰여 있는 것을 봤습니다

!function( $ ){
  //...
}( window.jQuery );

왜 앞에 "!"를 추가해야 할까요? ?

우리 모두는 함수를 선언하는 방법이 두 가지라는 것을 알고 있습니다

function fnA(){alert('msg');}//声明式定义函数
var fnB = function(){alert('msg');}//函数赋值表达式定义函数

편집자의 질문에 나타난 두 함수는 모두 익명 함수입니다. 일반적으로 메소드를 호출하는 방식은 FunctionName()

그러나 "함수 정의" 끝에 ()를 추가하려고 하면 파서가 이를 이해할 수 없습니다.

function msg(){
  alert('message');
}();//解析器是无法理解的

정의된 함수의 호출 방법은 msg()여야 합니다.

함수 본문 부분을 ()로 래핑하면 함수가 실행될 수 있으며 파서는 다음과 같은 오류를 보고하지 않습니다.

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

그런 다음 왜 사용합니까? () 함수 본문 부분은? ) 그냥 마무리할까요?

정의된 함수 본문을 괄호로 묶으면 파서가 함수 표현식 형식으로 정의된 함수를 호출한다는 사실이 밝혀졌습니다. 즉, 함수를 함수 표현식으로 변환할 수 있는 모든 메서드를 사용하면 파서가 정의된 함수를 올바르게 호출할 수 있습니다.

그리고 ! 는 그 중 하나이며 + - || 모두 이러한 기능을 가지고 있습니다.

또한 !를 사용하는 것은 습관의 문제일 수 있습니다.

문자 하나만 생략하려면...

// 这么写会报错，因为这是一个函数定义：
function() {}()
// 常见的（多了一对括号），调用匿名函数：
(function() {})()
// 但在前面加上一个布尔运算符（只多了一个感叹号），就是表达式了，将执行后面的代码，也就合法实现调用
!function() {}()

앞에 ~+- 및 기타 단항 연산자를 추가할 수도 있습니다. . 실제로 익명 함수가 선언된 후 즉시 실행되도록 보장할 수 있는 몇 가지 규칙이 있습니다.

var hi = function(){
 alert("hi") 
};
hi();

는 다음과 같습니다...

(function(){
 alert("hi")
 })
();

!, +는 ()와 동일한 효과를 가지며 대체될 수 있습니다. by

!function(){
 alert("hi")
}
();

! 문자보다 저렴하거나 ()

세미콜론을 사용하면 이전 코드와 구분할 수 있다는 것을 모두 알고 있지만 JS는 코드를 병합한 후에 줄바꿈을 사용할 수 있습니다. 여러 개의 js 파일을 압축하면 일반적으로 개행 문자가 삭제되므로 함께 연결하면 오류가 발생할 수 있습니다. 느낌표는 일반적으로 압축된 js 파일에 있습니다. 익명 함수가 호출될 때 일반적으로 (function(){})() 형식을 사용하지만 다른 형식도 사용할 수 있습니다. !function( ){}() 앞의 ! 기호를 -+~와 같은 단항 연산자로 대체하여 1바이트를 절약할 수 있습니다.

기타 추천 글:

JavaScript 함수 바인딩 사용 분석

위 내용은 js 함수 앞에 기호를 추가하는 역할에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!