preface

This article is intended to share an understanding of object orientation in JS, including references to both Prototype and constructor.

Traditional object-oriented programming

When you think of traditional object-oriented programming, the first thing that comes to mind is class. In traditional object-oriented programming, a class is like a siege, enclosing its properties, constructors, and methods. We can create an instance directly by using the class name object name = new constructor.

However, JS did not have class keyword before ES6, and JS wanted to support object-oriented, so JS used a more zigzag way to solve this problem.

Object orientation in JS

Replace class with function encapsulation

Before ES6, JS did not have the class keyword, but in traditional object-oriented, one of the functions of class is encapsulation, and this operation can also be implemented with functions. For example, if we want to create a Cat class using JS, we can do it with a single function:

function Cat(){}
Copy the code

You can generate instances directly with the new keyword

var cat1 = new Cat()
Copy the code

The constructor

  • In JS, the function itself is a constructor, so the function we just declared Cat() can be used as a constructor. A constructor is the process of constructing an object encapsulated in a function.
function Cat(name,color){
    //this points to an instance after new
       this.name = name
       this.color = color
}
 let cat1 = new Cat('little red'.'red')
    console.log(cat1.name) / / 'red'
Copy the code

As shown in the above code, we want the Cat function to set the name and color of the instance, just make it accept the argument. Note: This in the code block refers to the object instance after new, which is cat1 in this case. In this way, we can use the constructor to set property values for the instance object. So, in JS object-oriented, the properties are already in place, what about the methods?

Note: It is possible to add methods to an instance object in the constructor, but doing so would cause the method to be executed with each new object, which would waste resources. So JS does not take this approach.

Prototype object

Above, we have implemented class attributes and class constructors in JS, but what about methods? The solution in JS is to add a prototype object. The methods attached to this object will be given to the instance object when instantiated.

Cat.prototype.sayHello = function(){
    console.log('Meow meow meow');
}
Cat.prototype.eat = function(){
    console.log('Jerry, give me a minute.');
}
Copy the code

In the code above, each instance generated by using the new keyword has its prototype properties and methods, so add sayHello to cat. prototype and cat1 will use the method.

cat1.sayHello() / / meow meow meow
cat1.eat() // Jerry
Copy the code

In JS, why not put both properties and methods in prototype instead of using the constructor to add properties to the instance and using the prototype object to add methods? This is about to talk about the early JS establishment, there is the intention of “traffic”, so if the constructor is completely lost, it and traditional object-oriented programming is too different. Therefore, use such a tortuous method to solve the JS object-oriented problem.

  • Let’s talk briefly about a few keywords

Look for the instance method __proto__

Before we talk about __proto__, let’s see how it works:

console.log(cat1) // {name: 'red ', color:' red '}
console.log(cat1.__proto__); //{ sayHello: [Function (anonymous)] } 
Copy the code

In the previous code, we added the sayHello method for instance cat1. If we log cat1, we have only name and color properties, and no sayHello method. So how does sayHello come to be used by CAT1? Where did you find it?

That’s how __proto__ is used. In JS object-oriented, when you access a method or property that is not present in an instance object, in this case sayHello, the object uses __proto__ to find it. Note that __proto__ refers to the JS constructor’s prototype.

cat1.__proto__  === Cat.prototype //true
Cat.prototype.__proto__ === Object.prototype //true
Copy the code

{sayHello: [Function (anonymous)]}; If you don’t find it here, then it will go to cat.prototype.proto (Object. Prototype). If you don’t find it here, then it will be null.

constructor

In general, constructor refers to a property of the prototype object that points to the class’s constructor, i.e. the class function itself in JS.

Cat.prototype.constructor === Car //true
Copy the code

conclusion

Here a small summary, JS object-oriented, accurately speaking should be JS based on the original type of object-oriented, there is a JS prototype mechanism, constructor + prototype = JS object-oriented mechanism. In my own understanding, the object-oriented constructor of JS is equivalent to the locomotive, and the methods in Prototype are equivalent to carriages, which constitute the object-oriented train of JS.

(Note: heartfelt thanks to Mr. Ruan Yifeng here, this article is some of my own understanding and summary after carefully studying Mr. Ruan Yifeng’s blog!!)

You are welcome to share your opinions in the comments section. If there are any mistakes in the article, you can also point out in the comments section