javascript中五种实现对象继承的方法

来源:互联网 发布:指纹锁品牌 三星 知乎 编辑:程序博客网 时间:2024/05/21 08:50
(1) 对象冒充
    <script type="text/javascript">

        //继承第一种方式:对象冒充
        function Parent(username) {
            this.username = username;
            this.sayHello = function() {
                alert(this.username);
            }
        }

        function Child(username, password) {
            //下面三行代码是最关键的代码
            this.method = Parent;
            this.method(username);
            delete this.method;

            this.password = password;

            this.sayWorld = function() {
                alert(this.password);
            }
        }
        var parent = new Parent("zhangsan");
        var child = new Child("lisi","1234");

        parent.sayHello();

        child.sayHello();
        child.sayWorld();
    </script>

(2) call方法方式
    call方法是Function对象中的方法,因此我们定义的每个函数都拥有该方法。可以通过函数名来调用call方法,
    call方法的第一个参数会被传递给函数中的this,从第二个参数开始,逐一赋值给函数中的参数。

    <script type="text/javascript">
        //继承的第二种实现方式,call方法方式,Function对象中的方法

        function test(str, str2) {
            alert(this.name + ", " + str + ", " + str2);
        }
        var object = new Object();
        object.name = "zhangsan";

        //this.call相当于调用了test函数
        test.call(object, "shengsiyuan", "hello");//将object赋给了this

    </script>

    <script type="text/javascript">
        //使用call方式实现对象的继承

        function Parent(username) {
            this.username = username;

            this.sayHello = function() {
                alert(this.username);
            }
        }

        function Child(username, password) {
            Parent.call(this,username);
            this.password = password;

            this.sayWorld = function() {
                alert(this.password);
            }
        }

        var parent = new Parent("zhangsan");

        var child = new Child("lisi","123");
        
        parent.sayHello();
        child.sayHello();
        child.sayWorld();
    </script>

(3) apply方法方式
    <script type="text/javascript">
        //使用apply方法实现对象继承

        function Parent(username) {
            this.username = username;
            this.sayHello = function() {
                alert(this.username);
            }
        }

        function Child(username, password) {
            Parent.apply(this, new Array(username));
            //和下面一样
            //Parent.apply(this, [username]);

            this.password = password;

            this.sayWorld = function() {
                alert(this.password);
            }
        }
        var parent = new Parent("zhangsan");
        var child = new Child("lisi", "123");
        
        parent.sayHello();
        child.sayHello();
        child.sayWorld();

    </script>

(4) 原型链方式
    <script type="text/javascript">

        //使用原型链(prototype chain)方式实现对象继承

        function Parent() {
        
        }

        Parent.prototype.hello = "hello";
        Parent.prototype.sayHello = function() {
            alert(this.hello);
        }

        function Child() {
        
        }
        Child.prototype = new Parent();
        Child.prototype.world = "world";
        Child.prototype.sayWorld = function() {
            alert(this.world);
        }
        var child = new Child();
        child.sayHello();
        child.sayWorld();
    </script>
(5) 混合方式(推荐使用)
    <script type="text/javascript">
        //使用混合方式实现对象的继承(推荐使用)

        function Parent(hello) {
            this.hello = hello;
        }

        Parent.prototype.sayHello = function() {
            alert(this.hello);
        }

        function Child(hello,world) {
            Parent.call(this, hello);
            this.world = world;
        }

        Child.prototype = new Parent();

        Child.prototype.sayWorld = function() {
            alert(this.world);
        }
        
        var child = new Child("hello", "world");
        child.sayHello();
        child.sayWorld();
    </script>
0 0
原创粉丝点击