js继承的几种实现方法

2015年08月21日 javascript 暂无评论 阅读 32 views 次
<!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>

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: