Home > Web Front-end > JS Tutorial > body text

javascript mixed constructor and prototype method, dynamic prototype method_js object-oriented

WBOY
Release: 2016-05-16 18:40:04
Original
834 people have browsed it

The following two methods are most commonly used in our daily JS programming:
1. Mixed constructor and prototype methods (emphasis)

Copy the code The code is as follows:

function car (sColor,iNumbers){ // The constructor is only used to define all non-function properties of the object, that is, the properties of the object
this.color = sColor;
this.numbers = iNumbers;
this.dirvers = new Array ("Jone","Leon");
}
car.prototype.showColor = function (){ // The prototype method is only used to define all function attributes of the object, that is, the object's method
alert(this.color);
}
var car1 = new car("red");
var car2 = new car("yellow");
car1.showColor)();
car2.showColor)();

Summary: When you create (new ) When a new object instance car1 and car2 are created, both car1 and car2 inherit all the non-function attributes of the function object car; at this time, a showColor method is generated outside the car function in the prototype of the car function object. At this time, car1 and car2 will refer to the showColor method in the prototype of car. If the prototype method is put into the car function body, then car1 and car2 are not in a reference relationship at this time. Instead, each time the function is executed, a showColor function is constructed. If there are 100 cars , then 100 functions must be constructed repeatedly. Therefore, non-functional attributes and functional attributes should be written separately.
2. Dynamic prototype method (key points)
Copy code The code is as follows:

function car (sColor,iNumbers){ // The constructor is only used to define all non-function properties of the object, that is, the properties of the object
this.color = sColor;
this.numbers = iNumbers;
this.dirvers = new Array ("Jone","Leon");
if(typeof car._initialized=="undefined"){ //At this moment, car._initialized here is established, continue execution The following function
car.prototype.showColor = function (){
alert(this.color);
}
}
car._initialized = true; //
is executed to Stop here and never execute it a second time, because at this moment, car._initialized is only an attribute of the function, not the prototype attribute of the function object. If it is a prototype attribute, new an instance of the function object will change the inside of the function. If the attribute of the prototype object is used, the showColor function will be repeatedly constructed. For this reason, when car._initialized is equal to undefined, execute showColor once, and finally get car._initialized=true. At this time, the properties of the function are changed, not the properties of the function prototype, so an external new object instance is There is no way to change the properties of the function at all. All the codes in the red part are to do one thing: only execute the methods between the red codes, and each method is only executed once, and will not be executed repeatedly!
}
var car1 = new car ("red");
var car2 = new car ("yellow");
car1.showColor();
car2.showColor();

Summary: No matter which of the above two methods is used, the same effect can be achieved!
Method 1: The mixed constructor and prototype method is equivalent to writing non-function attributes and general attributes separately, so that when a new object is created, a new function will not be repeatedly constructed, and the prototype of the knowledge function object referenced at this time Method and function object properties. However, the code doesn't appear to be encapsulated and doesn't affect anything.
Method 2: Completely utilize JAVA programming coding style to implement JS programming. The advantage of this is that the entire function looks like the attributes and methods are "encapsulated" in a function body, and looks more like a "class". (Reviewing the past and learning the new: There are actually no classes in JS. If you say there is a class, you can think of it as a function class). The disadvantage is that using the if() statement does not look very friendly.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template