博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript 构造函数的继承
阅读量:7028 次
发布时间:2019-06-28

本文共 2642 字,大约阅读时间需要 8 分钟。

hot3.png

对象间的“继承”五种方法:

一、构造函数绑定

    最简单的方法,使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:

     范例:

        function Animal() {

            this.species = "动物";

        }

        function Cat(_name, _color) {

            Animal.apply(this, arguments);

            this.name = _name;

            this.color = _color;

        }

        var cat = new Cat("Andy", "White");

        console.log(cat.species); // 动物

二、prototype模式

    使得Cat的prototype对象,指向一个Animal实例,那么所有Cat的实例,就能继承Animal

    范例:

        Cat.prototype = new Animal();

        Cat.prototype.constructor = Cat;

        var cat = new Cat("Andy", "Black");

         console.log(cat.species);

     说明:

        代码第一行(Cat.prototype = new Animal()),将Cat的prototype对象指向一个Animal实例; 它相当于完全删除了原prototype对象的引用值,然后赋予一个新值

        代码第二行(Cat.prototype.constructor = Cat):任何一个prototype对象都有一个constructor属性,指向它的构造函数。如果没有第一行代码(Cat.prototype = new Animal()),Cat.prototype.constructor 是指向Cat的;加入这一行后,Cat.prototype.constructor指向Animal;

        更重要的是,每一个对象实例也有一个constructor属性,默认指向prototype对象的constructor属性

            altert(cat.constructor == Cat.prototype.constructor) // true

三、直接继承prototype

    对prototype模式的改进;由于Animal对象中,不变的属性都直接写入Animal.prototype对象中,所以,可以让Cat()调岗Animal(),直接继承Animal.prototype对象

    范例:

        function Animal() {};

        Animal.prototype.species = "动物";

        //将Cat的prototype对象,指向Animal的prototype对象,就完成继承工作

        Cat.prototype = Animal.prototype;

        Cat.prototype.constructor = Cat; //修改了对象的prototype引用,prototype对象的constructor属性也必须修正

    缺点:

        Cat.prototype和Animal.prototype都指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype

        代码:Cat.prototype.constructor = Cat,这一句实际上把Animal.prototype对象的constructor属性也改掉了

            console.log(Animal.prototype.constructor); // Cat

四、利用空对象作为中介

    范例:

        var F= function() {};

        F.prototype = Animal.prototype;

        Cat.prototype = new F();

        Cat.prototype.constructor = Cat;

    解释:

        F 是空对象,所以 几乎不占内存;此时,修改Cat的prototype对象,不会影响到Animal的prototype对象

        console.log(Animal.prototype.constructor); // Animal

      再次将上述进行封装:

            function extend(childObj, parentObj) {

                var F = function() {};

                F.prototype = parentObj.prototype;

                childObj.prototype = new F();

                childObj.prototype.constructor = childObj;

                childObj.uber = parentObj.prototype;

            }                

        注:extend()方法,就是YUI库如何实现继承的方法

    使用:

        extend(Cat, Animal);

        var cat = new Cat("Andy", "Black");

        console.log(cat.species); //动物

    另外,函数体最后一行说明(childObj.uber = parentObj.prototype), 意思是为子对象设置一个uber属性,此属性直接指向父对象的prototype对象(uber, 德语词,意思是“向上”、“上一层”),放在此处,只是为了实现继承的完备性,纯属备用性质

五、拷贝继承

    介绍:把父对象的所有属性和方法,拷贝进子对象,从而实现拷贝进程

    实现:

        首先:把Animal所有不变的属性,放到prototype对象上

            function Animal() {};

            Animal.prototype.species = "动物";

        再者,编写新函数,实现属性拷贝目的

            function extend(Child, Parent) {

                var p = Parent.prototype;    

                var c = Child.prototype;

                for (var index in p) {

                    c[index] = p[index];

                }

                c.uber = p;

            }

        使用:

            extend(Cat, Animal);

            var cat = new Cat("Andy", "Black");

            console.log(cat.species); // 动物

                

转载于:https://my.oschina.net/u/1251536/blog/413488

你可能感兴趣的文章
rbac models
查看>>
[2615]传纸条 sdutOJ
查看>>
类图标注的使用范例
查看>>
NumberFormat注解 DateTimeFormat
查看>>
[转载]PV操作简单理解
查看>>
Acm Dima and Lisa的题解
查看>>
深入浅出Tomcat系列
查看>>
从网页提取的关键字
查看>>
位运算符
查看>>
PHP str_replace() 和str_ireplace()函数
查看>>
什么是全栈工程师
查看>>
Html5新特性
查看>>
linux下简易端口扫描器
查看>>
HDU 1205
查看>>
Openstack-L 路由注入方式
查看>>
利用ROS工具从bag文件中提取图片
查看>>
Java常用类库
查看>>
Android开发之Activity转场动画
查看>>
List集合三种遍历方法
查看>>
【译】OpenDaylight控制器:YANG Schema和Model
查看>>