js学习总结----深入扩展原型链模式常用的六种继承方式

本文详细介绍了JavaScript中对象的可枚举性及其控制方法,深入探讨了多种JS继承模式,包括原型继承、call继承、冒充对象继承、混合模式继承、寄生组合式继承及中间类继承法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、可枚举和不可枚举

for in 循环在遍历的时候,默认的话可以把自己私有的和它所属类原型上的扩展的属性和方法都可以遍历到,但是一般情况下,我们遍历一个对象只需要遍历私有的即可,我们可以使用以下的判断进行处理。obj.propertyIsEnumerable(key) 或者obj.hasOwnProperty(key)

二、Object.create(proObj)

  方法创建一个新的对象,但是要把proObj作为这个对象的原型 在IE6-8不兼容(ECMAscript5)

  原理:

     function object(o){
            function Fn(){};
            Fn.prototype = o;
            return new Fn;
        }

三、继承

  1、原型继承    

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            this.y = 200
        }
        B.prototype = new A;
     B.prototype.constructor = B

  原型继承是我们JS中最常用的一种继承方式

  子类B想要继承父类A中的所有属性和方法(公有+私有),只需要让B.prototype = new A;即可

  原型继承的特点:它是把父类中私有+公有的都继承到了子类原型上(子类公有的),具体见下图 

   核心:原型继承并不是把父类中的属性和方法克隆一份一模一样的给B而是让B和A之间增加了原型链的链接,以后B的实例n想要用A中的getX方法,需要一级一级的向上查找来使用。

  2、call继承

    把父类私有的属性和方法克隆一份一模一样的 作为子类私有的属性 

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            A.call(this)//A.call(n) 把A执行让A中的this变成n
        }

  3、冒充对象继承   

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            var temp = new A;
            for(var key in temp){
                this[key] = temp[key]
            }
       temp = null }
var n = new B;

  冒充对象继承:把父类公有的+私有的克隆一份一模一样的给子类私有的

  4、混合模式继承:原型继承+call继承(第二常用)

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            A.call(this);
        }
        B.prototype = new A;
        B.prototype.constructor = B;

  缺点:A执行了两遍,且A中x既是私有属性,又是公有属性

  5、寄生组合式继承:解决上面私有的重复问题

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            A.call(this);
        }
        B.prototype = Object.create(A.prototype);//IE6-8不兼容 ,可以自己写一个Object.create方法
        B.prototype.constructor = B;

  6、中间类继承法->不兼容(移动端开发考虑)

    A.__proto__ = B.prototype

转载于:https://www.cnblogs.com/diasa-fly/p/7087816.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值