Several ways to create objects and tangled prototype chains

In front-end learning, I have always been confused about two concepts;

1. Closure. (What is a closure? Why use it? How to use it? Some tutorials are very good; some are daunting for machines with advanced tutorials);

2, the prototype chain. (What is the prototype chain? Who is whose prototype object? Who is who? You are yours and mine? Or mine is mine, yours or mine? *￥%...@#￥);

What is a closure?

Well, students who want to know about closures, please go to my article, portal: https://blog.csdn.net/wangrong111222/article/details/79938999

Now let's digest the prototype chain:

Before that I want to discuss three simple patterns for creating objects (I like to keep things simple, after all, everything is born from null; it's funny);

1. Literal mode (design mode: singleton mode)

var monkey =
   name:"wukong",
   eye:"fireGoldEyes"，
   attack:function(){
    alert(this.name+"a stick caused tons of damage")
  }
}

Alright alright, we made a monkey in literal mode, this monkey is called Monkey King, and has piercing eyes; and let him do tons of damage;

This method should be the most frequently used object definition method, and it is also the recommended definition method, because it is more efficient than other methods; and it is clear;

Disadvantages: One object must be written every time, with the increase of demand, there will actually be tons of objects, which is not flexible enough, and cannot be mass-produced; therefore, the second method came into being;

2. Factory Pattern (Design Pattern: Factory Pattern)

function createObj(name,eye,attcak){
    var o = null;
      o.name=name;
      o.eye=eye;
      o.attack = atttacak
   return o;
}

var monkey =createObj("wukong","fireGoldEyes",function(){
              alert(this.name+"a stick caused tons of damage");
   		 })

This mode is called the factory mode; as the name suggests, the factory can be produced in an assembly line and can be mass-produced; this mode solves the problem of the literal mode, but it has a new problem: although we have obtained a lot of objects, but for these It is impossible to find an object to trace the source; you can understand that the factory owner did not write detailed records for each product (irresponsible boss); in some scenarios we hope to find and modify the properties from the source The first is less powerful; so, the official has given a new method to supplement;

3. Constructor (Design Pattern: Constructor Pattern)

function Monkey(){
     this.name="wukong",
     this.eye="fireGoldEyes";
     this.attack=function(){
    
     alert(this.name+"a stick caused tons of damage")
     }
};

var sunxingzhe=new Monkey();

The implementation of the constructor in jsz draws on the implementation of other oo language modes. The first letter of the function name is capitalized, which is different from other functions in js; before it is not used by the new operator; it is the same as other functions; after new , there is black magic to create objects;

Compare the factory pattern with the following differences:

1. Create objects that are not displayed;

2; There is no return or anything (1,2 can be understood as the background encapsulation operation);

3; directly assign the properties and methods of the function to the current this object;

After executing the new operation, the following process will be performed: (Interview questions, manual funny)

1: Create an object;

2; assign the function scope to the current new object;

3. Execute the code in the constructor once and assign a value to the new object (the method seems to run by itself);

4. Return a new object;

The constructor that generates a new object points to the constructor that generated it

(console.log(  sunxingzhe.constructor=Mokey)       //true）

, you can understand that the grandson is born by the constructor of the monkey); of course, it is also possible to use the instanceof method to detect

(console.log(  sunxingzhe instanceof Mokey)       //true）;

ps: such as Object, Array, etc. are also native constructors;

In this way, we can find the machine that made Sun Wukong, know who made it and can modify the above properties and methods, everything becomes controllable, but at the same time he will have a new problem;

function Monkey(){
     this.name="wukong",
     this.eye="fireGoldEyes";
     this.attack=function(){
    
     alert(this.name+"a stick caused tons of damage")
     }
};

var sunxingzhe=new Monkey();
var liuermihou=new Monkey();

Now we recreate a new great sage---six-eared macaque;

console.log(sunxingzhe.attack===liuermihou.attack) //false;

We will find that each object will have a different method after being new (the addresses referenced in the methods are different);