JavaScript Tutorial/Object Oriented/prototype
Содержание
- 1 Add method to Array object
- 2 Define a method after object instantiation
- 3 Dynamic prototype
- 4 Dynamic Prototype Method
- 5 Function share with Prototype Paradigm
- 6 Hybrid Constructor/Prototype Paradigm
- 7 Modifying Objects: Creating a New Method
- 8 Prototype Paradigm
- 9 Redefining an Existing Method
- 10 Use prototype to add properties to an object
Add method to Array object
<source lang="javascript">
Array.prototype.enqueue = function(vItem) {
this.push(vItem);
}; Array.prototype.dequeue = function() {
return this.shift();
}; Array.prototype.indexOf = function (vItem) {
for (var i=0; i < this.length; i++) {
if (vItem == this[i]) {
return i;
}
}
return -1;
} var aColors = new Array("red", "green", "yellow"); alert(aColors.indexOf("green"));</source>
Define a method after object instantiation
It is possible to define a method for a type of object after the object has already been instantiated.
<source lang="javascript">
var o = new Object; Object.prototype.sayHi = function () {
alert("hi");
}; o.sayHi();</source>
Dynamic prototype
<source lang="javascript">
<html> <head> <title>Example</title> </head> <body> <script type="text/javascript"> function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.owers = new Array("AA", "BB");
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function () {
alert(this.color);
};
Car._initialized = true;
}
}
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
oCar1.owers.push("CC");
document.write(oCar1.owers);
document.write("
");
document.write(oCar2.owers);
</script>
</body>
</html></source>
Dynamic Prototype Method
This method uses a flag (_initialized) to determine if the prototype has been assigned any methods yet.
The methods are only created and assigned once.
<source lang="javascript">
function Car(sColor, iDoors) {
this.color = sColor;
this.doors = iDoors;
this.drivers = new Array("A", "B");
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function () {
alert(this.color);
};
Car._initialized = true;
}
}</source>
<source lang="javascript">
function Car() { } Car.prototype.color = "red"; Car.prototype.doors = 4; Car.prototype.drivers = new Array("M", "S"); Car.prototype.showColor = function () {
alert(this.color);
}; var myHourse1 = new Car(); var myHourse2 = new Car(); myHourse1.drivers.push("M"); alert(myHourse1.drivers); alert(myHourse2.drivers);</source>
Hybrid Constructor/Prototype Paradigm
Use the constructor paradigm to define all nonfunction properties of the object.
Use the prototype paradigm to define the function properties (methods) of the object.
<source lang="javascript">
function Car(sColor, iDoors) {
this.color = sColor;
this.doors = iDoors;
this.drivers = new Array("A", "B");
} Car.prototype.showColor = function () {
alert(this.color);
}; var myHourse1 = new Car("red", 4); var myHourse2 = new Car("blue", 3); myHourse1.drivers.push("C"); alert(myHourse1.drivers); alert(myHourse2.drivers);</source>
Modifying Objects: Creating a New Method
You can define a new method for any existing class by using its prototype property.
<source lang="javascript">
Number.prototype.toHexString = function () {
return this.toString(16);
}; var iNum = 15; alert(iNum.toHexString());</source>
Prototype Paradigm
Prototype Paradigm makes use of an object"s prototype property.
An empty constructor is used only to set up the name of the class.
All properties and methods are assigned directly to the prototype property.
<source lang="javascript">
function Car() { } Car.prototype.color = "red"; Car.prototype.doors = 4; Car.prototype.showColor = function () {
alert(this.color);
}; var my1 = new Car(); var my2 = new Car();</source>
Redefining an Existing Method
<source lang="javascript">
Function.prototype.toString = function () {
return "Function code hidden";
}; function sayHi() {
alert("hi");
} alert(sayHi.toString());
Function.prototype.originalToString = Function.prototype.toString; Function.prototype.toString = function () {
if (this.originalToString().length > 100) {
return "too long.";
} else {
return this.originalToString();
}
};</source>
Use prototype to add properties to an object
<source lang="javascript">
<html> <head> <title>Example</title> </head> <body> <script type="text/javascript"> function Car() { } Car.prototype.color = "red"; Car.prototype.doors = 4; Car.prototype.mpg = 23; Car.prototype.drivers = new Array("A", "B"); Car.prototype.showColor = function () {
alert(this.color);
};
var oCar1 = new Car();
var oCar2 = new Car();
oCar1.drivers.push("C");
document.write(oCar1.drivers);
document.write("
");
document.write(oCar2.drivers);
</script> </body> </html></source>
