Javascript constructor and prototype, dynamic prototype _ js object-oriented

Source: Internet
Author: User
JS programming is most commonly used in the definition of two object classes. Either of the following two methods can achieve the same effect! The following two methods are commonly used in daily JS programming:
1. Mixed constructor and prototype (emphasis)

The Code is as follows:


Function car (sColor, iNumbers) {// The constructor is only used to define all non-function attributes of an object, that is, attributes of an object.
This. color = sColor;
This. numbers = iNumbers;
This. dirvers = new Array ("Jone", "Leon ");
}
Car. prototype. showColor = function () {// The prototype is used only to define all function attributes of an object, that is, the object method.
Alert (this. color );
}
Var car1 = new car ("red ");
Var car2 = new car ("yellow ");
Car1.showColor )();
Car2.showColor )();


Conclusion: When you create (new) a new object instance car1 and car2, both car1 and car2 inherit all the non-function attributes of the function object car; the car function generates a showColor method for the car function object prototype. car1 and car2 both reference the showColor method in the car prototype, if we put the prototype method into the car function body, car1 and car2 are not referenced at this time, but every time we execute the car function, we will build a showColor function. If there are 100 cars, we need to repeat the construction of 100 functions. Therefore, we need to separate non-function attributes from function attributes.
2. Dynamic Prototype (important)

The Code is as follows:


Function car (sColor, iNumbers) {// The constructor is only used to define all non-function attributes of an object, that is, attributes of an object.
This. color = sColor;
This. numbers = iNumbers;
This. dirvers = new Array ("Jone", "Leon ");
If (typeof car. _ initialized = "undefined") {// at this moment, the car. _ initialized is set up and the following function is executed.
Car. prototype. showColor = function (){
Alert (this. color );
}
}
Car. _ initialized = true ;//
When it is executed, it stops and does not run for the second time, because at this moment, car. _ initialized is only a function attribute, not a prototype attribute of the function object. If it is a prototype attribute, the new function object instance will change the attributes of the prototype object in the function, then the showColor function is constructed again. For this reason, when the car. when _ initialized is equal to undefined, run the showColor command to get the car. _ initialized = true. At this time, the attributes of the function are changed, not those of the function prototype. Therefore, an external new object instance cannot change the attributes of the function, all the code in the red part is to do one thing: only the methods between the red code are executed, and each method is only once and will not be executed repeatedly!
}
Var car1 = new car ("red ");
Var car2 = new car ("yellow ");
Car1.showColor ();
Car2.showColor ();


Conclusion: No matter which one of the above two methods can achieve the same effect!
Method 1: The mixed constructor and prototype are equivalent to separating non-function attributes from general attributes, so that new functions are not repeatedly constructed when new objects are created, the prototype method of the referenced knowledge function object and the attributes of the function object. However, the Code does not seem encapsulated and does not affect anything.
Method 2: JAVA programming code is fully used to implement JS programming. This makes the entire function seem to "encapsulate" attributes and methods in a function, and looks more like a "class ". (For better understanding: JS does not actually have a class. if you want to have a class, you can regard it as a function class.) The disadvantage is that if () statements seem unfriendly.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.