Javascript编程中几种继承方式比较分析


Posted in Javascript onNovember 28, 2015

本文实例分析了Javascript编程中几种继承方式比较。分享给大家供大家参考,具体如下:

开篇

从'严格'意义上说,javascript并不是一门真正的面向对象语言。这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言。其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究过javascript的继承方式,故特撰此文以供交流。

为何需要利用javascript实现继承

早期pc机器的性能确实不敢恭维,所有的压力全在服务器端,客户端浏览器纯属摆设。再加上那时流行的table布局以及电话线的上网方式导致浏览一个网页十分的卡;而今互联网时代飞速发展,个人电脑硬件得到了极大提升,客户端浏览器的性能也十分的酸爽,web开发的模式也在悄悄改变:服务端不再像以前那样“辛苦”,取而代之的是尽可能的让浏览器承担更多的任务,如此一来,压力分摊到每个客户端上,企业不但节省成本,随之也让web前端开发变的更加有趣--越来越多的前端框架层出不穷,甚至出现了许多前端的MVC框架。在这种背景下,javascript的角色已经绝对不是只做一些简单的验证,发送一些请求或者操作一些DOM,更多的需要担任类似前端路由和业务层的角色,并且javascript需要做大量的逻辑性任务,这里面就包括前台数据的抽离(即model),而只有运用面向对象的思维才能很好的对抽离数据进行处理,因此继承就在这里显得举足轻重。

从一个简单的需求开始

现从前台抽离一个model名为Person,其有基本属性name和age,默认每个人都会说话,因此将说话的功能say放在了原型对象上,以供每个实例享用。现在对于Man来说,它需要继承Person的基本属性,并且在此基础上添加自己特有的属性。

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
  //my own properties
}

下面介绍几种主流的继承方式。

1.原型链继承

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
}
Man.prototype = new Person('pursue');
var man1 = new Man();
man1.say(); //hello, my name is pursue
var man2 = new Man();
console.log(man1.say === man2.say);//true
console.log(man1.name === man2.name);//true

这种继承方式很直接,为了获取Person的所有属性方法(实例上的和原型上的),直接将父类的实例new Person('pursue')赋给了子类的原型,其实子类的实例man1,man2本身是一个完全空的对象,所有的属性和方法都得去原型链上去找,因而找到的属性方法都是同一个。
所以直接利用原型链继承是不现实的。

2.利用构造函数继承

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
//Man.prototype = new Person('pursue');
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
man1.say(); //say is not a function

这里子类的在构造函数里利用了apply去调用父类的构造函数,从而达到继承父类属性的效果,比直接利用原型链要好的多,至少每个实例都有自己那一份资源,但是这种办法只能继承父类的实例属性,因而找不到say方法,为了继承父类所有的属性和方法,则就要修改原型链,从而引入了组合继承方式。

3.组合继承

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = new Person();
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
console.log(man1.say === man2.say);//true
man1.say(); //hello, my name is joe

需要注意的是man1和man2的实例属性其实是覆盖了原型属性,但是并没要覆盖掉原型上的say方法(因为它们没有),所以这里man1.say === man2.say依然返回true,因而需要十分小心没有覆盖掉的原型属性,因为它是所有实例共有的。

4.寄生组合继承

说实话我真不知道下面的这种形式叫这名字,但是它确实是最流行,最经典的javascript的继承方式。其实,只需要明白原型对象的结构即可:

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = Object.create(Person.prototype);//a.
Man.prototype.constructor = Man;//b.
var man1 = new Man('pursue');
var man2 = new Man('joe');
console.log(man1.say == man2.say);
console.log(man1.name == man2.name);

其实寄生组合继承和上面的组合继承区别仅在于构造子类原型对象的方式上(a.和b.),这里用到了Object.creat(obj)方法,该方法会对传入的obj对象进行浅拷贝,类似于:

function create(obj){
  function T(){};
  T.prototype = obj;
  return new T();
}

因此,a.会将子类的原型对象与父类的原型对象进行很好的连接,而并不像一般的组合继承那样直接对子类的原型进行复制(如Man.prototype = new Person();),这样只是很暴力的在对属性进行覆盖。而寄生组合继承方式则对实例属性和原型属性分别进行了继承,在实现上更加合理。

注意:代码b.并不会改变instanceof的结果,但是对于需要用到construcor的场景,这么做更加严谨。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 Javascript
详解JavaScript的变量和数据类型
Nov 27 #Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 #Javascript
Bootstrap精简教程
Nov 27 #Javascript
Bootstrap每天必学之标签与徽章
Nov 27 #Javascript
Bootstrap每天必学之导航条
Nov 27 #Javascript
javascript设计模式--策略模式之输入验证
Nov 27 #Javascript
jQuery实现图片预加载效果
Nov 27 #Javascript
You might like
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
浅析python中的分片与截断序列
2016/08/09 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
初中英语课后反思
2014/04/25 职场文书
2014年基建工作总结
2014/12/12 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
Python中如何处理常见报错
2022/01/18 Python
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL