One advantage of (Javascript) prototype is also a disadvantage

Javascript

How do I implement OO programming in JavaScript? I'm afraid the best way is to take full advantage of the prototype attribute. There are a lot of introductions about prototype, and I will not repeat them. The basic principle is that when you write a class with prototype, when you new object, the browser automatically attaches the contents of the prototype to the object. That way, by leveraging prototype, you're also implementing OO-like JavaScript.

In JavaScript, object is a associative array. A function is a class. When you write the following function, you actually define a class, which is its constructor.

function MyObject (name, size)

{

THIS.name = name;

this.size = size;

}

After that, you can conveniently expand it by MyObject the prototype attribute of the class. For example, you can add other attributes and methods to him.

MyObject.prototype.tellSize = function ()

{

Return ' size of ' +this.name+ ' is ' +this.size;

}

MyObject.prototype.color = "Red";

MyObject.prototype.tellColor = function ()

{

Return ' color of ' +this.name+ ' is ' +this.color;

}

var myobj1 = new MyObject ("Tiddles", "7.5 meters");

Domdiv.innerhtml + + myobj1.tellcolor () + "<br/><br/>";

As you can imagine, when you call the Tellcolor () method, the result is this:

Color of Tiddles is red

Conveniently, the prototype property can be added dynamically. For example, you need to add a height attribute to the MyObject and expect it to provide a tellheight () method to get the value of the Height property. You can continue to add the following code after the above code:

MyObject.prototype.height = "2.26 meters";

MyObject.prototype.tellHeight = function ()

{

Return "The height of" +this.name+ "is" +this.height;

}

After that, you can visit Myobj1 's Tellheight () method, and you can get the following results:

The height of tiddles is 2.26 meters

These dynamic features of prototype look fascinating, but I feel somewhat chill. Indeed, these features give you a lot of flexibility and can give you the ability to runtime changes in class attributes and methods. However, a little bit of digging, there will be some bad habits generated.

First, if you can add properties and methods dynamically, it's easy to think of the properties or methods that I want to invoke when I invoke them. This is a very serious question, and if we don't have the property or method at all when we call it, it could cause our script to drop.

But there are solutions. For example, in the above code, when there is no Tellheight () method, we can write the following code to avoid errors:

if (myobj1.tellheight)

{

Domdiv.innerhtml + + myobj1.tellheight () + "<br/><br/>";

}

Note that it must be in the IF statement, do not add the right behind the method (), otherwise, directly down. Interested readers can print and see what the difference is between accessing Myobj1.tellheight and Myobj1.tellheight () separately.

Maybe, you think it's a small meaning. Why don't you just add a judgment?

Yes, but the following is a more troubling problem.

The problem of properties and methods is simple, but the problem of changing the properties and methods is serious. Can we detect it without changing it? For example, take a look at the following code:

function MyObject (name, size)

{

THIS.name = name;

this.size = size;

}

MyObject.prototype.color = "Red";

MyObject.prototype.tellColor = function ()

{

Return ' color of ' +this.name+ ' is ' +this.color;

}

var myobj1 = new MyObject ("Tiddles", "7.5 meters");

Domdiv.innerhtml + + myobj1.tellcolor () + "<br/><br/>";

MyObject.prototype.color = "green";

Domdiv.innerhtml + + myobj1.tellcolor () + "<br/><br/>";

The code will produce the following results:

Color of Tiddles is red
Color of Tiddles is green

Notice that you are modifying the color property of the class MyObject. But you're surprised to see you. The attribute value of the object myobj1 that was instantiated has also changed. Days! If your project code is more than one person, then maybe someone will modify your class in order to plan for themselves. So, everyone's object has changed. So you're stuck in a long process of debug ... (Don't say I didn't tell you.)

The above are attributes, and there are methods:

function MyObject (name, size)

{

THIS.name = name;

this.size = size;

}

MyObject.prototype.color = "Red";

MyObject.prototype.tellColor = function ()

{

Return ' color of ' +this.name+ ' is ' +this.color;

}

var myobj1 = new MyObject ("Tiddles", "7.5 meters");

Domdiv.innerhtml + + myobj1.tellcolor () + "<br/><br/>";

MyObject.prototype.color = "green";

MyObject.prototype.tellColor = function ()

{

Return "Your Color of" +this.name+ "is" +this.color;

}

Domdiv.innerhtml + + myobj1.tellcolor () + "<br/><br/>";

The result of this code is:

Color of Tiddles is red
Your color of Tiddles is green

Ha? The original method can also change, sweat!

Here's the problem. JavaScript is too flexible to program how many people do not fit. No one would make such a mistake if the whole team had a higher level. However, when a young man does not know, the unauthorized modification of the class will cause all the objects of the person to change, whether the attribute or method. This is a serious problem in the Ajax era when JavaScript code is becoming more and more numerous.

This shows that a good programming style is more important when writing JavaScript. Remember someone once said this, think of Java and C # These more stringent language, although reduced flexibility, but also reduce the possibility of making mistakes. In this way, even a novice, he wrote the code will not be too much difference with the master. However, such as JavaScript scripting language, because too flexible, so the master wrote the Angel, and the new handwriting, may be the devil!