资讯专栏INFORMATION COLUMN

JavaScript构造函数继承

FrancisSoung / 1805人阅读

摘要:的继承分为构造函数的继承和非构造函数继承其中继承的还有,以下不支持。小黑黑色通过深拷贝针对对象数组和函数,浅拷贝只是引用,内存不变来继承深拷贝可以使用递归赋值小粉粉色

js的继承分为构造函数的继承和非构造函数继承;其中继承的还有call、apply、Object.create(),ie8以下不支持Object.create()。
子能访问父的公有属性和方法,父不能访问子的

首先开头讲讲prototype,__proto__,constructor的关系:
   1.prototype只有函数才有(包含__proto__,constructor)
   2.proto__(ie是没有这个属性的),constructor函数对象都有

1.call和apply继承

function Animal(){
            this.species = "动物";
            Animal.prototype.notice="i am parent";
        }
        function Dog(name,color){
            Animal.apply(this,arguments);
            this.name = name;
            this.color = color;
        }
        var dog1 = new Dog("小白","白色");
        console.log(dog1.species);
        

2.通过建立空的构造函数作为桥接实现继承

function extend1(p,s){
            function F(){};
            F.prototype = p.prototype;
            console.log(typeof F);//function
            var f = new F();
            console.log(typeof f);//object
            console.log(f.constructor);
            s.prototype = f; //此时s.prototype.constructor指向Anmial()构造函数,为了避免继承缭乱,所以要把s.prototype.constructor指回本身。
            s.prototype.constructor = s;
        }
        extend1(Animal,Dog);
        var dog2 = new Dog("小黑","黑色");
        console.log("dog2"+ dog2.notice);
        

3.通过深拷贝(针对对象、数组和函数,浅拷贝只是引用,内存不变)来继承
(深拷贝可以使用递归赋值、call、apply、$.extend(true,{},{}..))

 function extend2(p,s){
            var parent = p.prototype;
            var son = s.prototype;
            for(var i in parent){
                son[i] = parent[i];
            }
        }
        extend2(Animal,Dog);
        var dog3 = new Dog("小粉","粉色");
        console.log("dog3"+ dog3.notice);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84841.html

相关文章

  • 彻底搞懂JavaScript中的继承

    摘要:这正是我们想要的太棒了毫不意外的,这种继承的方式被称为构造函数继承,在中是一种关键的实现的继承方法,相信你已经很好的掌握了。 你应该知道,JavaScript是一门基于原型链的语言,而我们今天的主题 -- 继承就和原型链这一概念息息相关。甚至可以说,所谓的原型链就是一条继承链。有些困惑了吗?接着看下去吧。 一、构造函数,原型属性与实例对象 要搞清楚如何在JavaScript中实现继承,...

    _ivan 评论0 收藏0
  • 白话解释 Javascript 原型继承(prototype inheritance)

    摘要:我们有了构造函数之后,第二步开始使用它构造一个函数。来个例子这种方式很简单也很直接,你在构造函数的原型上定义方法,那么用该构造函数实例化出来的对象都可以通过原型继承链访问到定义在构造函数原型上的方法。 来源: 个人博客 白话解释 Javascript 原型继承(prototype inheritance) 什么是继承? 学过面向对象的同学们是否还记得,老师整天挂在嘴边的面向对象三大特...

    kid143 评论0 收藏0
  • 重新认识JavaScript面向对象: 从ES5到ES6

    摘要:基于原型的面向对象在基于原型的语言中如并不存在这种区别它只有对象不论是构造函数,实例,原型本身都是对象。允许动态地向单个的对象或者整个对象集中添加或移除属性。为了解决以上两个问题,提供了构造函数创建对象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新认识面向对象 1. JavaScript...

    VishKozus 评论0 收藏0
  • 重新认识JavaScript面向对象: 从ES5到ES6

    摘要:基于原型的面向对象在基于原型的语言中如并不存在这种区别它只有对象不论是构造函数,实例,原型本身都是对象。允许动态地向单个的对象或者整个对象集中添加或移除属性。为了解决以上两个问题,提供了构造函数创建对象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新认识面向对象 1. JavaScript...

    用户83 评论0 收藏0
  • 彻底理解Javascript中的原型链与继承

    摘要:在节中,我们学习到了通过构造函数创建对象的三个重要步骤,其中的一步是把构造函数的对象设置为创建对象的原型。利用而不是直接用创建一个实例对象的目的是,减少一次调用父构造函数的执行。 JavaScript语言不像面向对象的编程语言中有类的概念,所以也就没有类之间直接的继承,JavaScript中只有对象,使用函数模拟类,基于对象之间的原型链来实现继承关系,ES6的语法中新增了class关键...

    ziwenxie 评论0 收藏0

发表评论

0条评论

FrancisSoung

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<