How to write javascript function

Javascript function writing methods are: 1. Conventional writing method, "function function name () {js code} function name ()"; 2. $(function(){}) writing method, "$(object) .ready(function() {js code});".

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.

在Javascript中只有对象。 变量是对象，函数也是对象。 只要你知道你的对象是什么，按照它的方式去使用就可以了。
Javascript是弱类型，对象，实例，函数，方法通用的。不需要区别那么清楚。

1. Conventional writing method:

// 函数的定义
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, which saves the pain of naming. At the same time, it is assigned to a variable, and the variable becomes synonymous with the function. , then look at

3. Treat the method as an object

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

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 definitions mentioned above are The call is separated, and the definition and execution discussed 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 later 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 a function and then specify a function name, which is called a function declaration.

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

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 many functions and are assigned to a variable. Then create a function, assign an event to become an event handler or create a closure, etc.

The difference between function declaration and function expression is

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

2. You can add parentheses after the function expression to call it immediately This function cannot be declared 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 The way to write $(function(){})

$ (function(){/…/}); is $(document).ready(function The abbreviation of (){/…/}) is a callback function that is executed after the DOM is loaded and will only be executed once.

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

Equivalent to the following writing method

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

The $(function(){/…/}); functions written in different js on a page will be arranged in sequence according to the js implement.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to write javascript function. For more information, please follow other related articles on the PHP Chinese website!