扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关JavaScript实现继承的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联服务项目包括五龙口网站建设、五龙口网站制作、五龙口网页制作以及五龙口网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,五龙口网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到五龙口省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
“继承”是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。JavaScript并没有“类”的概念,那么,它如何实现继承呢?
(ES6有关键字class和extend,继承的语法与Java等面向对象语言类似,但是,ES6 class,只是JavaScript原型继承的语法糖而已)
1. 类式继承
关键点:通过构造函数实现继承。
父类:
function Parent(name) { this.name = name || "parent"; } Parent.prototype.say = function() { return this.name; }
子类:
function Child() {}
(1) 父类对象继承
Child.prototype = new Parent("child"); var child = new Child(); child.say(); // "child"
特点:使用这种继承模式,子类不仅仅会继承父类原型上的方法/属性,还会继承父类自身的属性。
这种模式的缺点是,在初始化父类对象指向给子类原型时,并不确定父类构造函数的初始化参数(Child.prototype = new Parent("child");),而且,往往这些参数并不是子类需要的。
(2) 借用构造函数
改造子类:
function Child(){ Parent.apply(this, arguments); }
特点:使用这种继承模式,子类只会继承父类自身的属性。
缺点很明显,它无法从原型链中继承任何方法/属性。
(3) 共享原型
Child.prototype = Parent.prototype;
这种方式的缺点是,子类原型和父类原型共享一个对象,那么,子类如果修改原型,必然会影响父类。
(4) 临时构造函数
function inherit(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); }
特点:利用一个空函数F()充当子类和父类之间的代理,既可以实现父类原型方法/属性的继承,又可以在子类原型上继续扩展方法/属性。
一般,我们可以利用ES5提供的新方法Object.create()
来实现此类继承。
Child.prototype = Object.create(Parent.prototype);
2. 通过复制属性实现继承
复制属性分为浅拷贝和深拷贝。
浅拷贝不会复制对象类型,只会简单的将对象引用指向子类,代码如下:
function extend(parent, child) { var key; for(key in parent) { if (parent.hasOwnProperty(key)){ child[key] = parent[key]; } } return child; }
深拷贝会做深度复制,如果某个属性为对象类型,那么,它会复制出该对象的属性,再拷贝给子类。代码如下:
function extendDeep(parent, child) { var key; for(key in parent) { if (parent.hasOwnProperty(key)){ if (typeof parent[key] === 'object') { child[key] = (parent[key].toString() === "[object Array]")? []:{}; extendDeep(parent[key], child[key]); } else { child[key] = parent[key]; } } } return child; }
3. "借用方法"模式复用父类函数
如果不想实现父子之间的完全继承,仅仅期望子类实现父类中一个或多个方法,那么可以利用apply, call, bind
来调用父类函数,实现复用。
代码如下:
parent.say.call(child, "hello, child!");
关于“JavaScript实现继承的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流