Javascript Object-Oriented Programming (1) Encapsulation

Javascript Object-oriented Programming (1): Encapsulation

Author: Ruan Yifeng

Javascript is an object-based language. Almost everything you encounter is an object. However, it is not a true object-oriented programming (OOP) language because there is no class in its syntax.

So, if we want to encapsulate "property" and "method" into an object, or even generate an instance object from the prototype object, what should we do?

1. The original mode of generating objects

Suppose we regard the cat as an object, which has two attributes: "name" and "color".

var Cat = { 
　　　　name : '', 
　　　　color : '' 
　　}

Now, we need to generate two instance objects based on this prototype object.

　　var cat1 = {}; // 创建一个空对象 
　　　　cat1.name = "大毛"; // 按照原型对象的属性赋值 
　　　　cat1.color = "黄色"; 
　　var cat2 = {}; 
　　　　cat2.name = "二毛"; 
　　　　cat2.color = "黑色";

Okay, this is the simplest encapsulation. However, this way of writing has two disadvantages. First, if more instances are generated, it will be very troublesome to write; second, there is no way to see the connection between the instances and the prototype.
2. Improvement of the original model
We can write a function to solve the problem of code duplication.

　　function Cat(name,color){ 
　　　　return { 
　　　　　　name:name, 
　　　　　　color:color 
　　　　} 
　　}

Then generating an instance object is equivalent to calling a function:

　　var cat1 = Cat("大毛","黄色"); 
　　var cat2 = Cat("二毛","黑色");

The problem with this method is still that there is no intrinsic connection between cat1 and cat2, and it cannot reflect that they are the same An instance of a prototype object.
3. Constructor pattern
In order to solve the problem of generating instances from prototype objects, Javascript provides a constructor (Constructor) pattern.
The so-called "constructor" is actually an ordinary function, but the this variable is used internally. Using the new operator on the constructor will generate an instance, and the this variable will be bound to the instance object.
For example, the prototype object of cat can now be written like this,

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

We can now generate instance objects.

　　var cat1 = new Cat("大毛","黄色"); 
　　var cat2 = new Cat("二毛","黑色"); 
　　alert(cat1.name); // 大毛 
　　alert(cat1.color); // 黄色

At this time, cat1 and cat2 will automatically contain a constructor attribute pointing to their constructor.

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

Javascript also provides an instanceof operator to verify the relationship between the prototype object and the instance object.

　　alert(cat1 instanceof Cat); //true 
　　alert(cat2 instanceof Cat); //true

4. Problems with the constructor pattern
The constructor method is easy to use, but there is a problem of wasting memory.
Please see, we now add an unchanged attribute "type" (type) to the Cat object, and then add a method eat (eat mice). Then, the prototype object Cat becomes as follows:

　　function Cat(name,color){ 
　　　　this.name = name; 
　　　　this.color = color; 
　　　　this.type = "猫科动物"; 
　　　　this.eat = function(){alert("吃老鼠");}; 
　　}

Still use the same method to generate an instance:

　　var cat1 = new Cat("大毛","黄色"); 
　　var cat2 = new Cat ("二毛","黑色"); 
　　alert(cat1.type); // 猫科动物 
　　cat1.eat(); // 吃老鼠

On the surface, there seems to be no problem, but in fact, there is a very big problem when doing this Big disadvantage. That is, for each instance object, the type attribute and eat() method have exactly the same content. Every time an instance is generated, it must occupy more memory for repeated content. This is neither environmentally friendly nor efficient.
　alert(cat1.eat == cat2.eat); //false
Can the type attribute and eat() method be generated only once in memory, and then all instances point to that memory address? The answer is yes.
5. Prototype mode
Javascript stipulates that each constructor has a prototype attribute that points to another object. All properties and methods of this object will be inherited by the instance of the constructor.
This means that we can define those unchanged properties and methods directly on the prototype object.

　　function Cat(name,color){ 
　　　　this.name = name; 
　　　　this.color = color; 
　　} 
　　Cat.prototype.type = "猫科动物"; 
　　Cat.prototype.eat = function(){alert("吃老鼠")};

Then, generate an instance.

　　var cat1 = new Cat("大毛","黄色"); 
　　var cat2 = new Cat("二毛","黑色"); 
　　alert(cat1.type); // 猫科动物 
　　cat1.eat(); // 吃老鼠

At this time, the type attribute and eat() method of all instances are actually the same memory address, pointing to the prototype object, thus improving operating efficiency.
　alert(cat1.eat == cat2.eat); //true
6. Prototype mode verification method
6.1 isPrototypeOf()
This method is used to determine whether a certain proptotype object and a certain relationship between instances.

　　alert(Cat.prototype.isPrototypeOf(cat1)); //true 
　　alert(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty()
Each instance object has a hasOwnProperty() method, which is used to determine whether a certain property is a local property or a property inherited from the prototype object.

　　alert(cat1.hasOwnProperty("name")); // true 
　　alert(cat1.hasOwnProperty("type")); // false

6.3 in operator
The in operator can be used to determine whether an instance contains a certain attribute, whether it is a local attribute or not.

　　alert("name" in cat1); // true 
　　alert("type" in cat1); // true

The in operator can also be used to traverse all properties of an object.
　for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }

More Javascript for Object Programming (1) For encapsulation-related articles, please pay attention to the PHP Chinese website!