js面向对象浅析--继承那些事

molyzzx 发布于2019-08-21 10:46 / 3283人阅读

摘要：有需要还可以修改指向谦龙寄生组合式继承思路是通过借用构造函数来继承属性，通过原型链的混合形式来继承方法改变执行环境实现继承有需要还可以修改指向谦龙谦龙拷贝继承该方法思路是将另外一个对象的属性和方法拷贝至另一个对象使用递归

前言

js中实现继承的方式只支持实现继承，即继承实际的方法，而实现继承主要是依靠原型链来完成的。

原型链式继承

该方式实现的本质是重写原型对象，代之以一个新类型的实例。

    function SuperType(){
        this.property=true;
    }
    SuperType.prototype.getSuperValue=function(){
        return this.property;
    }

    function SubType(){
        this.subproperty=false;
    }
    SubType.prototype = new SuperType();//继承
    SubType.prototype.getSubValue=function(){//额外添加方法
        return this.subproperty;
    }
    var s = new SubType();
        console.log(s.getSubValue());//false
        console.log(s.getSuperValue());//true

借用纯原型链的问题：如果原型中包含引用类型的值，则实例间对该值的修改会相互影响，这不是我们希望看到的。

借用构造函数

该方式的基本思想是在子类型的构造函数的内部调用超类型构造函数(父函数)

   function SuperType(){
        this.color=["green","red","black"];
    }

    function SubType(){
        SuperType.call(this)//改变执行环境 实现继承
    }
    var  s = new SubType();
        s.color.push("pink");
        console.log(s.color);//[ "green", "red", "black", "pink" ]
    var s1 = new SubType();
        console.log(s1.color);//[ "green", "red", "black" ]

构造函数的问题：方法都在构造函数内部定义，则函数复用无从谈起。

组合继承

基本思路是使用原型链来实现对原型属性和方法的继承，通过构造函数实现实例属性的继承

 function SuperType(name){
        this.name=name;
        this.color=["green","red","black"];
    }

    SuperType.prototype.show=function(){
        console.log(this.name,this.color);
    }

    function SubType(name,age){
        SuperType.call(this,name)//改变执行环境 实现实例属性继承
        this.age=age;
    }
    SubType.prototype = new SuperType();//原型属性和方法继承

    var s = new SubType("谦龙",100);
        s.show();//谦龙 ["green", "red", "black"]
    var s = new SubType("雏田",14);
    s.show();//雏田 ["green", "red", "black"]

原型式继承

该方法的特点是借助原型可以基于一个已有的对象创建新的对象，同时还不比因此创建自定义类型

    function object(obj){
        function F(){};
        F.prototype=obj;
        //F.prototype.constructor=F; 有需要还可以修改constructor指向
        return new F();
    }

    var person={
        name:"谦龙",
        color:["red","green","black"]
    }
    var p1 = object(person);
        p1.color.push("pink");

    var p2 = object(person);
    p2.color.push("grey");

    console.log(person.color);//["red", "green", "black", "pink", "grey"]

ES5中的Object.creat()与该方式的行为相同

寄生式继承

该方式的思路是创建一个仅用来封装继承过程的函数，该函数在内部以某种方式来增强对象，最后将该对象返回。

 function object(obj){
        function F(){};
        F.prototype=obj;
        //F.prototype.constructor=F; 有需要还可以修改constructor指向
        return new F();
    }

    function CObject(obj){
        var clone=object(obj);
        clone.sayHi=function(){
            alert("HI");
        }
        return clone;
    }
    var person={
        name:"谦龙",
        color:["red","green","black"]
    }
    var s = CObject(person);
        s.sayHi();

寄生组合式继承

思路是通过借用构造函数来继承属性，通过原型链的混合形式来继承方法

function SuperType(name){
    this.name=name;
    this.color=["green","red","black"];
}
SuperType.prototype.show=function(){
    console.log(this.name,this.color);
}
function SubType(name,age){
    SuperType.call(this,name)//改变执行环境 实现继承
    this.age=age;
}
function object(obj){
    function F(){};
    F.prototype=obj;
    //F.prototype.constructor=F; 有需要还可以修改constructor指向
    return new F();
}

function inheritPrototype(subType,superType){
    var prototype=object(superType.prototype);
    prototype.constructor=subType;
    subType.prototype=prototype;
}
inheritPrototype(SubType,SuperType);
var s = new SubType("谦龙",100);
s.show();//谦龙 ["green", "red", "black"]

拷贝继承

该方法思路是将另外一个对象的属性和方法拷贝至另一个对象

 function deepCopy(obj){
            if(typeof obj !="object"){
                console.trace();
                return obj;
            }
            var newObj={};
                for(var attr in obj){
                    newObj[attr]=typeof obj[attr]=="object"?deepCopy(obj[attr]):obj[attr];//使用递归
                }
            return newObj;
        }
        var obj={
            name:"min",
            age:20,
            sex:"boy",
            json:{
                name2:"huihui",
                json3:{
                    name3:"yahui"
                }
            }
        }
        var newObj=deepCopy(obj);
        console.log(newObj);

GPU云服务器云服务器 js 面向对象视频 oop面向对象 js js面向对象开发表格云服务器那些事

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

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

JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
JavaScript面向对象那些事

摘要：委托上面的代码结合了构造函数和原型两种方式去创建对象，首先聊聊构造函数构造函数构造函数本质上还是函数，只不过为了区分将其首字母大写了而已。注意注释掉的代码是自动执行的，但这并不是构造函数独有的，每个函数在声明时都会自动生成。首先看看下面两个1+1=2的问题: 问题一：为什么改变length的值，数组的内容会变化？ var arr = [1]; arr.length = 3; aler...

王伟廷 2019-08-20 18:07 评论0 收藏0
【面试】Java基础的那些事-Two

摘要：前言面试中对于技术职位，一般分笔试与面谈，如果面试官的一些小问题你可以立马找到对应的知识点扩展开来，那么这就是你的优势，本系列将讲述一些面试中的事，不会很详细，但是应该比较全面吧。前言面试中对于技术职位，一般分笔试与面谈，如果面试官的一些小问题你可以立马找到对应的知识点扩展开来，那么这就是你的优势，本系列将讲述一些java面试中的事，不会很详细，但是应该比较全面吧。主要内容 pa...

you_De 2019-08-19 10:59 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

Lyux 2019-06-28 13:32 评论0 收藏0