Learning javascript closures, prototypes, and anonymous functions _ javascript skills

Javascript has several very important language features: object, prototype inheritance, and closure. Closures are a new language feature for programmers who use traditional static language CC ++. This article will introduce JavaScript closures, prototypes, and anonymous functions, for more information, see the following section.

1.> about closures

Knowledge of closures

1. Scope of Variables

Example 1:

Var n = 99; // create the global variable function readA () {alert (n); // read the global variable}

ReadA (); // execute 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 the function declares the variable c, you must add var; otherwise, c will become a global variable.

Therefore, global variables are visible in the function, but local variables in the function are invisible to the outside.
Js scopes are chained. the variables in the parent object are always visible to the child object, but the sub-object is invisible to the parent object.
When we want to obtain the internal variables in the function

So there is Example 3:

function readB(){  var c = 9;  function readC(){    console.log(c);  }  return readC();}readB();

The closure is similar to a variant based on this.

function readB(){  var c = 9;  function readC(){    console.log(c);  }  return readC;}var res = readB();res();

Note:

1. Use the closure with caution. Pay attention to memory usage because it will save the status of the parent function.
2. Do not change the internal variable value of the parent function.

Understanding closures

Note: this indicates the object to which the function containing it belongs when it is executed.

Example 1:

Var name = "The Window"; var object = {name: "My Object", getNameFunc: function () {// At this time this (this execution function) belongs to The object, return function () {// this (execution function) is an anonymous function generated from the root object window and belongs to window return this. name ;}}}; console. log (object. getNameFunc (); // the window

Example 2:

var name = "The Window";var object = {  name : "My Object",  getNameFunc : function(){    var that = this;  　　return function(){  　　  return that.name;  　　};  }};console.log(object.getNameFunc()());  //My Object

Ii.> anonymous Functions

Directly define an anonymous function and call this anonymous function. This form is common in the definition of jquery plug-ins.

1. The function uses letters to declare an anonymous function and then execute it.

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

2. By using a priority expression, since the Javascript Execution expression is from inside the parentheses to the outside, you can use parentheses to forcibly execute the declared function.

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

3. The void operator uses the void operator to execute a separate operand without parentheses

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

Iii.> about prototype

Prototype

To understand the protitype in js, you must first understand the js object-oriented design.

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 (); // This is a very interesting phenomenon, // first, this in function people points to the Window object by default. // when People () is called, this output is the Window object. // However, once new People ('xx') is called ') this output is {name: 'xx'} // It is also easy to understand. Once new, an object is created.

The instance object method can only be like this new People ('leon'). introduce (); called because it must be initialized before use

Static Methods of class objects

Var People = {}; // equals to an object {} or a function array. In this case, People must be of the reference type. sayhi = function (to_who) {console. log ('Hi' + to_who);} People. sayhi ('lil'); // This is called during the call.

Prototype Method

Var People = function () {}; // People must be a function () {} That is, a class. It cannot be an object, 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 ');

The prototype method can only be called by objects of this class.

A. prototype = new B ();

The prototype looks like inheritance, but it is not actually, it is more like clone and more accurate

If the parent class and subclass have duplicate attributes, use the proximity principle. If the first-level and top-level attributes cannot be found, use the call method to specify the attributes of the upper-level invocation.

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 Editor to share with you the journey of learning javascript closures, prototypes, and anonymous functions, hoping to be useful to you.