Javascript中的几种继承方式对比分析


Posted in Javascript onMarch 22, 2016

开篇
从'严格'意义上说,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 相关文章推荐
javascript 获取表单file全路径
Dec 31 Javascript
jQuery DOM操作实例
Mar 05 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
JS函数定义方式的区别介绍
Mar 22 #Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 #Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 #Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 #Javascript
JS中多种方式创建对象详解
Mar 22 #Javascript
基于jquery实现无限级树形菜单
Mar 22 #Javascript
javascript的几种继承方法介绍
Mar 22 #Javascript
You might like
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
php简单获取复选框值的方法
2016/05/11 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
5.12护士节活动总结
2015/02/10 职场文书
应届生简历自我评价
2015/03/11 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
python字符串常规操作大全
2021/05/02 Python
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
详解PyTorch模型保存与加载
2022/04/28 Python