Detailed explanation of the role of adding symbols before js functions

When you look at some jquery plug-ins, you can often see semicolons, exclamation points, etc. added before js functions. I believe that many students do not understand the function of adding this symbol. Isn’t it normal not to add it? Well, let’s talk about the role of adding symbols before js functions in detail today!

The role of adding semicolons and exclamation marks before js functions

What does the symbol before js function mean? What is the use?

Generally, the writing in the JQuery plug-in is like this

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

Today I saw the javascript component of bootstrap is written like this

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

Why do we need to add a "!" in front?

We all know that there are two ways to declare functions

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

The two functions that appeared in the editor's question are bothanonymous functions. Usually, the way we call a method is FunctionName()

However, if we try to add () to the end of a "define function", the parser cannot understand it.

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

The calling method of the defined function should be msg();

If you wrap the function body with (), it can be run and the parser will not report an error, such as:

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

Then why is it OK to wrap the function body with ()?

It turns out that if you use parentheses to wrap the defined function body, the parser will call the defined function in the form of function expression. In other words, any method that can turn a function into a function expression can enable the parser to correctly call the defined function.

And ! is one of them, and + - || all have such functions.

In addition, using ! may be more of a matter of habit. Different operators have different performances.

is just to omit a character...

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

It is also possible to add ~+- and other unary operators in front. . In fact, there are several conformances that can ensure that the anonymous function will be executed immediately after it is declared.

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

is equal to...

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

!, + and () can have the same effect. Cheng

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

! Saves one character than (), or looks better than ()

We all know that the semicolon is to separate it from the previous code, js You can use line breaks to separate the code, but after merging and compressing multiple js files, the line breaks are generally deleted, so errors may occur when connected together. Adding a semicolon is safe. The exclamation marks you see are usually in compressed js files, because when anonymous functions are called, we usually use the form: (function(){})() , but also You can use another form: !function(){}() The preceding ! sign can be replaced with unary operators such as -+~, thus saving 1 byte.

Other article recommendations:

JavaScript function binding usage analysis

The above is the detailed content of Detailed explanation of the role of adding symbols before js functions. For more information, please follow other related articles on the PHP Chinese website!