实现js继承的几种方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        // ------------------------继承的第一种方式:对象冒充-----------------------------
        function Parent(name) {
            this.name = name;
            this.showInfo = function () {
                document.write(name);
                document.write("</br>");
            }
        }

        function Children(name, pwd) {
            //下面三行代码实现了子对象和父对象指向同一个引用
            //关键的代码
            this.method = Parent;
            this.method(name);
            delete this.method;

            this.pwd = pwd;
            this.showMsg = function () {
                document.write(this.pwd);
                document.write("</br>");
            }
        }

        var parent = new Parent("John");
        var child = new Children("Bob", 123);

        parent.showInfo();
        child.showInfo();
        child.showMsg();

        document.write("");
        document.write("</br>");

        //call方法,是function里的一个方法。
        //------------------------call方法简单示例-------------------------------
        function test(str) {
            document.write(this.name + "," + str+"</br>");
        }

        var person = new Object();
        person.name = "anllin";

        //相当于调用了test方法
        test.call(person, "welcome"); //将person赋给了test里的this。

        document.write("");
        document.write("</br>");

        //--------------------继承的第二种方式,call方法------------------------------
        function Father(name) {
            this.name = name;
            this.showName = function () {
                document.write(this.name + "</br>");
            }
        }

        function Sub(name, pwd) {
            //关键的代码
            Father.call(this, name);

            this.pwd = pwd;
            this.showPwd = function () {
                document.write(this.pwd + "<br>");
            }
        }

        var father = new Father("Father");
        var sub = new Sub("Sub", 123456);
        father.showName();
        sub.showName();
        sub.showPwd();

        document.write("");
        document.write("</br>");


        //--------------------继承的第三种方式,apply方法------------------------------
        function Mother(name) {
            this.name = name;
            this.showName = function () {
                document.write(this.name + "</br>");
            }
        }

        function Daugther(name, pwd) {
            //关键的代码
            Mother.apply(this, new Array(name));

            this.pwd = pwd;
            this.showPwd = function () {
                document.write(this.pwd + "<br>");
            }
        }

        var mother = new Father("Mother");
        var daugther = new Sub("Daugther", 654321);
        mother.showName();
        daugther.showName();
        daugther.showPwd();

        document.write("");
        document.write("</br>");

        //--------------------继承的第四种方式,prototype chain方式------------------------------
        //缺点:无法给构造函数传参数。
        function Human(){ }

        Human.prototype.name = "human";
        Human.prototype.showName = function () {
            document.write(this.name+"<br>");
        }

        function Student() { }

        //关键的代码
        Student.prototype = new Human();

        Student.prototype.password = 456789;
        Student.prototype.showPwd = function () {
            document.write(this.password + "<br>");
        }

        var human = new Human();
        var student = new Student();
        student.name = "student";
        human.showName();
        student.showName();
        student.showPwd();

        document.write("");
        document.write("</br>");

        //--------------------继承的第五种方式,混合方式------------------------------

        function FatherClass(name) {
            this.name = name;
        }

        FatherClass.prototype.showName = function () {
            document.write(this.name + "<br>");
        }

        function SubClass(name, pwd) {
            //关键的代码
            FatherClass.call(this,name);
            this.pwd = pwd;
        }

        //关键的代码
        SubClass.prototype = new FatherClass;

        SubClass.prototype.showPwd = function () {
            document.write(this.pwd + "<br>");
        }

        var f = new FatherClass("FatherClass");
        var s = new SubClass("SubClass", 45678);
        f.showName();
        s.showName();
        s.showPwd();

    </script>
</body>
</html>

posted @ 2011-03-27 14:32  山之松  阅读(193)  评论(0编辑  收藏  举报