Javascript object-oriented programming (1): encapsulation

Javascript is an object-based language, and 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 a prototype object, what should we do?

1. The original mode of generating instance 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 the specification (schema) of this prototype object.

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

Okay, this is the simplest encapsulation, encapsulating two properties into an object. 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 mode

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 instances of the same prototype object.

3. Constructor pattern

In order to solve the problem of generating instances from prototype objects, Javascript provides a 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 prototype objects and instance objects.

　　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). 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 big disadvantage in doing so. 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 immutable 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 the 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

In order to cooperate with the prototype attribute, Javascript defines some auxiliary methods to help us use it. ,

6.1 isPrototypeOf()

This method is used to determine the relationship between a certain proptotype object and an instance.

　　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

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

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

in operator can also be used to traverse all properties of an object.

　　for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }