JS learning notes OO create suspicious objects

Hello everyone , I meet you again , I'm the king of the whole stack .

Asked 、 Factory introduction , Solve the problem of duplicate code

As mentioned earlier ,JS How to create objects in . It's not hard to find out , The main creation methods are , It's easy to create an object , If you create multiple similar objects, you will generate a lot of repetitive code .

solve ： The factory model approach （ Add a method for creating objects , Pass in parameters to avoid repetition ）

         function createObject(name,age){
                  var obj =new Object();         // Create objects 
                  obj.name = name;
                  obj.age = age;
                  obj.run = function(){
                          return this.name + this.age + ' In processing ...';
                  };
                  return obj;        // Return object reference 
         };

Copy

Question two 、 Introduce constructors , Solve object recognition

Although the above method overcomes the problem of avoiding repeated code . But it also brings about the problem of not recognizing detailed objects , Method used internally new Object The way , Finally, return the object reference , All the objects created by calling this method return Object References to . Therefore use typeof or instanceof Operators cannot distinguish detailed objects .

solve ： Constructors （ Improved factory method ）

         function Box(name,age){    // Create objects                   this.name = name;                  this.age = age;                  this.run = function(){                          return this.name + this.age + ' In processing ...';                  };         };

Copy

Compare ： Careful children's shoes should be found , The difference between this method and the factory mode in question 1 is ： omitted newObject() Clear text running process ; omitted return sentence , These are all run by the backstage itself .

The difference between constructors and ordinary functions lies in the way they are called , Must use new Operators or objects are called in a fake way .

Question three 、 introduce prototype Property object . Solve the sharing problem between objects

Every object will have a prototype, At the same time, it is also an object .

The purpose of use is to solve the sharing problem , The object created by calling the same constructor will share prototype Properties and methods in .

solve ： Use prototype pattern to solve sharing

         function Box() {} // Declare a constructor                   Box.prototype.name = 'Lee'; // Add attributes to the prototype                   Box.prototype.age = 100;                  Box.prototype.run = function () { // Add methods to the prototype                   return this.name + this.age + ' In processing ...';         };

Copy

Compare ：

Constructor creation

Use prototypes to create

details ： When calling properties or methods , Adopt the principle of proximity . First, check whether there is , If not, find the prototype . You can use isPrototypeOf(),hasOwnPrototy(),in Operators for related tests .

Question 4 、 Use combination , Solve the problem of sharing and transferring parameters

Prototype mode creation object omits the process of constructor parameter initialization , This is both its weakness and its strength , The disadvantage is that the object initialization value is the same , And suppose that the prototype attribute includes a reference type , Change an object . The corresponding properties of other objects will also be changed .

solve ： Composite constructor + Archetypal model （ Solve the problem of sharing and transferring parameters ）

         function Box(name, age) {          // Use constructors without sharing                   this.name = name;                  this.age = age;                  this. family = [' father ', ' mother ', ' Younger sister '];         };         Box.prototype = {                  // Shared use prototype pattern                   constructor : Box,                  run : function () {                           return this.name + this.age + this.family;                  }         };

Copy

details ： This way is actually to use constructors with prototypes . Analyze the object to be created , Put the content to be shared into the prototype , What you don't need is put in the constructor . This is the combination .

Optimize ： Such a separate writing is inevitably a little strange . We combine these two parts

Dynamic prototype pattern （ Initialize the prototype when the shared method is called for the first time . It will not be initialized in the future ）

         function Box(name ,age) { // Encapsulate all information into the function body                   this.name = name;                  this.age = age;                  if (typeof this.run != 'function') {// Only in the initialization of the first call                            Box.prototype.run = function () {                                   return this.name +this.age + ' In processing ...';                           };                  }         }

Copy

Middle knot ：

stay Study JS in , It is still very necessary to understand the orthodox object-oriented language , Here we learned to use constructors and prototypes to create objects , Understand the concept of both , For the back JS In depth study of object-oriented will be very helpful . Create different ways to solve problems in different situations , Understand these talents on demand .

Copyright notice ： This article is the original article of the blogger , Blog , Do not reprint without permission .

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/117101.html Link to the original text ：https://javaforall.cn