Object Oriented Programming in JavaScript

 The following is my understanding of object-oriented programming in JavaScript, please point out any mistakes;

 

JavaScript is an object-based language. Almost everything encountered is an object, but it is not a complete object-oriented language, because there is no class in its grammar. In use, we can encapsulate properties and methods into one object, and sometimes an instance object is generated from the prototype object. We can do this with the following code:

 

Let's first think of the cat as an object with two properties: color and name

var cat = {

    name :"",
    color: ""
}


We can generate two instance objects from this prototype object

     var cat1 = {}; // create an empty object
　　　　 cat1.name = "Da Mao"; // Assign values ​​according to the properties of the prototype object
　　　　 cat1.color = "黄色";
　　var cat2 = {};
　　　    cat2.name = "Er Mao";
　　　　 cat2.color = "black";



This is simple encapsulation, encapsulating two properties in one object. However, this way of writing has two disadvantages. One is that it will be very troublesome to write if more instances are generated; the other is that there is no way between the instance and the prototype, and it can be seen that there is any connection.

 

 We can also use the constructor mode. The constructor is actually an ordinary function, but the this variable is used inside it. We use new to instantiate the function, and the this variable will also be bound to the instance object.

 

 

 

function Cat(name,color){
　　　　this.name=name;
　　　　this.color=color;
　　}



We can use the new operator to generate instance objects

var cat1 = new Cat("big hair", "yellow");
　　var cat2 = new Cat("Er Mao","Black");
　　alert(cat1.name); // big hair
　　alert(cat1.color); // yellow

 

 

cat1 and cat2 will automatically have constructors pointing to their constructors

 

 

      
      alert(cat1.constructor == Cat); //true
　　alert(cat2.constructor == Cat); //true

   

 

 

We can also add immutable properties to cat, such as type or add an eat() method, here we do it in a memory-saving way, defining immutable properties and methods directly on the prototype object.

 

 

function Cat(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}
　　Cat.prototype.type = "Cat";
　　Cat.prototype.eat = function(){alert("eat mice")};

Then we can generate the instance

var cat1 = new Cat("big hair", "yellow");
　　var cat2 = new Cat("Er Mao","Black");
　　alert(cat1.type); // feline
　　cat1.eat(); // eat mice

 

 

 

 

For the inheritance of constructors, we say two methods, one is the  prototype mode, and the other is the improvement of the first method by directly inheriting the prototype.

 

has an animal constructor
function Animal(){
　　　　this.species = "动物";
　　}
There is also a constructor for the "cat" object.

　　function Cat(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}

 

 Now inherit with the first method 

 

    Cat.prototype = new Animal();
　　Cat.prototype.constructor = Cat;
　　var cat1 = new Cat("big hair", "yellow");
　　alert(cat1.species); // animal

 

 

Cat.prototype = new Animal();

 

In the first line of code, we point the Cat prototype object to an instance of Animal.

Equivalent to completely delete the original value of the prototype object, and then assign a new value.

 

Cat.prototype.constructor = Cat;

  

The second line means that any prototype object has a constructor property that points to its constructor. If there is no "Cat.prototype = new Animal();" line, Cat.prototype.constructor points to Cat; after adding this line, Cat.prototype.constructor points to Animal.

 

verify

alert(Cat.prototype.constructor == Animal); //true

 

Each instance also has a constructor property, which calls the constructor property of the prototype object by default

 

alert(cat1.constructor == Cat.prototype.constructor); // true

 

So, after running the line "Cat.prototype = new Animal();", cat1.constructor also points to Animal! So we have to pay attention to using the second line and change the value of the constructor 

 

Another is to directly inherit the prototype, which is an improvement on the previous method, because in the Animal object, the unchanged properties can be directly written to Animal.prototype. So, we can also let Cat() skip Animal() and directly inherit Animal.prototype. 

 

We first rewrite the Animal object

 

　function Animal(){ }
　　Animal.prototype.species = "动物";

 

Point the prototype object of Cat, and then point to the prototype object of Animal, thus completing the inheritance.

 

 

    Cat.prototype = Animal.prototype;
　　Cat.prototype.constructor = Cat;
　　var cat1 = new Cat("big hair", "yellow");
　　alert(cat1.species); // animal

 

But what we should notice is that the second line actually changes the constructor property of the Animal.prototype object.

 

　　alert(Animal.prototype.constructor); // Cat