Detailed explanation of class creation and objects in Javascript

There are many ways to create classes and objects using Javascript. Let’s list them now: 1. Original creation method, 2. Factory method pattern , 3. Construction method pattern, 4. Dynamic prototype method. Let's take a detailed look at examples through examples

Now we summarize several methods of creating classes and objects in Javascript:

1. Original creation method:

<script type="text/javascript">
  var person = new Object();
  person.name="Amy";
  person.sex="Woman";
  person.show=function(){
    document.write("name is: "+this.name+" ; sex is:"+this.sex);
  }
  person.show(); 
</script>

Original The creation method is difficult to accept for people who are familiar with Object-oriented. They always feel that properties and methods are not tightly encapsulated. This kind of encapsulation is based on "object name" + "." method, indicating that the properties and methods following the object name are things owned by this object. This object (for example: person) is the encapsulated result. You can continue to add methods and properties, for example, add the age attribute: person.age=23; This creation method will make people familiar with Javaprogramming feel uncomfortable. We can further "encapsulate" the original creation method. Please see the next step:

2. Factory method pattern:

 <script type="text/javascript">
   function personFactory(name,age,sex){
     var ob=new Object();
     ob.name=name;
     ob.age=age;
     ob.sex=sex;
     ob.show=function(){
       document.write(ob.name+" "+ob.age+" "+ob.sex);
     }
     return ob;
   }
   var person=personFactory("Amy",21,"Woman");
   person.show();
 </script>

The factory method pattern looks more like a class. personFactory is The original creation method is encapsulated and the created object is returned to person ReferenceVariable. Person can then reference the created object, but it is not perfect: you can Oncecreate an object, and use the object to call the show() method, a new show()function will be created. They can call the same show method. The optimization method is to The show is placed outside the factory, as follows:

 <script type="text/javascript">
   function show(){
     document.write(this.name+" "+this.age+" "+this.sex);
   }
   function personFactory(name,age,sex){
     var ob=new Object();
     ob.name=name;
     ob.age=age;
     ob.sex=sex;
     ob.show=show;
     return ob;
   }
   var person=personFactory("Amy",22,"Woman");
   person.show();
 </script>

Functionally speaking, the above code solves the problem of function reuse, but the presentation method is not like creating an object, and people familiar with Java still feel uncomfortable. Please see the next step:

3. Constructor mode:

 <script type="text/javascript">
   function person(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     this.show=function(){
       document.write(this.name+" "+this.age+" "+this.sex);
       document.write("<br>");
     }
   }
   var per=new person("Amy",22,"Woman");
   per.show();
 </script>

The creation method of the above code is almost the same as the creation method of Java classes and objects. It encapsulates the properties and methods of the class. Then use the new keyword to create and return an object. Isn't this the process of creating classes and objects in Java? Yes, it is this process, but it can also be optimized. The object created in this way will be created immediately when the show method is called. For a show function, can we create a method common to all objects? Just like the static method in a Java class, all objects use the same static method, and the answer is yes. Please see the next step:

4. Dynamic prototype method:

 <script type="text/javascript">
   function Person(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     if(typeof Person.tag == "undefined"){
       Person.prototype.show=function(){
         document.write(this.name+" "+this.age+" "+this.sex);
         document.write("<br>");
       }
       Person.tag=true;
     }
   }
   var per=new Person("Peter",22,"Man");
   per.show();
 </script>

A little trick is used here. When using new to create an object, the Person function block will be executed. ifJudgment statement, the order is from top to bottom. Of course, the tag variable is not defined at the beginning, so the content in the if statement block is executed:

Person.prototype.show=function(){
 document.write(this.name+" "+this.age+" "+this.sex);
 document.write("<br>");
 }

The meaning of this content is to create a class belonging to the class Person's show method, please note that it is a class method, which is equivalent to the static modified method in Java, rather than a method of a single object. In this way, all objects can call the same method, and there is no need to call it on different objects each time. The method is to create your own show function, which saves space and time. Wouldn't this method be better? Let me explain here, the properties and methods constructed in the "class name.prototype.property/method" method are equivalent to the variables or methods modified with static in Java. They belong to the entire class, not a single object, that is, all objects are shared.

The above is the detailed content of Detailed explanation of class creation and objects in Javascript. For more information, please follow other related articles on the PHP Chinese website!