JavaScript Tutorial/Object Oriented/prototype

Материал из Web эксперт
Перейти к: навигация, поиск

Add method to Array object

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"));


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.



var o = new Object;
Object.prototype.sayHi = function () {
    alert("hi");
};
o.sayHi();


Dynamic prototype

<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("<BR>");
document.write(oCar2.owers);
</script>
</body>
</html>


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.



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;
    }
}


Function share with Prototype Paradigm

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);


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.



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);


Modifying Objects: Creating a New Method

You can define a new method for any existing class by using its prototype property.



Number.prototype.toHexString = function () {
    return this.toString(16);
};
var iNum = 15;
alert(iNum.toHexString());


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.



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();


Redefining an Existing Method

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();
    }
};


Use prototype to add properties to an object

<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("<br>");
document.write(oCar2.drivers);

</script>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Object_Oriented/prototype&oldid=8471»