JavaScript Learning Notes (vi) _JAVASCRIPT skills

Source: Internet
Author: User
Tags mixed
first, the factory way
Own understanding: To create instances of many objects, these instances have the same properties, but have different attribute values. This is the time to create a factory function (factory functions).
Factory function: Creates and returns an object of a particular type. \ factory
In a factory function, if a property is a method, you can define the object's method outside the factory function, and then point to the method with the attribute, so that each object is shared with the same function, so that you can avoid calling your own property method each time.
Example:
Copy Code code as follows:

<script type= "Text/javascript" >
Methods for defining objects outside of a factory function
function Shownamefn () {
Alert (this. Name);
}
Factory Way to create objects
function Creatbofn (sname, iage, Bsex) {
var BO = new Object ();
BO. Name = sname;
BO. age = iage;
BO. Sex = Bsex;
BO. ShowName = Shownamefn; This property is actually a pointer to a function and is a method
return BO;
}
Button Test Call
function Factorycreatefn () {
var oPerson1 = creatbofn ("John", true); Creating an instance is actually calling the method directly
Operson1.showname ();
}
</script>

Summary: The factory function defines a class or object in this way, and he invokes the factory function when creating an instance.
Second, the structure function way
The first step is to select the class name, which is the name of the constructor, and capitalize the first letter of the Bo name, and look at the following code that looks like the factory function above.
Example:
Copy Code code as follows:

------The second: the constructor method--------------------------------
function car (color, money) {
This. color = color;
This. Money = money;
This. Showmoney = function () {
Alert (this. Money);
}
}
Button Invoke test
function Newcarfn () {
var Car1 = new Car ("Red", "230,000 RMB");
Car1.showmoney ();
}
//----------------------------------------------------------

Compare the differences between the previous factory function methods:
The ① constructor does not create objects internally, but instead uses the This keyword.
② uses the new operator to call the constructor.
Third, prototype mode
Using the object's prototype attribute, you can think of him as the prototype on which the new object is created, with an empty constructor to set the class name, and all the properties and methods are directly assigned to the prototype attribute.
The problem with the prototype approach:
First of all, this constructor has no arguments, and when you use a prototype, you cannot initialize the value of the property by passing parameters to the constructor. You must create an object before you can change the default value of the property.
Second, when the attribute points to an object, not a function, the object is shared by multiple instances, and one of the changes causes the other object to change.
Example:
Copy Code code as follows:

First, define an empty constructor
function car () {
}
Attributes and methods directly give prototype properties
Car.prototype.Color = "red,";
Car.prototype.Money = "200,000";
Car.prototype.Drivers = new Array ("small", "little Four");
var Car1 = new car ();
Car1.Drivers.push ("Small Five"); Example 1 adds a value to the object drivers (in fact, adds a "small five" in the prototype, so when the second object is read the attribute drivers also appears as a small five)
alert (car1.drivers);
var Car2 = new car ();
alert (car2.drivers); In instance 2, the value in the object has changed! Output "small, four, small five"

Iv. Mixed constructor/prototype approach
Using constructors and prototypes together, you can create objects like other languages.
The constructor defines all the non function properties of an object, and the stereotype defines the Function property (method) of the object.
Example:
Copy Code code as follows:

function Bostudent (name,age) {
this. Name = name;
this. Ages = age;
this. Course = new Array ("Language", "mathematics");
}
BOStudent.prototype.ShowName = function () {
Alert (this. name);
};
Click the button to debug
function admixture () {
var stu1 = new Bostudent ("John", 20); New First Bo
var stu2 = new Bostudent ("Dick", 22); New Second Bo
STU1. Course. Push ("physics"); Add physical course items to object 1
Alert (stu1. course);
Alert (STU2. course);
}

The hybrid constructor/prototype approach is the main approach used by ECMAScript, and he has other ways of doing it without their side effects.
v. Dynamic Prototyping method
Most object-oriented languages, when defining classes, both properties and methods are packaged together. The above mixed constructor/archetype method attributes and methods are separate, and some people think that it is illogical to find the attribute inside the constructor, and therefore the dynamic prototyping method is produced.
The difference is that the method assigned to the object is positioned differently. The dynamic prototyping method is within the constructor, and the fourth above is outside the constructor.
Example:
Copy Code code as follows:

function Bodynamicprototype (name, age) {
this. Name = name;
this. Ages = age;
this. Course = new Array ("111", "222");
The _initialized identity determines whether the stereotype has been initialized, that is, whether any method has been given to the prototype, which creates and assigns only once
if (typeof bodynamicprototype._initialized = = "undefined") {
BODynamicPrototype.prototype.ShowName = function () {
Alert (this. name);
};
Bodynamicprototype._initialized = true;
}
}

Click the button to debug
function Dynamicprototype () {
var stu1 = new Bodynamicprototype ("AAA", 20); New First Bo
var stu2 = new Bodynamicprototype ("BBB", 22); New Second Bo
STU1. Course. Push ("333"); Add physical course items to object 1
Alert (stu1. course);
Alert (STU2. course);
}

Vi. Hybrid Factory approach
The intent is to create a fake constructor that returns only a new instance of another object. This approach has the same problem with the classic approach to internal management of object methods. It is highly recommended that you avoid using it unless you have to!
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.