javascript 类, 对象 深入学习

1.关键词：类，对象；

javascript 中实际上没有严格的【类和对象】的概念，只是实现了相关效果，为了方便理解暂时

使用【类和对象】;

 

2.明确 类中的 【public/private变量】的使用范围，明确 类方法、对象方法的使用范围；

 

3. 区别 三种类型的错误(方法"未定义"，方法可调用但是返回值是"未定义")：

TypeError: undefined is not a function

Car.getCarName_3()},undefined

 

ReferenceError: carMadeIn is not defined

 

4.查看运行效果可下载附件代码，运行html文件在console窗口可见。

ps: Chrome, Firfox的控制台所显示的信息稍有不同。

 

构造函数：

/*
构造函数/类
*/
function Animal(pName) {

    // public, 公有变量,  可被[对象(实例)方法 -- this.xxxx()], [原型(prototype)方法]访问;
    // 也可以被对象直接访问[obj.name];
    this.name = pName || "defaultName";
    this.size = "middle";

    // private, 私有变量, only can be read by "this.xxxx()"
    var owner = "tom";

    // 对象(实例)方法, 只能被 对象(实例)调用;
    this.getName = function() {
        return "animalName";
    };

    this.getName_this_byObj = function() {
        return this.name;
    };

    this.getOwner_var_byObj = function() {
        // this.owner,
        // owner,
        return owner;
    };

    this.excuteSameNameFunc = function() {
        return "Hello, this is <this.excuteSameNameFunc>";
    };

};

// 原型(prototype)方法, 只能被 对象(实例)调用;
Animal.prototype.getColor = function() {
    return "Yellow";
};

Animal.prototype.getName_this_prototype_byObj = function() {
    return this.name;
};

Animal.prototype.getOwner_var_prototype_byObj = function() {
    return owner;
};

Animal.prototype.excuteSameNameFunc = function() {
    return "Hello, this is<prototype-excuteSameNameFunc>";
};

// 只能被 对象(实例)调用;
Animal.prototype.bodyHeight = "50cm";

// 类(class)方法, 只能被 类 调用;[又称:静态方法]
Animal.getAge = function() {
    return "3";
};

Animal.getSize_this_ByClass = function() {
    return this.size;
};

Animal.getOwner_var_ByClass = function() {
    // owner -> e:ReferenceError: owner is not defined
    // this.owner -> undefined
    return owner;
};

 

测试分支：

testOOP : function(orderNo, obj) {

        var key = "";
        var val = "";

        try {

            key = (orderNo + ":" + key);

            switch (orderNo) {

            case 1:
                utilTemp.log("--- >>> 调用方式：[类名.方法()]", [ 'font-size:25px',
                        'line-height:28px', 'color: skyblue' ].join(';'));

                key = key + "this.getName()--[Animal.getName()]:";
                val = Animal.getName();
                // utilTemp.log(key + Animal.getName());
                break;

            case 2:
                key = key + "Animal.prototype.getColor()--[Animal.getColor()]:";
                val = Animal.getColor();
                // utilTemp.log(key + Animal.getColor());
                break;

            case 3:
                key = key + "Animal.getAge()--[Animal.getAge()]:";
                val = Animal.getAge();
                // utilTemp.log("key:" + key + Animal.getAge());
                break;

            case 4:
                utilTemp.log("--- >>> 调用方式：[实例对象.方法()]", [ 'font-size:25px',
                        'line-height:28px', 'color: skyblue' ].join(';'));

                key = key + "this.getName()--[obj.getName()]:";
                val = obj.getName();
                // utilTemp.log(key + obj.getName());
                break;

            case 5:
                key = key + "Animal.prototype.getColor()--[obj.getColor()]:";
                val = obj.getColor();
                // utilTemp.log(key + obj.getColor());
                break;

            case 6:
                key = key + "Animal.getAge()--[obj.getAge()]:";
                val = obj.getAge();
                // utilTemp.log(key + obj.getAge());
                break;

            case 7:
                utilTemp.log("--- >>> 利用可调用/合法 的方法，访问属性: this/var;",
                        [ 'font-size:25px', 'line-height:28px',
                                'color: skyblue' ].join(';'));

                key = key
                        + "{this.size--Animal.getSize_this_ByClass()}---[Animal.getSize_this_ByClass()]:";
                val = Animal.getSize_this_ByClass();
                break;

            case 8:
                key = key
                        + "{var owner--Animal.getOwner_var_ByClass()}---[Animal.getOwner_var_ByClass()]:";
                val = Animal.getOwner_var_ByClass();
                break;

            case 9:
                key = key
                        + "{this.name--this.getName_this_byObj()}---[obj.getName_this_byObj()]:";
                val = obj.getName_this_byObj();
                break;

            case 10:
                key = key
                        + "{var owner--[this.getOwner_var_byObj()}---[obj.getOwner_var_byObj()]:";
                val = obj.getOwner_var_byObj();
                break;

            case 11:
                key = key
                        + "{this.name--[Animal.prototype.getName_this_prototype_byObj()}"
                        + "---[obj.getName_this_prototype_byObj()]:";
                val = obj.getName_this_prototype_byObj();
                break;

            case 12:
                key = key
                        + "{var owner--[Animal.prototype.getOwner_var_prototype_byObj()}"
                        + "---[obj.getOwner_var_prototype_byObj()]:";
                val = obj.getOwner_var_prototype_byObj();
                break;

            case 13:
                utilTemp.log("--- >>> 对象调用同名方法之 优先级( this.function() );",
                        [ 'font-size:25px', 'line-height:28px',
                                'color: skyblue' ].join(';'));

                key = key
                        + "{[Animal.prototype.excuteSameNameFunc() / this.excuteSameNameFunc()}"
                        + "---[obj.excuteSameNameFunc()]:";
                val = obj.excuteSameNameFunc();

                break;

            case 14:
                utilTemp.log("--- >>> 类/对象(实例) 直接访问属性", [ 'font-size:25px',
                        'line-height:28px', 'color: skyblue' ].join(';'));

                key = key + "{this.size}--[Animal.size]:";
                val = Animal.size;
                break;

            case 15:
                key = key + "{this.size}--[obj.size]:";
                val = obj.size;
                break;

            case 16:
                key = key + "{var owner}--[Animal.owner]:";
                val = Animal.owner;
                break;

            case 17:
                key = key + "{var owner}--[obj.owner]:";
                val = obj.owner;
                break;

            case 18:
                key = key
                        + "{Animal.prototype.bodyHeight}--[Animal.bodyHeight]:";
                val = Animal.bodyHeight;
                break;

            case 19:
                key = key + "{Animal.prototype.bodyHeight}--[obj.bodyHeight]:";
                val = obj.bodyHeight;
                break;

            case 20:
                break;

            default:
                // nothing!

            }

            utilTemp.log(key + val);

        } catch (e) {
            utilTemp.error(key + ">>>e:" + e);
        }

    },

 

测试入口：

    testMain : function() {

        var two = new Animal("Kitty");
        for ( var i = 1; i <= 20; i++) {
            utilTemp.testOOP(i, two);
        }
    },

 

测试截图：

 

 

结论：

额，一目了然。

xxx方法可以正常使用、xxx属性可以正常访问。。。