javascript继承系列详解

参考文章：http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html

新建一个Asp.net项目，在Script下添加两个*.js文件,如下图：

 

（1）JavaScriptDemo.js文件代码：

//原型（prototype），我们可以简单的把prototype看做是一个模版，新创建的自定义对象都是这个模版（prototype）的一个拷贝 （实际上不是拷贝而是链接，只不过这种链接是不可见，给人们的感觉好像是拷贝）。 
// 构造函数 
function Person(name, sex) {
    this.name = name;
    this.sex = sex;
}
// 定义Person的原型，原型中的属性可以被自定义对象引用 
Person.prototype={
getName:function(){return this.name;},
getSex:function(){return this.sex;}
}

//当代码var zhang = new Person("ZhangSan", "man")执行时，其实内部做了如下几件事情：
//•创建一个空白对象（new Object()）。
//•拷贝Person.prototype中的属性（键值对）到这个空对象中（我们前面提到，内部实现时不是拷贝而是一个隐藏的链接）。
//•将这个对象通过this关键字传递到构造函数中并执行构造函数。
//•将这个对象赋值给变量zhang。
var zhang = new Person("ZhangSan", "man");

function Employee(name, sex, employeeID) {
    this.name = name;
    this.sex = sex;
    this.employeeID = employeeID;
}
Employee.prototype = new Person();
//修正constructor的指向错误 
Employee.prototype.constructor = Employee;
Employee.prototype.getEmployeeID = function () { return this.employeeID; };
var chen = new Employee("ChenJunto", "man", "1234");

（2）jClassDemo.js文件代码：

// 当前是否处于创建类的阶段
var initializing = false;
function jClass(baseClass, prop) {
    // 只接受一个参数的情况 - jClass(prop)
    if (typeof (baseClass) === "object") {
        prop = baseClass;
        baseClass = null;
    }
    // 本次调用所创建的类（构造函数）
    function F() {
        // 如果当前处于实例化类的阶段，则调用init原型函数
        if (!initializing) {
            // 如果父类存在，则实例对象的baseprototype指向父类的原型
            // 这就提供了在实例对象中调用父类方法的途径
            if (baseClass) {
                this.baseprototype = baseClass.prototype;
            }
            this.init.apply(this, arguments);
        }
    }
    // 如果此类需要从其它类扩展
    if (baseClass) {
        initializing = true;
        F.prototype = new baseClass();
        F.prototype.constructor = F;
        initializing = false;
    }
    // 覆盖父类的同名函数
    for (var name in prop) {
        if (prop.hasOwnProperty(name)) {
            // 如果此类继承自父类baseClass并且父类原型中存在同名函数name
            if (baseClass &&
typeof (prop[name]) === "function" &&
typeof (F.prototype[name]) === "function") {

                // 重定义函数name - 
                // 首先在函数上下文设置this.base指向父类原型中的同名函数
                // 然后调用函数prop[name]，返回函数结果

                // 注意：这里的自执行函数创建了一个上下文，这个上下文返回另一个函数，
                // 此函数中可以应用此上下文中的变量，这就是闭包（Closure）。
                // 这是JavaScript框架开发中常用的技巧。
                F.prototype[name] = (function (name, fn) {
                    return function () {
                        this.base = baseClass.prototype[name];
                        return fn.apply(this, arguments);
                    };
                })(name, prop[name]);

            } else {
                F.prototype[name] = prop[name];
            }
        }
    }
    return F;
};



//调用
//创建类与子类以及调用方式都显得非常优雅
var Person = jClass({
    init: function (name) {
        this.name = name;
    },
    getName: function () {
        return this.name;
    }
});
var Employee = jClass(Person, {
    init: function (name, employeeID) {
        this.base(name);
        this.employeeID = employeeID;
    },
    getEmployeeID: function () {
        return this.employeeID;
    },
    getName: function () {
        return "Employee name: " + this.base();
    }
});

var zhangJSClassDemo = new Employee("ZhangSan", "1234");

(3)Default.aspx页面中对*.js代码的调用

<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="JavaScriptDemo._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script src="Scripts/JavaScriptDemo.js" type="text/javascript"></script> 
    <script src="Scripts/jClassDemo.js" type="text/javascript"></script>
    <h2>
        欢迎使用 ASP.NET!
    </h2>
    <p>
        若要了解关于 ASP.NET 的详细信息，请访问 <a href="http://www.asp.net/cn" title="ASP.NET 网站">www.asp.net/cn</a>。
     
        <input id="Button1" type="button" value="button" onclick="alert(zhang.name)"/>
        <input id="Button2" type="button" value="button2" onclick="alert(zhang.getName())"/>
        <input id="Button3" type="button" value="button3" onclick="alert(chen.getEmployeeID())"/>
        <input id="Button4" type="button" value="button3" onclick="alert(zhangJSClassDemo.getEmployeeID())"/>
        </p>
    <p>
        您还可以找到 <a href="http://go.microsoft.com/fwlink/?LinkID=152368"
            title="MSDN ASP.NET 文档">MSDN 上有关 ASP.NET 的文档</a>。
    </p>
</asp:Content>

代码下载