What are the ways to write javascript functions?

How to write function: 1. "function function name(){}"; 2. "var function name = function(){}"; 3. "(function(){...})()" ;4. "(function(){...}())"; 5. "$(function(){})".

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Javascript is more casual than other programming languages, so Javascript code is full of all kinds of weird ways of writing, and sometimes it’s just a blur. This article talks about how to write JavaScript functions.

In Javascript there are only objects. Variables are objects, and functions are also objects. As long as you know what your object is, just use it the way it is used.

Javascript is weakly typed, objects, instances, functions, and methods are universal. The distinction does not need to be so clear.

1. Conventional writing:

// 函数的定义
function foo() {
    alert('常规写法');
}
// 函数的调用
foo()

This writing method is the most familiar and easiest to understand writing and calling method. Then read on

2. How to write anonymous functions

// 函数的定义
var foo = function(){
    alert('匿名函数定义');
}
// 函数的调用
foo()

The function definition is made anonymous, eliminating the pain of naming. At the same time, it is assigned to a variable, and the variable becomes a synonym for the function. Next, see

3. Using the method as an object

// 定义
var test = {
    fun1: function(){  },
    fun2: function(){  }
}
// 调用
test.fun1();
test.fun2();

in Variables in Javascript are very powerful and can represent many things.

4. Add methods to the object in the constructor

// 给对象添加方法
var fun = function(){ };  // 定义函数对象
fun.prototype.test = function(){ 
    alert('这是在在foo函数上的原始对象上添加test方法，构造函数中用到');
}

// 调用
var myfun = new fun(); // 创建对象
myfun.test(); // 调用对象属性

Add methods through the prototype keyword.

5. Self-executing functions ( function(){…} )() and ( function(){…} () )

The function definition and call mentioned earlier are separated, but the definition and execution discussed immediately here are done together.

( function(){…} )() and ( function(){…} () ) are two common ways of writing JavaScript functions to execute immediately. At first, I thought it was an anonymous function wrapped in parentheses, and then Adding parentheses at the end to call the function finally achieves the purpose of executing the function immediately after it is defined. Later, it was discovered that the reason for adding parentheses was not the same. To understand the immediate execution of functions, you need to first understand some basic concepts of functions.

Function declaration, function expression, anonymous function

Function declaration: function fnName () {…}; Use the function keyword to declare one function, and then specify a function name, called Function declaration.

Function expression var fnName = function () {…};Use the function keyword to declare a function, but do not give the function a name. Finally, assign the anonymous function to a variable, called Function expression, this is the most common syntax form of function expression.

Anonymous function: function () {}; Use the function keyword to declare a function, but do not give the function a name, so it is called an anonymous function. Anonymous functions belong to function expressions. Anonymous functions have There are many functions, assigning a variable creates a function, assigning an event becomes an event handler or creates a closure, etc.

The difference between function declaration and function expression is that

1. The Javascript engine will 'Function declaration Hoisting' the current execution environment (scope) when parsing the JavaScript code. function declaration on, and the function expression must wait until the Javascirtp engine executes to the line where it is located, then the function expression will be parsed line by line from top to bottom.

2. You can add parentheses after the function expression immediately To call this function, function declaration is not allowed and can only be called in the form of fnName(). Here are two examples of the difference.

// 方式1： ( function(){…} () )
(
     function(){alert('hello world, I am coming');}()
);
// 函数有参数的情况，有时为确保执行，前面加;
// 看到别人的插件，你会发现人家开头处加了一个";"，这样就算页面js有错误，加载运行他的插件也能保证运行，如：
;(function(e){alert(e);}('hello world'));

// 方式2：( function(){…} )()
(function(){alert('hello');})();

// 有时在前面加运算符，常见的是!与void
!function(){alert('hello');}();
void function(){alert(2);}();

6 $(function(){})Writing

$ (function(){/<em>…</em>/}); is the abbreviation of $(document).ready(function(){/<em>…</em>/}), which is executed after the DOM is loaded. The callback function will only be executed once.

$( document ).ready(function() {
   console.log( "ready!" );
});

is equivalent to the following writing

$(function() {
   console.log( "ready!" );
});

Written in different js on one page$(function(){/<em>…</em>/}); Function will be executed sequentially according to the order of js.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of What are the ways to write javascript functions?. For more information, please follow other related articles on the PHP Chinese website!