当前位置: 首页 > 图文教程 > 网络编程 > Javascript > OOP In JS [JS脚本中的面向对象]

Javascript
玩透弹出窗口
几个常用的日期函数
简单的脚本帮你编排JScript程序中的缩进
得到 words.js?hello,world! 参数的处理方法
如何在javascript中传值
可输入的select
IE支持的HTML元素的DISABLE属性在NETSCAPE4.76中的实现
利用xml数据岛实现多级关联下拉选择框的做法
利用Wipe等ActiveX技术,实现n(n>>2)幅图片轮换擦洗显示
Javascript技术实现真正的网上试听
JavaScript实现在线编辑表格
根据客户端的分辨率不同而重定向到不同网页的脚本
几种不刷新页面取数据的方法
web进度条
随手写的一个动态添加删除行的HTC行为组件
农历与阳历的对照
关于在页面中解决打印的几个问题
"打开,另存为,属性,打印"等14个JS代码
无提示框关闭IE窗口
实现上传(增删)多个文件的客户端写法。

Javascript 中的 OOP In JS [JS脚本中的面向对象]


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 103 ::
收藏到网摘: n/a

目标
让我们轻松的实现Javascript的面向对象

我们将了解在JS中如何去创建类和模块。


通过prototype来继承.


假设有两个类: "Animal" and "Dog", Dog 从 Animal 继承过来.
Animal 类如下:

//constructor of Animal
var Animal = function(){

}
//eat method of Animal
Animal.prototype.eat = function(food){
    //process the food here
}

创建实例并使用其方法:

//create an Animal object
myAnimal = new Animal();
//let the animal eat
myAnimal.eat("yummy food");


Dog 类看起来也非常相似。
我们仅仅来通知 Dog 它是继承于 Animal 就可以了:

//constructor for Dog
var Dog = function(){

}
//"inheriting" from Animal
Dog.prototype = new Animal();
//resetting the constructor to Dog
Dog.prototype.constructor = Dog;

//bark method of Dog
Dog.prototype.bark = function(){
    //make some noise
}

现在我们来创建一个 Dog 类,它具有 bark 和 eat 方法:

//create a new Dog object
var myDog = new Dog();
//let it bark
myDog.bark();
//throw it a bone
myDog.eat("yummy bone");


可以看出 Dog 继承了 Aninal 类的 "eat" 方法.
Let us assume the dog needs to first pre process the food(chew the bone) and then have it processed by the super class Animal.
We simply overwrite the "eat" method and call the super class' "eat" method.

Dog.prototype.eat = function(food){
    //preprocess the food here
    
    //call the super class' eat method with the dog as the this object
    Animal.prototype.eat.call(this, food);
}

Now we have a dog how chews the bone:


//创建一个新的Dog对象
var myDog = new Dog();
//使用eat方法
myDog.eat("yummy bone");


让它更加简单.
As you have noticed above there is a lot of typing involved in setting up a subclass:

写一个构造器
追加它的属性或方法
在继承过来的新类中重载它的属性或方法.
Every time the class is used for prototyping its constructor is called.
但这也可能不是我们想要的效果.

让我们来简化这个新类.
做到让 Cat 类像如下所示:

//从Animal中扩展出一个新类 "Cat".
var Cat=Class("Cat", Animal, function(thisClass, Super){
    //called when Cat is being instaciated
    thisClass.prototype.init = function(){
        //在这里初始化
        alert("Cat.prototype.init()")
    }
    
    thisClass.prototype.eat = function(food){
        //处理如何消化食物
    }
})

这样一来 Cat类就可以像其他普通类一样的使用了.


Class function
The Class function:
设计一个普通的类构造器
继承于父级类;
it's property className is set;
a default toString method is created for convinience;
and the classScope function is run with the class and the super class as parameters.
When an object is created from the new class the init method is called with all parameters passed to the constructor.
When a prototype for subclassing is created from a class, the init method is not called.
This makes init act just like any other constructor function in JavaScript.


//create a new class. The init method of cat should not be called.
var GreenCat = Class("GreenCat", Cat,  function(){});
alert("GreenCat created\nCat.prototype.init() was not called.");
//create an object of GreenCat
var myGreenCat = new GreenCat();
alert("myGreenCat created.");


数据隐藏
If you take a closer look at the Cat above you notice, that there is a function being passed to Class.
All variables declared with var withing this function are private to this function.
We can now create a class which can use some semi private objects only visible to the class itself.

var SomeClass=Class("SomeClass", function(thisClass, Super){
    
    //function only visible within this class
    var someFunction = function(x){
        return 2 * x;
    }
    
    //a method which calls the "private" function
    thisClass.prototype.someMethod=function(arg){
        return someFunction(arg);
    }
})
使用方式如下:
//create an object of SomeClass
var obj = new SomeClass();
//try the method the return value should be 6
alert(obj.someMethod(3))


同样的方法可以用来创建拥有子类、函数和其他方法属性的输出类和模块.