Detailed explanation of object model code for JavaScript custom properties and methods

In JavaScript, there are many modes for creating an object with custom properties and methods

1. Direct creation mode. This is the simplest and most straightforward pattern. First create an object of reference type and then add custom properties and methods to it. The sample code is as follows:

var person = new Object(); 
person.name = "Sam"; 
person.age = 16; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
person.speak();

As you can see, an object of type Object is created above, and then the name and age attributes and a speak method are added to it. Although creating a pattern directly is simple, its disadvantage is obvious: when we need to create many identical objects, we have to write code repeatedly every time. In order to solve this problem, we can encapsulate the process of creating objects, so we have the following factory pattern.
2. Factory mode. The factory pattern is a commonly used design pattern in programming. It mainly encapsulates the process of creating objects. The sample code is as follows:

function createPerson(name, age){ 
var person = new Object(); 
person.name = name; 
person.age = age; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
return person; 
} 
var person1 = createPerson("Sam", 16); 
var person2 = createPerson("Jack", 18);

After using the factory pattern, creating objects of the same type changes Gotta be simple. But the factory pattern does not solve the problem of object identification, that is, we cannot determine the specific type of the object created. Developers who have experience in object-oriented programming all know that the creation of objects should be based on classes. Once you have a specific custom class, you can then create objects of that class. Fortunately, in JavaScript, we can simulate a class through the constructor pattern.
3. Constructor pattern. There is no difference between constructors and ordinary functions. Any ordinary function can be used as a constructor, as long as the new operator is used; any constructor can also be called as an ordinary function. But in JavaScript, there is a convention that the function name used as a constructor needs to have the first letter capitalized. The sample code is as follows:

function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18);

As you can see, inside the constructor, we use this to add properties and methods. So, what does this refer to? When we create a Person object, this refers to the created object. Now, we can identify the specific types of objects person1 and person2. After using alert(person1 instanceOf Person), you can find that the output value is true. But the constructor pattern also has its own shortcomings, that is, the methods declared within the constructor will be recreated every time a new object is created (in JavaScript, functions are also objects). In other words, the methods within the constructor are bound to the object, not to the class. The output of the code below can verify our inference.
alert(person1.speak == person2.speak); // false A relatively simple way to solve this shortcoming is to put the function declaration outside the constructor, that is:

function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = speak; 
} 
function speak(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18); 
alert(person1.speak == person2.speak); // true

Problem Solved, but this method brought new problems. First, the function speak is declared in the global scope, but it can only be used in the Person constructor. There is a risk of misuse when placed in the global scope; secondly, if a custom type has many methods, Then you need to declare a lot of global functions, which will not only lead to pollution of the global scope, but also is not conducive to code encapsulation. So, is there any way to make a custom type method bound to a class without polluting the global scope? The answer is to use prototype pattern.
4. Prototype mode. After we declare a new function, the function (in JavaScript, functions are also objects) will have a prototype attribute. A prototype is an object that represents the public properties and methods owned by all objects created by this function. The sample code is as follows:

function Person(){} 
Person.prototype.name="Sam"; 
Person.prototype.age=16; 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true

As you can see, although the speak method is not declared in the constructor, the object person1 we created can still call the speak method. This is because JavaScript has a search rule, search first Instance attributes and methods are returned if found; if not found, search in prototype again. The prototype pattern makes the method related to the class and does not pollute the global scope, but it also has its own shortcomings: First, all attributes are also related to the class, which means that all objects share one attribute, which is obviously unreasonable. ; Second, there is no way to pass initialization data to the constructor. The solution is simple, just use a mix of constructor pattern and prototype pattern.
5. Combination mode. The sample code is as follows:

function Person(name, age){ 
this.name = name; 
this.age = age; 
} 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true

It is not difficult to find that the combination mode meets all our needs, and it is also a mode that is currently widely used. Developers with experience in object-oriented programming may feel that it is a bit awkward to put the prototype declaration outside the constructor, so can it be put into the constructor? The answer is yes, just use dynamic combination mode.
6. Dynamic combination mode. The principle is to first determine whether a certain attribute or method in the prototype has been declared. If not, declare the entire prototype; otherwise, do nothing. The sample code is as follows:

function Person(name, age){ 
this.name = name; 
this.age = age; 
if (Person.prototype.speak == "undefined"){ 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
}

The above is the detailed content of Detailed explanation of object model code for JavaScript custom properties and methods. For more information, please follow other related articles on the PHP Chinese website!