On the _javascript skill of function multiple understanding in JavaScript

Source: Internet
Author: User
Tags anonymous compact function definition

The function in JavaScript has multiple meanings. It may be a constructor (constructor) that assumes the role of an object template, possibly an object's method , and is responsible for sending messages to the object. It might also be a function, yes, a function, and a function that has nothing to do with an object that can be called independently.

Because of the compromise of language designers, some class-related features are added to JavaScript to make JavaScript look like Java and can be "object-oriented." Although JavaScript adds new and this, there is no class (es added). The last function temporarily assumes the task of class.

Semantic 1: Function as constructor

/** *
 @class Tab *
 @param nav {string} The class
 * @param content {string} page contents
 *< c11/>*/
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 object
var tab = new tab (' Tab-nav ', ' tab-content ');

This defines a class tab and creates an Object tab. The above function is used, this, new. This, new is a common keyword in object-oriented languages, where functions assume the role of class in the traditional object-oriented language. Of course, this time, the name of the identifier generally follows the "first-letter-capital" rule.

Semantic 2: Function as an object method

Because you can create objects directly without classes in JavaScript, there are two ways to add methods to an object. The first defines the class, which hangs on the prototype, such as the tab in the example above, with the Getnav, Setnav, and add methods on the prototype. Here's another way to add a method directly to this one within a function.

function Tab (nav, content) {
  This.nav = nav
  this.content = content
  This.getnav = function () {
    //...
  }
  This.setnav = function () {
    //...
  }
  This.add = function () {
    //...
  }
}

Here Tab is semantics, This.getnav/this.setnav/this.add is semantics, as an object method. In addition, you can define objects and their methods directly

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

Tab.getnav/tab.setnav/tab.add is the semantic, as the Object tab method.

Semantic 3: As a separate function

*
 * To determine if 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 function
  function now () {return
    (new Date). GetTime ()
  }
  //module logic ...
} ();
Define a module
define (require, exports, Moduel) {
  //helper function functions now
  () {return
    (new) with the COMMONJS specification Date). GetTime ()
  }
  //module logic ...
})

IsEmpty exists as a global function, and now in the module definition exists as a local function, whether the function is IsEmpty or now, it does not rely on objects and classes and can be invoked independently.

Semantic 4: Anonymous function definition module

Global namespace
var RUI = {}
//Ajax.js
~function (R) {/
  /auxiliary function ...
  Ajax = {
    request:function () {
      //...
    }
    Getjson:function () {
      //...
    }
    ...
  }
  Exposing the module to R
  R.ajax = Ajax
} (RUI);
Event.js
~function (R) {
  //auxiliary function ...
  Event module Definition ...
  Exposing the module to R
  r.event = Event
} (RUI);
Dom.js
~function (R) {
  //auxiliary function ...
  Don Module definition ...
  Exposing the module to R
  r.dom = Dom
} (RUI);

The anonymous function here exposes the API object to Rui, no matter how much work is done in the anonymous function, which is invisible to the anonymous function, and is not necessary to ignore. The ultimate concern is the public API approach, which can be used immediately if you understand the parameters and meaning of these methods.

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

Hack way to judge 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 one result is ieversion, some local variables are used inside the anonymous function and all can be separated. This approach is very effective and compact for some temporary data processing.

Summarize:

JavaScript was designed by Eich for days, and this is a short, compact script/function language, because of the marketing reasons, in order to cater to Java, add some Java-oriented object-oriented features (constructor, this, new). This,new copy come over, class function but handed to a function to bear. Causing JavaScript functions to be confusing, one is used to define a class and then as a method or function. Other people also dug out that it could be used to define modules and so on.

All this with the end of the ES, es in the reserved word "class" has finally been implemented, the definition class is recommended to use class. There are also extend keyword, the basic "class-style inheritance" have come up. Douglas at the Nordic.js Conference. One of the worst designs for ES is class, which is also not recommended for this and new, suggesting that he still favours using functional language to write JavaScript, rather than based on class-oriented object-oriented methods.

The above content is my personal to JavaScript function of multiple understanding, have different understanding of friends, welcome to share, learn and progress together.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.