A journey to learn JavaScript's closures, prototypes, and anonymous functions

This article introduces JavaScript closures, prototypes, and anonymous functions through examples. Please see below for details.

1. About closures

Knowledge required to understand closures

1. Scope of variables

Example 1:

var n =99; //建立函数外的全局变量
function readA(){
  alert(n); //读取全局变量
}

readA(); //Execute this function

Example 2 :

function readB(){
  var c = 9;
  function readC(){
    console.log(c); //ok c可见
  }
  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 global variables are visible within the function , the local variables within the function are invisible to the outside world
The scope of js is chained. The variables in the parent object are always visible to the child object, but the objects of the child object are not visible to the parent object
When we want to get Internal variables within the function

So there is Example 3:

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

The closure is very similar and a variation is made based on this

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

note:

1. Use closures with caution and pay attention to memory usage, because it will save the state of the parent function
2. Don’t Feel free to change the value of the internal variable of the parent function

Understanding closure

note: this refers to 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(){  //此时this (这个执行函数)是属于object对象的,是object对象下的一个属性的值
　　  return function(){   //此时this (这个执行函数)是一个匿名函数,从根对象window生成,是属于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

2. Anonymous function

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

1. Pass Function alphabet method. First declare an anonymous function, and then execute it

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

2. By prioritizing expressions, since Javascript executes expressions It goes from the inside to the outside of the parentheses, so you can use the parentheses to force the execution of the declared function

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

3. void operator Use void operator to execute A single operand not surrounded by parentheses

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

3. About prototype

Prototype prototype

To understand the prototype in js, you first need to understand the object-oriented design of js

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

  console.log(this); //Window 或者 object { name: 'xxx' }
  this.introduce = function(){  //实例对象方法
    console.log(this.name);
  }
}
new People('leon').introduce();
//这里有一个非常有趣的现象,结合前面的来看的话,
//首先function people里的this指向的默认是Window对象
//当 调用 People();时 this 输出为 Window对象
//但一旦调用new People('xx')时, this 输出为 {name:'xx'}
//其实也很好理解,一旦new ,便新建了一个对象

The instance object method can only be like this new People('leon').introduce(); calls the static method

var People = {}; //等于一个对象 {} 或者 function 数组都可以 此时People需要是引用类型
People.sayhi = function(to_who){
  console.log('hi '+ to_who);
}
People.sayhi('lee'); //调用时这样调用

because it must be initialized before use

var People = function(){};       // People 必须为一个 function(){} 即为一个类,不能是对象或值类型或其他引用类型
People.prototype.meet = function(meet_who) {
  console.log('I am '+this.name + ',going to meet ' + meet_who);
};
new People('lee').meet('xx');

Prototype methods can only be called by objects of this class

A.prototype = new B();

Prototype It looks a lot like inheritance, but it’s not. It’s more like clone and is more accurate

If there are attributes with the same name in the parent class and subclass, adopt the principle of proximity. If you can’t find it, go up one level at a time. Find, if you want to specify the attribute to call the superior, use the call method

extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);
obj1.func.call(obj);

The above content is the journey of learning JavaScript closures, prototypes, and anonymous functions shared by the editor. , I hope it is useful to everyone. For more related tutorials, please visit JavaScript Video Tutorial!