博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 继承
阅读量:6291 次
发布时间:2019-06-22

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

1.对象继承

(1)把父亲对象赋值给孩子对象的原型

//要继承的对象var parent = {name:'Lily',age:23};//新对象var child = object(parent);function object(P){    function F(){}    F.prototype = P;    return new F();}console.log(child.name);//Lily

(2) 使用ES5的Object.create(object,propertiesObject)方法代替上面的object函数

//要继承的对象var parent = {name:'Lily',age:23};//新对象var child = Object.create(parent);console.log(child.name);//Lily

(3)把父亲对象的属性复制给子对象

a.浅拷贝

//浅拷贝函数function extend(parent,child){    var i;    child = child || {};    for(i in parent){        if(parent.hasOwnProperty(i)){            child[i] = parent[i];        }    }    return child;}var parent = {name:'Lily',info:{age:23}};var child = extend(parent);console.log(child.info.age);//23child.info.age = 30;console.log(child.info.age);//30console.log(parent.info.age);//30

b.深拷贝

//深拷贝函数        function deepExtend(parent,child){            var i,                toStr = Object.prototype.toString,                asStr = "[object Array]";            child = child || {};            for(i in parent){                if(parent.hasOwnProperty(i)){                    if(typeof parent[i] === 'object'){                        child[i] = (toStr.call(parent[i]) === asStr) ? [] : {};                        deepExtend(parent[i],child[i]);                    }else{                        child[i] = parent[i];                    }                }            }            return child;        }        var parent = {name:'Lily',info:{age:23}};        var child = deepExtend(parent);        console.log(child)        console.log(child.info.age);//23        child.info.age = 30;        console.log(child.info.age);//30        console.log(parent.info.age);//23

 (4)借助方法

     var parent = {            name: 'Lily',            age: 23        };        var child = {            getInfo: function(){                console.log('name:'+this.name+';age:'+this.age);//name:Lily;age:23            }        }        child.getInfo.apply(parent);

 2.类式继承

(1)子对象的原型指向new的父对象

此方式只是通过原型链继承new出来的对象,子对象自己不能拥有和父函数一样的属性。

function Parent(){            this.name = 'Lily';            this.age = 23;        }        function Child(){        }        Child.prototype = new Parent();        var child = new Child();        console.log(child.name);//Lily

(2)使用构造函数

子对象只是拥有父函数的属性,而不能继承父函数的原型。

     function Parent(){            this.name = 'Lily';            this.age = 23;        }        function Child(){            Parent.apply(this);        }        var child = new Child();        console.log(child.name);//Lily

(3)把上面的(1)和(2)结合使用

子对象自己拥有父函数的属性,同时也会继承父函数的原型,但是从父函数直接继承过来的自己的属性与new的父对象的属性重合。

     function Parent(){            this.name = 'Lily';            this.age = 23;        }        Parent.prototype.run = function(){            console.log('running');        }        function Child(){            Parent.apply(this);        }        Child.prototype = new Parent();        var child = new Child();        console.log(child.name);//Lily        child.run();//running

(4)把Parent的原型赋值给Child的原型

     function Parent(){            this.name = 'Lily';            this.age = 23;        }        Parent.prototype.run = function(){            console.log('running');        }        function Child(){            Parent.apply(this);        }        Child.prototype = Parent.prototype;        var child = new Child();        console.log(child.name);//Lily        child.run();//running

 

 

 

 

[1]javascript模式

转载于:https://www.cnblogs.com/fe-huahai/p/5656864.html

你可能感兴趣的文章
【转载】每个程序员都应该学习使用Python或Ruby
查看>>
PHP高级编程之守护进程,实现优雅重启
查看>>
PHP字符编码转换类3
查看>>
rsync同步服务配置手记
查看>>
http缓存知识
查看>>
Go 时间交并集小工具
查看>>
iOS 多线程总结
查看>>
webpack是如何实现前端模块化的
查看>>
TCP的三次握手四次挥手
查看>>
关于redis的几件小事(六)redis的持久化
查看>>
webpack4+babel7+eslint+editorconfig+react-hot-loader 搭建react开发环境
查看>>
Maven 插件
查看>>
初探Angular6.x---进入用户编辑模块
查看>>
计算机基础知识复习
查看>>
【前端词典】实现 Canvas 下雪背景引发的性能思考
查看>>
大佬是怎么思考设计MySQL优化方案的?
查看>>
<三体> 给岁月以文明, 给时光以生命
查看>>
Android开发 - 掌握ConstraintLayout(九)分组(Group)
查看>>
springboot+logback日志异步数据库
查看>>
Typescript教程之函数
查看>>