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 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 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
YB217、YB235、YB400浅听
2021/03/02 无线电
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
第三节 定义一个类 [3]
2006/10/09 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
详解VueJS应用中管理用户权限
2018/02/02 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
python 基础教程之Map使用方法
2017/01/17 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
幼师求职自荐信范文
2014/01/26 职场文书
酒店营销策划方案
2014/02/07 职场文书
2014年关工委工作总结
2014/11/17 职场文书
优秀团支部申报材料
2014/12/26 职场文书
婚前保证书范文
2015/02/28 职场文书
法制教育讲座心得体会
2016/01/14 职场文书