JavaScript對象繼承的實現

來源:互聯網
上載者:User

1.綜合對象冒充(屬性)、原型鏈繼承(對象)方法:

function ClassA(sColor){
   this.color = sColor;
}

ClassA.prototype.sayColor = function(){
   alert(this.color);
};


function ClassB(sColor, sName){
   ClassA.call(this, sColor);  
   this.name = sName;


ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function(){
   alert(this.name);
}

//測試:
var b = new ClassB("red", "sangKaNa");
b.sayColor();
b.sayName();

2.調用zInherit庫繼承:

引用zinherit.js檔案,這裡列出檔案源碼:

Object.prototype.inheritFrom = function (fnClass) {

    function inheritClasses(fnClass, arrClasses) {
        
        arrClasses.push(fnClass);

        if (typeof fnClass.__superclasses__ == "object") {
            for (var i=0; i < fnClass.__superclasses__.length; i++){
                inheritClasses(fnClass.__superclasses__[i], arrClasses);
            }
        }
    }
    
    if (typeof this.constructor.__superclasses__ == "undefined") {
        this.constructor.__superclasses__ = new Array();
    }
    
    inheritClasses(fnClass, this.constructor.__superclasses__);
    
    for (prop in fnClass.prototype) {
        if (typeof fnClass.prototype[prop] == "function") {
            this[prop] = fnClass.prototype[prop];
        }
    }
};

Object.prototype.instanceOf = function (func) {

    if (this.constructor == func) {
        return true;
    } else if (typeof this.constructor.__superclasses__ == "object") {
        for (var i=0; i < this.constructor.__superclasses__.length; i++) {
            if (this.constructor.__superclasses__[i] == func) {
                return true;
            }
        }
        return false;
    } else {
        return false;
    }
};

應用:

function ClassX() {
    this.messageX = "This is the X message.";

    if (typeof ClassX._initialized == "undefined") {
        
        ClassX.prototype.sayMessageX = function () {
            alert(this.messageX);
        };

        ClassX._initialized = true;
    }
}

function ClassY() {
    this.messageY = "This is the Y message.";

    if (typeof ClassY._initialized == "undefined") {
        
        ClassY.prototype.sayMessageY = function () {
            alert(this.messageY);
        };

        ClassY._initialized = true;
    }
}

function ClassZ() {
    ClassX.apply(this);
    ClassY.apply(this);
    this.messageZ = "This is the Z message.";

    if (typeof ClassZ._initialized == "undefined") {
        
        ClassZ.prototype.inheritFrom(ClassX);
        ClassZ.prototype.inheritFrom(ClassY);

        ClassZ.prototype.sayMessageZ = function () {
            alert(this.messageZ);
        };

        ClassZ._initialized = true;
    }
}

測試:

var objZ = new ClassZ();
objZ.sayMessageX();
objZ.sayMessageY();
objZ.sayMessageZ();

3.應用xbObjects庫:

<script type="text/javascript" src="xbObjects.js"></script>
<script type="text/javascript">

_classes.registerClass("Polygon");

function Polygon(iSides) {
    
    _classes.defineClass("Polygon", prototypeFunction);

    this.init(iSides);
    
    function prototypeFunction() {
    
        Polygon.prototype.init = function(iSides) {
            this.parentMethod("init");
            this.sides = iSides;            
        };
    
        Polygon.prototype.getArea = function () {
            return 0;
        };    
    
    }
}

_classes.registerClass("Triangle", "Polygon");

function Triangle(iBase, iHeight) {

    _classes.defineClass("Triangle", prototypeFunction);
    
    this.init(iBase,iHeight);
    
    function prototypeFunction() {
        Triangle.prototype.init = function(iBase, iHeight) {
            this.parentMethod("init", 3);
            this.base = iBase;
            this.height = iHeight;
        };
        
        Triangle.prototype.getArea = function () {
            return 0.5 * this.base * this.height;
        };    
    }
    
}

_classes.registerClass("Rectangle", "Polygon");

function Rectangle(iLength, iWidth) {

    _classes.defineClass("Rectangle", prototypeFunction);
    
    this.init(iLength, iWidth);
    
    function prototypeFunction() {
        Rectangle.prototype.init = function(iLength, iWidth) {
            this.parentMethod("init", 4);
            this.length = iLength;
            this.width = iWidth;
        }
    
       Rectangle.prototype.getArea = function () {
            return this.length * this.width;
       };    
        
    }
}

var triangle = new Triangle(12, 4);
var rectangle = new Rectangle(22, 10);

alert(triangle.sides);
alert(triangle.getArea());

alert(rectangle.sides);
alert(rectangle.getArea());

</script>

說明:

1.zInherit庫:http://www.nczonline.net/downloads

2.xbObjects庫:http://archive.bclary.com/xbProjects-docs/xbObject/

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.