JavaScript与面向对象[旧作迁移]

2006年09月21日 星期四 13:42

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

next we will introduce the  Encapsulation of js:

// C# Pet class

public class Pet
{
    private string name;

    public Pet(string name)
    {
        this.name = name;
    }

    public string GetName()
    {
        return name;
    }
}

we will use as follows :

Pet p = new Pet("Max");
System.Console.WriteLine(p.GetName());

but in js we use this character as these:

// JavaScript Pet class

function Pet(name) {
    this._name = name;
}

Pet.prototype._name;

Pet.prototype.getName = function() {
    return this._name;
}

var p = new Pet("Max");
alert(p.getName());

Inheritance :

// C# Dog class

public class Dog : Pet
{
    public Dog(string name) : base(name)
    {
    }

    public void WagTail()
    {
        // Wagging
    }
}

// C# Cat class

public class Cat : Pet
{
    public Cat(string name) : base(name)
    {
    }

    public void Purr()
    {
        // Purring
    }
}

But in js:

// JavaScript Dog class

function Dog(name) {
    Pet.call(this, name);
}

Dog.prototype = new Pet();

Dog.prototype.wagTail = function() {
    // Wagging
}

// JavaScript Cat class

function Cat(name) {
    Pet.call(this, name);
}

Cat.prototype = new Pet();//cat的某个属性是pet这个对象，然后用声明的这个

                          //属性去继承pet的属性。

Cat.prototype.purr = function() {
    // Purring
}

Polymorphism：

In C#:

// C# Pet class

public class Pet
{
    // ...

    public virtual void Speak()
    {
        System.Console.WriteLine(GetName() + " says...");
    }
}

// C# Dog class

public class Dog : Pet
{
    // ...

    public override void Speak()
    {
        base.Speak();
        System.Console.WriteLine("woof");
    }
}

// C# Cat class

public class Cat : Pet
{
    // ...

    public override void Speak()
    {
        base.Speak();
        System.Console.WriteLine("meow");
    }
}

In JavaScript:

// JavaScript Pet class
// ...

Pet.prototype.speak = function() {
    alert(this.getName() + " says...");
}

// JavaScript Dog class
// ...

Dog.prototype.speak = function() {
    Pet.prototype.speak.call(this);
    alert("woof");
}

// JavaScript Cat class
// ...

Cat.prototype.speak = function() {
    Pet.prototype.speak.call(this);
    alert("meow");
}

ECMAScript中创建工厂模式：（是不是很象java --factory pattern）
function createFruit() {
  var tempFruit = new Object;
  tempFruit.name = "apple";
  tempFruit.number = 5;
  tempFruit.showName = function() {
  alert(this.name);
};
return tempFruit;
}

var Fruit1 = creatFruit();
var Fruit2 = creatFruit();
<后记2006-10-13>：今天又发现js与xml可以很好的结合，真是太完美了，它虽然在客户端不支持file的
操作，但这样可以极大的提高安全性，microsoft为了支持这个功能居然冒天下之大不韪，最后还不是被黑客利用。
快哉快哉！
js对xml的操作与java对xml的操作及其类似，如：getAttribute();...


------------------------------------------------------------------
javascript的原型机制:

引用

每个JavaScript对象都有原型对象，对象都继承原型对象的所有属性。一个对象的原型是由创建该对象的构造函数定义的。JavaScript的所有函数都有一个名为prototype的属性，该属性引用了原型对象，该原型对象初始化的时候只有 constructor属性来引用创建该原型对象的对象。JavaScript没有Class定义类的概念，构造函数就定义了类，并初始化类中的属性，每个类的成员都会从原型对象中继承相同的属性，也就是说，原型对象提供了类的实例共享的属性和方法，这就节约了内存。
　　当读取一个对象的属性的时候，JavaScript会先从对象中查找，如果没有查找到，才会到原型对象中查找该属性（或方法），所以，尤其是对于方法，最好保存到原型对象中以便于共享，并且达到节省内存的目的，而且原型对象还有一个强大的功能，那就是如果通过构造函数实例化一些对象后，再给构造函数的原型对象增加属性和方法，那么它原来实例化的对象实例将会继承这些增加的属性和方法。

--------------------------------------------------------------------
new在java、c++中是关键字，javascript中的new则完全不同，它看似和function()绑定在一起。
--------------------------------------------------------------------
函数和方法在javascript中是数据！
--------------------------------------------------------------------
js中类属性的概念很像static关键字（java），类属性只有一个（实例属性可以因为创建了N个对象实例而又N个）；js中类方法就如同static方法（java），因为它是与类关联在一起的，所以this操作符对它来讲毫无意义！

评论

1 楼 joshokn 2006-10-26  

时至今日，才明白this的用处，感叹感叹！
java中的类中方法是可以很自然的去操作类中的属性的；可是在js中是要引用this的！（看了那么多文章，方到用时才明白其意，惭愧惭愧）