博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js面向对象浅析--继承那些事
阅读量:5962 次
发布时间:2019-06-19

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

前言

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);

图片描述

转载地址:http://yznax.baihongyu.com/

你可能感兴趣的文章
远程推送
查看>>
后台调用gps
查看>>
HTML5标签的语义认知和理解(1)
查看>>
MySQL日志功能详解(2)
查看>>
HP LaserJet 305X 和 339X 系列一体机如何设置手动或自动接收传真?
查看>>
linux之权限之隐藏权限
查看>>
设计模式学习网址和书籍
查看>>
[李景山php]每天TP5-20170115|thinkphp5-Model.php-8
查看>>
前端seo注意事项!
查看>>
ConcurrentHashMap 线程安全
查看>>
Centos6.5 Python2.7+Supervisor 环境安装
查看>>
Exchange2010SP1删除特定主题邮件
查看>>
Supporting Python 3(支持python3)——语言区别和暂时解决方法
查看>>
Linux 下网络性能优化方法简析
查看>>
ejs教程
查看>>
查询某个命令需要用yum安装哪个包才有
查看>>
网络协议
查看>>
Storm环境搭建
查看>>
我的友情链接
查看>>
初试Jekyll----像个GEEK一般写博客(1)
查看>>