美文网首页前端知识@IT·互联网WEB前端程序开发
JavaScript——实现对象继承的五种方式(对象冒充 cal

JavaScript——实现对象继承的五种方式(对象冒充 cal

作者: 扒块腹肌 | 来源:发表于2017-02-08 22:51 被阅读144次
    • 首先明确this在javascript当中的指的是调用者,在java中指的是当前对象,这两者有本质区别的
    • JavaScript中没有类的概念,继承描述对象之间的关系,继承关键在于子类获取父类的成员及方法的方式

    1. 对象冒充

            function Parent(name)
            {
                this.name = name;
                this.sayHello = function()
                {
                    alert(this.name)
                }
            }
    
            function Child(name, age)
            {
                //3行关键代码 此三行用于获取父类的成员及方法
                //用子类的this去冒充父类的this,实现继承
                //父类Parent中的this.name、sayHello,分别成为了子类的成员、子类的方法
                this.method = Parent;
                //接收子类的参数 传给父类
                this.method(name);
                //删除父类
                delete this.method;
                
                //此后的this均指子类
                this.age = age;
                this.sayWorld = function()
                {
                    alert(age);
                }
            }
            var parent = new Parent("张三");
            var child = new Child("李四", 20);
    
            parent.sayHello();
            child.sayHello();
            child.sayWorld();
    

    2. call 方法方式

    //call 方法是 Function 对象中的方法,因此我们定义的每个函数都拥有该方法。
    //可以通过函数名来调用call 方法,call 方法的第一个参数会 被传递给函数中的this,
    //从第 2 个参数开始,逐一赋值给函数中的参数
    
    //call方法的使用
    function test(str, str2)
    {
        alert(this.name + ", " + str + ", " + str2);
    }
    
    var object = new Object();
    object.name = "zhangsan";
    
    //test.call相当于调用了test函数
    //将object赋给了this
    test.call(object, "JavaScript", "hello"); 
    
    
    //call方法实现继承
     function Parent(name)
        {
            this.name = name;
            this.sayHello = function()
            {
                alert(name);
            }
        }
    
        function Child(name, age)
        {
    //子类的this传给父类
            Parent.call(this, name);
            this.age = age;
            this.sayWorld = function()
            {
                alert(age);
            }
        }
    
        var parent = new Parent("张三");
        var child = new Child("李四", 20);
    
        parent.sayHello();
        child.sayHello();
        child.sayWorld();
    
    

    3. apply方法方式

    //call 和 apply 都是为了改变某个函数运行时的 context (上下文)而存在的,
    //是为了改变函数体内部 this 的指向,劫持其他对象的方法
    //call 和 apply二者的作用完全一样,只是接受参数的方式不太一样,apply第二个参数是一个参数列表
            function Parent(name)
            {
                this.name = name;
                this.sayHello = function()
                {
                    alert(name);
                }
            }
    
            function Child(name, age)
            {
                Parent.apply(this, new Array(name));
    
                this.age = age;
    
                this.sayWorld = function()
                {
                    alert(age);
                }
            }
    
            var parent = new Parent("张三");
            var child = new Child("李四", 30);
    
            parent.sayHello();
            child.sayHello();
            child.sayWorld();
    
    

    4. 原型链方式(prototype chain )

    //无法给构造函数传参数
        function Parent()
        {
    
        }
    
        Parent.prototype.name = "张三";
        Parent.prototype.sayHello = function()
        {
            alert(this.name);
        }
    
        function Child()
        {
    
        }
        //子类的原型引用指向父类
        Child.prototype = new Parent();
        Child.prototype.age = 20;
    
        Child.prototype.sayWorld = function()
        {
            alert(this.age);
        }
            var child = new Child();
            child.sayHello();
            child.sayWorld();
    
    

    5. 混合方式(克服了原型琏的弊端)

    //将对象方法拿到对象的外面定义,封装对象属性
           function Parent(name)
           {
               this.name = name;
           }
            Parent.prototype.sayHello = function()
            {
                alert(this.name);
            }
    
            function Child(name, age)
            {//子类的this传给parent
                Parent.call(this, name);
                this.age = age;
            }
            //子类的原型引用指向父类对象
            Child.prototype = new Parent();
            Child.prototype.sayWorld = function()
            {
                alert(this.age);
            }
    
            var child = new Child("李四", 30);
            child.sayHello();
            child.sayWorld();
    
    

    相关文章

      网友评论

      • 萝卜luob:新语法class关键字方法?
      • 534761e3cc15:😱感觉自己是不是少上一节课,一点都看不懂(⊙_⊙)…

      本文标题:JavaScript——实现对象继承的五种方式(对象冒充 cal

      本文链接:https://www.haomeiwen.com/subject/qambittx.html