Examples of several ways to create objects in js_javascript skills

Everything in JavaScript is an object: strings, arrays, numbers, functions, etc. There is no concept of class in JS,

but we can use the grammatical features of JS to create objects with the idea of ​​class.

Original method

Copy code The code is as follows:

The above method generates an object through the new keyword, and then adds properties and methods according to the characteristics of JS as a dynamic language to

construct an object. This is the object that calls the method.

The problem with this approach is that if you need to create objects multiple times, you need to repeat the code multiple times, which is not conducive to code reuse.

Factory method

Copy code The code is as follows:

This approach improves the code To improve the reuse rate, you can also change the factory method and pass in parameter values.

Copy code The code is as follows:

Although the above method can improve the code reuse rate, it is different from the object-oriented class. The concept has a big flaw. The face

object emphasizes that the properties of the object are private, while the methods of the object are shared. When the above factory method creates an object, it must create its own private method for each

object. At the same time, creating logically identical methods for each object wastes memory. The improvements are as follows

Copy code The code is as follows:

The constructor method is the same as the factory method, creating an exclusive function object for each object. Of course, these function

objects can also be defined outside the constructor, so that the object and method are independent of each other.

Prototype method: This method utilizes the prototype attribute of the object

Copy code The code is as follows:

script type="text/javascript">

function Person(){} //Define an empty constructor and cannot pass parameters

//Replace all The attribute methods are all assigned to the prototype attribute

Person.prototype.name = "Koji"; //Add attribute
Person.prototype.age = 22;

Person.prototype.showName = function(){ //Add method
alert(this.name);
}

Person.prototype.showAge = function(){
alert(this.age);
}

var obj1 = new Person(); //Generate a Person object
var obj2 = new Person();

obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Koji
obj2.showAge(); //22

When the Person object is generated, the attributes of the prototype are assigned to the new object. Then properties and methods are shared.

The first problem with this method is that the constructor cannot pass parameters, and each newly generated object has a default value. Secondly, there is no problem with method sharing, but there is a problem with attribute sharing when the attribute is an object that can change its state.

Copy code The code is as follows:

When the above code adds elements to the attribute array of obj1 through obj1, the array of obj2 The attribute elements are also affected by

. The reason is that the array attributes of obj1 and obj2 objects refer to the same Array object. Then change this Array

object and the other one references the Array object. The properties will naturally be affected

Mixed constructor/prototype approach

Use the constructor to define the properties of the object, and use the prototype to define the method of the object, so that you can achieve properties

Private, while methods are shared.

Copy code The code is as follows:

After the attributes are private, changing their respective attributes will not affect other objects. At the same time, methods are also shared by various objects. Semantically,

This meets the requirements of object-oriented programming.

Dynamic prototype method

Copy code The code is as follows:

This method is similar to the constructor/prototype method . Just add the method to the constructor, and add an attribute to the constructor

function Person to ensure that the if statement can only be executed successfully once

In practical applications, the best method is used. The broad one is constructor/prototype methods. Dynamic prototype methods are also popular and are functionally equivalent to constructor

function/prototype methods. Don't use constructors or prototype methods alone.