关于JavaScript继承和prototype的一点体会(一)

JavaScript中的prototype很容易使初学者迷惑不解，我也刚开始学习这门语言，写了一小段代码帮助理解。(千言万语，尽在注释中:)

　　1、首先是一个简单的函数来判断是否是JavaScript中的对象。JavaScript中的数据类型分为原始类型和对象类型(包括函数)。

function isObject(object) {

    //注意，undefined == null，过滤掉null和undefined
    if(object == null) throw TypeError();

    //object的类型，过滤掉原始类型如数字，字符串和布尔值
    var type = typeof object;

    if(type !== "object" && type !== "function") throw TypeError();

    //object是一个对象
    return true;
}

 

　　2、实现一个继承方法，返回一个子对象。

function inherit(Base) {

    //Base是一个对象
    if(isObject(Base)) {

        //Object.create是ES5提出的一种新的对象创建方式，如果存在此方法，则直接返回结果。
        if(Object.create)
            return Object.create(Base);

        //一个空构造函数，用于构造Sub对象
        function Sub() {}

        //将Sub的prototype属性设置为Base，每一个JavaScript的都有这个属性
        //Sub便"拥有"Base中的属性和方法，如果Sub还有它的自对象，那属于Sub以
        //及Sub父对象的属性和方法也被继承下来，这就是原型链(prototype chain)
        Sub.prototype = Base;

        //返回一个Base的子对象，即Sub
        return new Sub();
    }

}

　　3，Eva继承自Person，其中我们通过Eva.name="Eva"给她重新取了个名字，此时程序将打印"Hello, Eva"。（Person.greeting = ...此时写在Person对象里面和外面并无区别，一会在讨论对象的大小时会谈到。）

/**
 * Person是一个对象字面量,定义了属性name和方法greeting;
 * @type {{name: string, greeting}}
 */
var Person = {name:"cnblogs"};

Person.greeting = function() {
    console.log("Hello, " + this.name);
};

//Eva继承自Person对象,它将Person的属性和方法都继承过来
var Eva = inherit(Person);

//name继承自Person，将Eva的名字重写为"Eva"
Eva.name = "Eva";

//greeting继承自Person
Eva.greeting();

　　4、更常用和高效的一种方式，此时程序将打印"Hello, John"。

/**
 * 通过定义构造器来创建Person2类对象，定义了属性name和原型方法greeting;
 * 
 * @param name
 * @constructor
 */
var Person2 = function(name) {
    this.name = name;
};

//"动态"给Person2添加一个greeting方法，此方法并不真正属于Person2，而
//属于Person2.prototype,这样就实现了给Person2及其子类对象添加方法，但
//并不占用多的内存空间。
Person2.prototype.greeting = function() {
    console.log("Hello, " + this.name);
};

var John = inherit(new Person2("John"));

John.greeting();

　　5、此时，如果我们有一个返回对象大小的函数，我们就更能明白prototype在实现继承时是怎么一回事了。

/**
 * 返回一个对象的大小（在这里是一个对象真正占有的属性和方法的个数）
 * @param object
 * @returns {number}
 */
function objectSize(object) {

    var size = 0;

    //这里直接使用了Object的hasOwnProperty方法(注意Object是大写)
    //Object.prototype.hasOwnProperty = function(propertyName) {};
    var hasOwnProperty = Object.prototype.hasOwnProperty;

    //循环遍历object中的所有能"访问"的属性和方法
    //注意能"访问"并不等于拥有
    for(var key in object) {

        //将hasOwnProperty函数绑定到object(this)上进行调用
        //Function.prototype.call = function(thisArg,args) {};
        if(hasOwnProperty.call(object, key)) {

            size++;

        }
    }
    //返回真正属于object的属性和方法个数
    return size;
}

　　6、所以在实际编程中，往往只将属性写在对象内部，而使用prototype添加各种方法给本对象和子对象使用，但是这些方法在内存中只有一份!（是不是联想到静态成员函数？）

//继承(通过prototype添加)来的不属于我！！

//程序将打印"2",Person真正拥有name和greeting
console.log("Person size: " + objectSize(Person));

//程序将打印"1"，Eva真正拥有的是重写name属性，如果不重写，将打印"0"
console.log("Eva size: " + objectSize(Eva));

//程序将打印"1"，Person2真正拥有的只是name属性
console.log("Person2 size: " + objectSize(new Person2("John")));

//程序将打印"0"，John啥都没有，都是从"别人"借过来的
console.log("John size: " + objectSize(John));

 

　未完待续...