js实现面向对象的继承和重载

继承

简述

继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。

实现代码

// 父类
var Point = {
    // 创建一个生产函数
    createNew: function() {
        // 声明对象
        var point = {};
        // 给对象添加属性
        point.x = 1;
        point.y = 2;
        return point;
    }
};

// 子类
var SubPoint = {
    createNew: function() {
        var point = {};
        // 调用父函数的生产函数
        point = Point.createNew();
        // 为生成的对象添加属性
        point.type = 3;
        return point;
    }
};

测试

代码

var a = SubPoint.createNew();
console.log(a.x);
console.log(a.y);
console.log(a.type);

运行结果

结果分析

能够打印出x和y属性，说明实现了继承。

重载

简述

重载，简单说，就是函数或者方法有相同的名称，但是参数列表不相同的情形，这样的同名不同参数的函数或者方法之间，互相称之为重载函数或者方法。

实现代码

// 方法一：通过参数的个数来确定执行的代码
createNew: function() {
    // 获取参数个数
    var len = arguments.length;
    var point = {};
    switch(len) {
        case 0:
            point = Point.createNew();
            point.type = 0;
            break;
        case 3:
            point = Point.createNew(arguments[0], arguments[1]);
            point.type = arguments[2];
            break;
    }
    return point;
}

// 方法二：根据参数类型判断执行的代码
createNew: function() {
    var point = {};
    if(typeof(arguments[1]) == "number") {
        // 这里接收的第一个参数为number类型，的调用情况
        point = Point.createNew(arguments[0], arguments[1]);
        point.type = null;
    } else {
        // 其他情况执行以下代码
        point = Point.createNew(arguments[0].x, arguments[0].y);
        point.type = arguments[1];
    }
    return point;
}

测试

测试代码

var Point = {
    createNew: function() {
        var len = arguments.length;
        var point = {};
        switch(len) {
            case 0:
                point.x = 0;
                point.y = 0;
                break;
            case 2:
                point.x = arguments[0];
                point.y = arguments[1];
                break;
        }
        return point;
    }
};

var APoint = {
    createNew: function() {
        var len = arguments.length;
        var point = {};
        switch(len) {
            case 0:
                point = Point.createNew();
                break;
            case 2:
                point = Point.createNew(arguments[0], arguments[1]);
                break;
        }
        return point;
    }
};

var BPoint = {
    createNew: function() {
        var point = {};
        if(typeof(arguments[1]) == "number") {
            point = Point.createNew(arguments[0], arguments[1]);
            point.type = 2;
        } else {
            point = Point.createNew(arguments[0], arguments[1]);
            point.type = 3;
        }
        return point;
    }
};

// 调用APoint中参数长度为0时执行的代码
var a1 = APoint.createNew();
console.log("a1的x、y值分别为：" + a1.x + "," + a1.y);
// 调用APoint中参数长度为2时执行的代码
var a2 = APoint.createNew(1, 2);
console.log("a2的x、y值分别为：" + a2.x + "," + a2.y);
// 调用BPoint中第一个参数类型为number时执行的代码
var b1 = BPoint.createNew(1, 2);
console.log("b1的x、y、type值分别为：" + b1.x + "," + b1.y + "," + b1.type);
// 调用BPoint中第一个参数类型不为number时执行的代码
var b2 = BPoint.createNew("1", "2");
console.log("b2的x、y、type值分别为：" + b2.x + "," + b2.y + "," + b2.type);

测试结果