In fact, object-oriented thinking is independent of the programming language, for example, in C #, in a static class of static methods, in accordance with procedural development calls a series of static functions, we can hardly say that this is object-oriented programming, in contrast, like jquery and ExtJS such a good JavaScript library, But it embodies the object-oriented design idea everywhere. This article is not going to explore whether JavaScript can be counted as an object-oriented programming language, a problem that people who attach importance to Chinese exams should be concerned about, and I'm simply explaining how to use object-oriented programming ideas in JavaScript.
Object orientation is the first object. Creating an object in JavaScript is simple:
Copy Code code as follows:
This creates an object, and we can easily add attributes and methods to this object:
Copy Code code as follows:
O.name= "Object Name";
O.showname=function () {
alert (o.name);
}
But most people are used to putting objects ' properties and methods inside a pair of {} objects:
Copy Code code as follows:
var o = {
Name: "Object Name",
Showname:function () {
alert (o.name);
}
}
There are two ways to access properties and methods, the first:
Copy Code code as follows:
alert (o.name);
O.showname ();
This type of writing is common, as is the property and method of calling objects in C #. There is also a particular type of JavaScript that uses the name of a property or method as an index to access:
Copy Code code as follows:
Alert (o["name"]);
o["ShowName"] ();
This seems to be a bit and the "fennel anise word has several ways to" almost, in fact, very few people use the index to invoke the object's properties or methods.
In addition to our custom attributes and methods, our object also has a constructor attribute and a method such as ToString (). These properties and methods are from object-built objects, and all objects have these properties and methods. Where the constructor property points to the constructor that constructs the object. We do not use constructors to create objects, and in fact, JS interpreters use the object constructor. If we define the constructor ourselves, then we can create the object through the constructor, so that the object created has the same properties and methods, and it begins to taste a bit object-oriented. OK, let's start with a simple example to see how to create a constructor:
Copy Code code as follows:
function person (name, sex, age) {
THIS.name = name;
This.sex = sex;
This.age = age;
This.showinfo = function () {
Alert ("Name:" + this.name + "Sex:" + This.sex + "Age:" + this.age);
}
}
We've defined a constructor named person, which has three properties and one method, and it's very simple to generate an object and invoke the method through a constructor:
Copy Code code as follows:
var Zhangsan = new Person ("John", "male", 18);
Zhangsan.showinfo ();
After running, we can see a pop-up dialog box showing the message of this person named John:
We can also look at the object's constructor properties to see if the Zhangsan constructor is our defined person:
Copy Code code as follows:
alert (zhangsan.constructor);
The result is as shown in figure:
As you can see, it is our person constructor.
However, there is still a problem here, every time we construct an object, we will allocate the memory space for the properties and methods in memory, and in fact, all the objects can use the same method, do not need to have a copy of multiple methods, so that some waste of memory space. Now that we are aware of the problem, let's think about how to solve it. A natural idea is that since we only want to allocate memory space for a method, we can set a value to identify whether the method's memory space has been allocated, and in this way, we modify the constructor as follows:
Copy Code code as follows:
function person (name, sex, age) {
THIS.name = name;
This.sex = sex;
This.age = age;
if (typeof person._initialized = = "undefined") {
This.showinfo = function () {
Alert ("Name:" + this.name + "Sex:" + This.sex + "Age:" + this.age);
}
Person._initialized = true;
}
}
Here, we use a member _initialized to indicate whether the method has been allocated in memory space. When the first object is constructed, _initialized is not defined, so our judgment statement is true, then the method is defined and the memory space is allocated, then the _initialized value is set to true to indicate that the method's memory space has been allocated. When the second object is constructed, it does not go into judgment and therefore does not allocate the memory space again. There seems to be no problem, run a look, John information is still normal display. Although not hard, but solved a small problem, or celebrate it, to pan-cooked meat, I want to feast. Have not opened to eat, a call dick mm also want to let the computer pop-up her personal information. OK, very simple, then construct an object, and then call the Showinfo method can be:
Copy Code code as follows:
var lisi = new Person ("Dick", "female", 28);
Lisi.showinfo ();
In order to take care of MM, also put this paragraph in the front of the John. MM information is correctly displayed, but John Information is missing. This next Zhang three not happy, ranked in mm behind also Bale, but at least have a name AH. This can be bitter I this programmer, the cooked meat seems to have no way to eat, first change the bug bar. Open Firebug, see the information displayed in mm after the error, prompted: Zhangsan.showinfo is not a function. Set breakpoints to see, the construction of Zhangsi objects later found that there is no showinfo this method. The original Showinfo method, although only one, exists in the first object, and the second object is inaccessible. So how do you get the same function for objects produced by the same constructor? The prototype in JavaScript provides us with this functionality. As described in JavaScript specifications, each constructor has a prototype property that is used to implement inheritance and property sharing. Our Showinfo method can also be viewed as a property that points to a reference to a function. Now we use prototype to make our methods can be shared, the code changes are very simple, the this.showinfo changed to Person.prototype.showInfo on it, after the changes of the code as follows:
Copy Code code as follows:
function person (name, sex, age) {
THIS.name = name;
This.sex = sex;
This.age = age;
if (typeof person._initialized = = "undefined") {
Person.prototype.showInfo = function () {
Alert ("Name:" + this.name + "Sex:" + This.sex + "Age:" + this.age);
}
Person._initialized = true;
}
}
Use this constructor to generate two objects:
Copy Code code as follows:
var lisi = new Person ("Dick", "female", 28);
Lisi.showinfo ();
var Zhangsan = new Person ("John", "male", 18);
Zhangsan.showinfo ();
After the run, the Dick information is displayed, followed by the John Information. Now two people are satisfied, but my spicy pork is already cold
