Detailed understanding of functions in JavaScript (with code)

This article brings you a detailed understanding of functions in JavaScript (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Function in JavaScript has multiple meanings. It may be a constructor, which plays the role of an object template; it may be a method of an object, which is responsible for sending messages to the object. It may also be a function, yes it is a function, a function that exists independently and can be called without any relationship with the object.

Due to the compromise of the language designer, some class-related features have been added to JavaScript to make JavaScript look like Java and can be "object-oriented". Although JavaScript has added new and this, there is no class (ES has added it). Finally, function temporarily takes on the task of class.

Semantics 1: Function as a constructor

/**
@class Tab
@param nav {string} 页签标题的class
@param content {string} 页面内容的class
**/
function Tab(nav, content) {
 this.nav = nav;
 this.content = content;
}
Tab.prototype.getNav = function() {
 return this.nav;
};
Tab.prototype.setNav = function(nav) {
 this.nav = nav;
};
Tab.prototype.add = function() {
};
// 创建对象
var tab = new Tab('tab-nav', 'tab-content');

A class Tab is defined here and an object tab is created. Function, this, new are used above. this, new are keywords in common object-oriented languages, and function here plays the role of class in traditional object-oriented languages. Of course, the naming of identifiers at this time generally follows the "first letter capitalization" rule.

Semantics 2: Function as an object method

Since objects can be created directly without classes in JavaScript, there are two ways to add methods to objects. The first is to define the class first and hang the methods on the prototype, such as Tab in the above example. The prototype has getNav, setNav and add methods. There is another way to add methods directly on this inside the function.

function Tab(nav, content) {
 this.nav = nav
 this.content = content
 this.getNav = function() {
// ...
}
 this.setNav = function() {
// ...
}
 this.add = function() {
// ...
}
}

Here Tab is the semantics, this.getNav/this.setNav/this.add is the semantics, as a method of the object. Alternatively, the object and its methods can be directly defined

var tab = {
 nav: '',
 content: '',
 getNav: function() {
// ...
},
 setNav: function() {
// ...
},
 add: function() {
// ...
}
}

tab.getNav/tab.setNav/tab.add is semantic, as a method of the object tab.
Semantics 3: As an independent function

/*
判断对象是否是一个空对象
@param obj {Object}
@return {boolean}
*/
function isEmpty(obj) {
 for (var a in obj) {
return false
}
 return true
}
// 定义一个模块
~function() {
 // 辅助函数
 function now() {
return (new Date).getTime()
}
 // 模块逻辑...
}();
// 采用CommonJS规范的方式定义一个模块
define(require, exports, moduel) {
 // 辅助函数
 function now() {
return (new Date).getTime()
}
 // 模块逻辑...
})

isEmpty exists as a global function, and now in the module definition exists as a local function. Whether isEmpty or now, the function here refers to a function. It does not depend on objects or classes and can be called independently.
Semantics 4: Anonymous function definition module

// 全局命名空间
var RUI = {}
// ajax.js
~function(R) {
 // 辅助函数...
 ajax = {
request: function() {
  // ...
}
getJSON: function() {
  // ...
}
...
}
 // 暴露出模块给 R
 R.ajax = ajax
}(RUI);
// event.js
~function(R) {
 // 辅助函数...
 // 事件模块定义...
 // 暴露出模块给 R
 R.event = event
}(RUI);
// dom.js
~function(R) {
 // 辅助函数...
 // DON模块定义...
 // 暴露出模块给 R
 R.dom = dom
}(RUI);

The anonymous function here exposes the API object to the RUI after execution. No matter how much work is done in the anonymous function, it cannot be seen outside the corresponding anonymous function. There is no need to pay attention to it. The final concern is the public API methods. As long as you understand the parameters and meaning of these methods, you can use it immediately.

Semantics 5: Anonymous functions handle certain special effects such as processing some data without exposing too many variables

// 判断IE版本的hack方式
var IEVersion = function() {
 var undef, v = 
 var p = document.createElement('p')
 var all = p.getElementsByTagName('i')
 while (
p.innerHTML = &#39;<!--[if gt IE &#39; + (++v) + &#39;]><i></i><![endif]-->&#39;,
all[]
);
 return v > ? v : undef
}();

In the end, there is only one result IEVersion, and some local variables used inside the anonymous function can all be used Isolate. This method is very effective and compact for some temporary data processing. [Related recommendations: JavaScript video tutorial]

The above is the detailed content of Detailed understanding of functions in JavaScript (with code). For more information, please follow other related articles on the PHP Chinese website!