木子屋
 

标题: Javascript模拟类的继承

作者: dnawo

日期: 2007-07-09 08:42 AM

分类: 脚本语言

内容: 虽然在Javascript中大量地使用了对象，但是它并没有正式类的概念，而是使用特有的原型对象为基础的继承机制模拟了经典的面向对象程序设计语言中的以类为基础的继承机制，并且做为非常出色。这种以原型对象为基础的继承机制直观的表示为：超类(Object) → 原型对象 → 子类(内部类和自定义类) → 类的实例(对象)，这看起来有些奇怪，但你必须接受这种继承机制。
Javascript中并没有明确提出一个类如何从另一个类中继承其属性和方法，但我们还是有办法模拟的：
复制内容到剪贴板 程序代码//在超类Object中定义继承的方法
//子类都将使用extends来说明它继承了谁
Object.prototype.extends = function(from_obj,to_obj){
    var temp;
    for(temp in from_obj){
        to_obj[temp] = from_obj[temp];
    }
}
//为Class类定义一个构造函数的方法
//这个构造函数也定义了类自身，同时还定义了一个空的原型对象
function Class(){
    this.x;//创建属性x但初始化，值为undefined
    this.y = "yy";//创建属性y并初始化
    this.add = function(){ return this.x + this.y;};//创建add方法
}
//为Class1类定义一个构造函数的方法
function Class1(){
    this.extends(new Class(),this);//继承Calss
    this.add = function(){ return this.x + this.z;};//覆盖了Class中的add方法
    this.z = "zz";//创建属性z并初始化
    this.minus = function(m,n){return m-n;};//创建minus方法
}
//为Class2类定义一个构造函数的方法
function Class2(a){
    this.extends(new Class1(),this);//继承Calss1
    //模拟Java一个类多个构造函数。如Array()、Array(3)、Array("aa","bb","cc")都可创建数组
    if(a==undefined){
        this.a = "aa";//创建属性z赋于默认值
    }else{
        this.a = a;//创建属性z并赋值
    }
}
下边使用构造函数创建上边类的实例：
复制内容到剪贴板 程序代码//使用构造函数创建Class类实例one
var one = new Class();
document.write(one.x + "<br/>" + one.y + "<br/>" + one.add() + "<br/><br/>");
//使用构造函数创建Class1类实例two
var two = new Class1();
two.x = "xx";
document.write(two.x + "<br/>" + two.y + "<br/>" + two.z + "<br/>" + two.add() + "<br/>" + two.minus(5,3) + "<br/><br/>");
//使用构造函数创建Class2类实例three
var three = new Class2();
three.x = "xx";
document.write(three.x + "<br/>" + three.y + "<br/>" + three.z + "<br/>" + three.a + "<br/>" + three.add() + "<br/>" + three.minus(5,3) + "<br/><br/>");
//使用构造函数创建Class2类实例four
var four = new Class2("mzwu");
four.x = "xx";
document.write(four.x + "<br/>" + four.y + "<br/>" + four.z + "<br/>" + four.a + "<br/>" + four.add() + "<br/>" + four.minus(5,3) + "<br/><br/>");
"构造函数定义了类自身，同时还定义了一个空的原型对象"，你可以运行下边的代码证明：
复制内容到剪贴板 程序代码Class2.prototype.constructor == Class2;//结果为true
var names = "";
for(var name in Class2.prototype) names += name;//结果只有extends

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

标题: Javascript模拟类的继承

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms