JavaScript and Object Oriented Programming (OOP)
JavaScript is an excellent language to write object oriented web applications. It can support OOP because it supports inheritance through prototyping as well as properties and methods. Many developers cast off JS as a suitable OOP language because they are so used to the class style of C# and Java. Many people don't realize that JavaScript supports inheritance. When you write object-oriented code it instantly gives you power; you can write code that can be re-used and that is encapsulated
What's so great about objects?Objects work so well because they act just like real life objects- objects have properties and methods. So if we were talking about a lamp, a property of it may be its height or width, say 12cm. A method of it may be to shine (an action). And when it's shining, its brightness property would be of a greater value than when it wasn't.
JavaScript gives you the ability to make your own objects for your own applications. With your objects you can code in events that fire when you want them to, and the code is encapsulated. It can be initialized any amount of times.
Creating objects using new Object()
There are several ways to create objects in JavaScript, and all of them have their place. The simplest way is to use the new operator, specifically, new Object():
<script language="javascript" type="text/javascript">
<!--
person = new Object()
person.name = "Tim Scarfe"
person.height = "6Ft"
person.run = function() {
this.state = "running"
this.speed = "4ms^-1"
}
//-->
</script>
<!--
person = new Object()
person.name = "Tim Scarfe"
person.height = "6Ft"
person.run = function() {
this.state = "running"
this.speed = "4ms^-1"
}
//-->
</script>
We define a custom object "person," then add to it its own properties and method afterwards. In this case, the custom method merely initializes two more properties.
Creating objects using Literal Notation
Another inline way of defining an object is via literal notation. Supported in JavaScript1.2 and above, it's a more robust form of creating an object on the fly:
<script language="javascript" type="text/javascript">
<!--
// Object Literals
timObject = {
property1 : "Hello",
property2 : "MmmMMm",
property3 : ["mmm", 2, 3, 6, "kkk"],
method1 : function(){alert("Method had been called" + this.property1)}
};
timObject.method1();
alert(timObject.property3[2]) // will yield 3
var circle = { x : 0, y : 0, radius: 2 } // another example
// nesting is no problem.
var rectangle = {
upperLeft : { x : 2, y : 2 },
lowerRight : { x : 4, y : 4}
}
alert(rectangle.upperLeft.x) // will yield 2
//-->
</script>
<!--
// Object Literals
timObject = {
property1 : "Hello",
property2 : "MmmMMm",
property3 : ["mmm", 2, 3, 6, "kkk"],
method1 : function(){alert("Method had been called" + this.property1)}
};
timObject.method1();
alert(timObject.property3[2]) // will yield 3
var circle = { x : 0, y : 0, radius: 2 } // another example
// nesting is no problem.
var rectangle = {
upperLeft : { x : 2, y : 2 },
lowerRight : { x : 4, y : 4}
}
alert(rectangle.upperLeft.x) // will yield 2
//-->
</script>
Literal notion can contain arrays or arbitrary JavaScript expressions or values.
While using the new operator or literal notion to create a custom object is both simple and logical, the biggest shortcoming is that the result is NOT reusable- we cannot easily initialize different versions of the created object. For example with the first demonstration above, if the person's name is not "Tim Scarfe", we would need to redefine our entire object just to accommodate this change.
Object Constructor and prototyping
In the world of OOP, the previous ways of defining an object is too limiting in many situations. We need a way to create an object "type" that can be used multiple times without having to redefine the object every time to meet each particular instance's needs. The standard way to achieve this is to use the Object Constructor function.
An object constructor is merely a regular JavaScript function, so it's just as robust (ie: define parameters, call other functions etc). The difference between the two is that a constructor function is called via the new operator (which you'll see below). By basing our object definition on the function syntax, we get its robustness as well.
Lets use a real world item "cat" as an example. A property of a cat may be its color or name. A method may be to "meeyow". The important thing to realize, however is that every cat will have a different name or even meeyow noise. To create an object type that accommodates this need for flexibility, we'll use an object constructor:
<script language="javascript" type="text/javascript">
<!--
function cat(name) {
this.name = name;
this.talk = function() {
alert( this.name + " say meeow!" )
}
}
cat1 = new cat("felix")
cat1.talk() //alerts "felix says meeow!"
cat2 = new cat("ginger")
cat2.talk() //alerts "ginger says meeow!"
//-->
</script>
<!--
function cat(name) {
this.name = name;
this.talk = function() {
alert( this.name + " say meeow!" )
}
}
cat1 = new cat("felix")
cat1.talk() //alerts "felix says meeow!"
cat2 = new cat("ginger")
cat2.talk() //alerts "ginger says meeow!"
//-->
</script>
Here the function "cat()" is an object constructor, and its properties and methods are declared inside it by prefixing them with the keyword "this." Objects defined using an object constructor are then instantiated using the new keyword. Notice how we're able to easily define multiple instances of cat, each with its own name- that's the flexibility object constructor brings to custom objects. Constructors create the blueprints for objects, not the object itself.
Adding methods to our object using prototype
We saw above how to add a method to our constructor function by merely declaring it inside the function. Another approach is through prototyping, which is also more popular due to its elegance. Prototype is a type of inheritance in JavaScript. We use it when we would like an object to inherit a method after it has been defined. Think of prototyping mentally as "attaching" a method to an object after it's been defined, in which all object instances then instantly share.
Lets extend our original cat() object above with an additional method to change the cat's name, using prototype:
<script language="javascript" type="text/javascript">
<!--
cat.prototype.changeName = function(name) {
this.name = name;
}
firstCat = new cat("pursur")
firstCat.changeName("Bill")
firstCat.talk() //alerts "Bill says meeow!"
//-->
</script>
<!--
cat.prototype.changeName = function(name) {
this.name = name;
}
firstCat = new cat("pursur")
firstCat.changeName("Bill")
firstCat.talk() //alerts "Bill says meeow!"
//-->
</script>
As you can see we merely use the keyword "prototype" immediately following the object's name to utilize this functionality. The custom method changeName() is now shared by all instances of cat.
Using prototype on prebuilt JavaScript objects
Prototyping works on both custom objects and select prebuilt objects, such as Date() or String. For the later, the general rule is that you can prototype any prebuilt object that's initialized with the "new" keyword. I'm now going to give you an example of the later, by adding additional functionality to the prebuilt Array object of JavaScript.
IE5 doesn't support the shift() and unshift() methods of Array that NS4+ does, so lets prototype them in!
<script language="javascript" type="text/javascript">
<!--
// The shift() and unshift() methods.
if(!Array.prototype.shift) { // if this method does not exist..
Array.prototype.shift = function(){
firstElement = this[0];
this.reverse();
this.length = Math.max(this.length-1,0);
this.reverse();
return firstElement;
}
}
if(!Array.prototype.unshift) { // if this method does not exist..
Array.prototype.unshift = function(){
this.reverse();
for(var i=arguments.length-1;i>=0;i--){
this[this.length]=arguments[i]
}
this.reverse();
return this.length
}
}
//-->
</script>
<!--
// The shift() and unshift() methods.
if(!Array.prototype.shift) { // if this method does not exist..
Array.prototype.shift = function(){
firstElement = this[0];
this.reverse();
this.length = Math.max(this.length-1,0);
this.reverse();
return firstElement;
}
}
if(!Array.prototype.unshift) { // if this method does not exist..
Array.prototype.unshift = function(){
this.reverse();
for(var i=arguments.length-1;i>=0;i--){
this[this.length]=arguments[i]
}
this.reverse();
return this.length
}
}
//-->
</script>
The possibilities are endless.
Subclasses and Superclasses
In Java and C++, there is an explicit concept of the class hierarchy. i.e. Every class can have a super class from which it inherits properties and methods. Any class can be extended, or sub-classed so the resulting subclass can inherit its parent's behavior. As we have seen, JavaScript supports prototype inheritance instead of class based. It's possible for inheritance to happen other ways, however.
The following is an example of inheritance through functions.
<script language="javascript" type="text/javascript">
<!--
// thanks to webreference
function superClass() {
this.supertest = superTest; //attach method superTest
}
function subClass() {
this.inheritFrom = superClass;
this.inheritFrom();
this.subtest = subTest; //attach method subTest
}
function superTest() {
return "superTest";
}
function subTest() {
return "subTest";
}
var newClass = new subClass();
alert(newClass.subtest()); // yields "subTest"
alert(newClass.supertest()); // yields "superTest"
//-->
</script>
<!--
// thanks to webreference
function superClass() {
this.supertest = superTest; //attach method superTest
}
function subClass() {
this.inheritFrom = superClass;
this.inheritFrom();
this.subtest = subTest; //attach method subTest
}
function superTest() {
return "superTest";
}
function subTest() {
return "subTest";
}
var newClass = new subClass();
alert(newClass.subtest()); // yields "subTest"
alert(newClass.supertest()); // yields "superTest"
//-->
</script>
Prototype based inheritance is a far better bet for JavaScript applications in most cases.
Objects as Associative Arrays
As you may know, the dot (.) operator can be used to access the [] operator used with arrays.
<script language="javascript" type="text/javascript">
<!--
// These are the same
object.property
object["property"]
//-->
</script>
<!--
// These are the same
object.property
object["property"]
//-->
</script>
The important thing to notice is that in the object syntax the property is an identifier, whereas in the array syntax, it's a string. The obvious benefits of using an array syntax to access an object is because of the literal data type, you can easily concat strings and play around with them to access an object. For this to work with the standard syntax, an eval() would need to be used.
How do I loop through properties in an object?
You need to use a for/in loop.
<script language="javascript" type="text/javascript">
<!--
testObj = {
prop1:"hello",
prop2:"hello2",
prop3:new Array("helloa",1,2)
}
for(x in testObj) alert( x + "-" + testObj[ x ] )
//-->
</script>
<!--
testObj = {
prop1:"hello",
prop2:"hello2",
prop3:new Array("helloa",1,2)
}
for(x in testObj) alert( x + "-" + testObj[ x ] )
//-->
</script>
What about JScript.NET?
Once you have mastered JScript, you will find it easy to move over to .NET
As the .NET compiler will compile your code into the IL (Intermediate Language) you have the same power to create fully fledged applications as a C# programmer. The great thing about JScript.NET is that it supports typed and untyped programming, (for simple things) so you can still churn out apps quickly.
If you are making complicated Interfaces and such, there is no automatic recognition for this.
Getting as quickly to OOP as possible, I will quickly run over the slightly new syntax with you.
<script language="JScript" runat="server">
var tim : String = "hello";
foo : Array = ["1", "2", "3"];
</script>
var tim : String = "hello";
foo : Array = ["1", "2", "3"];
</script>
You may now explicitly set the data type for a variable.
To make an object, you can use the old fashioned way with JScript, or make a class. For example;
<script language="JScript" runat="server">
public class timObject (n) {
private tim : String = hello; // tim is a property of the object
private name : String = n;
private talk : Function = function(e) { // method
alert ( this.name + " says hello")
}
}
</script>
public class timObject (n) {
private tim : String = hello; // tim is a property of the object
private name : String = n;
private talk : Function = function(e) { // method
alert ( this.name + " says hello")
}
}
</script>
Is there a prototype equivalent?
Yes; but you may still use prototype inheritance.
<script language="JScript" runat="server">
public class extends timObject {
function changeName( n ) {
this.name = n;
}
}
</script>
public class extends timObject {
function changeName( n ) {
this.name = n;
}
}
</script>
It is possible in .NET to make entire web services simply by making a class that extends the framework.
Kaynak www.javascriptkit.com/javatutors/oopjs.shtml
Yorumunuzu Ekleyin
