Multiple Functions in JavaScript

Multiple Functions in JavaScript

Functions in JavaScript have multiple meanings.It may be a constructor.Constructor) to act as an object template;It may be an object method.Method) to send messages to objects.It may also be a function.Yes, it is a function. It has no relationship with the object and can be called independently.

Due to the compromise of Language designers, some class-related features have been added to JavaScript to make JavaScript look exactly like Java and can be "Object-Oriented ". Although new and this are added to JavaScript, no class ES has been added ). Finally, the function is temporarily responsible for class tasks.

Semantic 1: function used as the constructor

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/**  * Tab  *  * @class Tab  * @ Param nav {string} tab title class  * @ Param content {string} the class of the page content  *  */ 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() { }; // Create an object 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. This, new is a common keyword in object-oriented languages. The function here plays the role of class in traditional object-oriented languages. Of course, the naming rules of identifiers generally follow "uppercase letters.

Semantic 2: functions used as object Methods

Because JavaScript can directly create objects without classes, there are two ways to add methods to objects. First, define the class. The method is mounted to the prototype. The Tab in the preceding example contains the getNav, setNav, and add methods. There is also a method to add this directly in the function.

1 2 3 4 5 6 7 8 9 10 11 12 13

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

Here, Tab is the semantics, And this. getNav/this. setNav/this. add is the semantics and serves as the object method. In addition, you can directly define objects and their methods.

1 2 3 4 5 6 7 8 9 10 11 12 13

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

Tab. getNav/tab. setNav/tab. add is a semantic method used as the object tab.

Semantic 3: as an Independent Function

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

/*  * Determine whether the object is an empty object.  * @param obj {Object}  * @return {boolean}  */ function isEmpty(obj) {   for (var a in obj) {     return false   }   return true } // Define a module ~function() {   // Auxiliary functions   function now() {     return (new Date).getTime()   }   // Module logic... }(); // Define a module using the CommonJS Specification define(require, exports, moduel) {   // Auxiliary functions   function now() {     return (new Date).getTime()   }   // Module logic... })

IsEmpty exists as a global function, and now in the module definition exists as a local function. Both isEmpty and now refer to the function, which does not depend on objects and classes, it can be called independently.

Semantic 4: anonymous function definition module

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

// Global namespace var RUI = {} // ajax.js ~function(R) {   // Helper function...   ajax = {     request: function() {       // ...     }     getJSON: function() {       // ...     }     ...   }   // Expose the module to R   R.ajax = ajax }(RUI); // event.js ~function(R) {   // Helper function...   // Event module definition...   // Expose the module to R   R.event = event }(RUI); // dom.js ~function(R) {   // Helper function...   // DON module definition...   // Expose the module to R   R.dom = dom }(RUI);

After the anonymous function is executed, the API object is exposed to RUI. No matter how much activity is done in the anonymous function, it is invisible outside of the anonymous function, and there is no need to ignore it. The ultimate concern is the public API method, which can be used immediately as long as you understand the parameters and meanings of these methods.

Semantics 5: anonymous js functions process certain special effects, such as processing some data and not exposing too many variables

1 2 3 4 5 6 7 8 9 10 11

// Determine the hack mode of the IE version var IEVersion = function() {   var undef, v =   var div = document.createElement('div')   var all = div.getElementsByTagName('i')   while (     div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',     all[]   );   return v > ? v : undef }();

In the end, as long as the result is IEVersion, all the local variables used in the anonymous function can be isolated. This method is very effective and compact for some temporary data processing.

Summary:

JavaScript was designed by Eich over a few days. It is a short and compact scripting/functional language. For marketing reasons, in order to cater to Java, added some Java-like object-oriented features constructor, this, new ). This, new is copied, but the function of the class is handed over to the function. This leads to confusing JavaScript Functions. They will be used to define classes and serve as methods or functions later. In addition, some people also find that it can be used to define modules and so on.

With the arrival of ES, the reserved word "class" in ES has finally been implemented. class is recommended for defining classes. In addition, there are extend keywords that basically involve "class inheritance. Douglas is in Nordic. at the js Conference, one of the worst designs of ES was class, and this and new are not recommended. this shows that he is still in favor of using functional language to write JavaScript, instead of class-based object-oriented.

The above content is my personal understanding of the function in JavaScript. If you have different understandings, please share it and learn and make progress together.