Learn JavaScript closures, prototypes, and anonymous functions tour _javascript tips

This article gives you an example of JavaScript closures, prototypes, and anonymous functions, see below for specific details.

A .> about closures

Understand the knowledge that closures need

1. Scope of variables

Example 1:

var n = 99; Create global variable function
Reada () {
  alert (n);//Read global variable
}

Reada (); Perform this function

Example 2:

function readb () {
  var c = 9;
  function Readc () {
    console.log (c);//ok c visible
  } return
  readc;
}
alert (c); Error c is not defined.

Note: When declaring variable C inside a function, be sure to add Var, otherwise C will become a global variable

So the global variable is visible within the function, and the local variable in the function is not visible externally.
The scope of JS is chained, the total variable in the parent object is visible to the child object, but the object is not visible to the parent object.
When we want to get internal variables within the function

So there's an example of 3:

function readb () {
  var c = 9;
  function Readc () {
    console.log (c);
  }
  return READC ();
}
READB ();

Closures are very similar based on a variation of the

function readb () {
  var c = 9;
  function Readc () {
    console.log (c);
  }
  return READC;
}
var res = readb ();
Res ();

Note

1. Use closure carefully, pay attention to memory footprint, because it will save the state of the parent function
2. Do not arbitrarily change the value of the internal variables of the parent function

Understanding closures

Note:this refers to the object to which the function containing it is executed

Example 1:

var name = "The window";

var object = {
  name: ' My object ',

getnamefunc:function () {  //This is the object in this case, the execution function is a The value of the property return function  () {   //This is an anonymous function, generated from the root object window and belongs  to the window return　　　　THIS.name;
};
}
};　　　　　　

Example 2:

var name = "The window";

var object = {
  name: ' My object ',

  getnamefunc:function () {
    var = this;
  return function () {return  that.name;
  };

  }
};
Console.log (Object.getnamefunc () ());  My Object　　

Two .> anonymous functions

Define an anonymous function directly and then call this anonymous function, which is common in the definition of jquery plug-ins

1. By the way of the letter quantity of the function. Declare an anonymous function first, and then execute it

(function () {
  console.log (' excute self ');
}) ();

2. By way of the precedence expression, because the JavaScript execution expression is from inside the parentheses to the outside, the declared function can be enforced with parentheses

(
  function () {
    alert (2);
  }
  ()
);

The 3.void operator uses the void operator to perform a single operand that is not surrounded by parentheses.

void function () {console.log (' void ')} ();

Three .> about prototype

Prototype prototype

Understand the Protitype in JS first need to understand the object-oriented design of JS

function people (name) {
  this.name = name;

  Console.log (this); Window or Object {name: ' xxx '}
  this.introduce = function () {  //Instance object method
    Console.log (this.name);
  }
New People (' Leon '). introduce ();
Here's a very interesting phenomenon, combined with the previous view,
//First function people this point to the default is the Window object
//When the call people ();
//But once the new people (' xx ') is invoked, this output is {name: ' xx '}
//Well understood, once new, a new object is created

Instance object methods can only be so new people (' Leon '). Introduce (); Called because it must be initialized before it is used.

Static methods for objects of a class

var people = {}; Equal to an object {} or function array at this point people need to be a reference type
People.sayhi = function (to_who) {
  console.log (' Hi ' + to_who); c20/>}
people.sayhi (' Lee ');//Call when called

Prototype method

var people = function () {};       People must be a function () {} is a class, cannot be an object or value type or other reference type
People.prototype.meet = function (meet_who) {
  Console.log ( ' I am ' +this.name + ', going to meet ' + meet_who);
New people (' Lee '). Meet (' xx ');

A prototype method can only be invoked by an object of that class

A.prototype = new B ();

Prototypes look like inheritance, but actually not, it's more like clone more accurate

If you see a property with the same name as the parent class and subclass, take the proximity principle and if you can't find the first level up, use the call method if you want to specify a property that invokes the ancestor.

Extendclass.prototype = new BaseClass ();
var instance = new Extendclass ();
var baseinstance = new BaseClass ();
Baseinstance.showMsg.call (instance);
Obj1.func.call (obj);

The above content is a small compilation for everyone to learn JavaScript closures, prototypes, and anonymous functions of the trip, hope for everyone useful.