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 相关文章推荐
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
AngularJS转换响应内容
Jan 27 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
vue-cli的eslint相关用法
Sep 29 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 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
咖啡语言
2021/03/03 咖啡文化
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
Python lambda和Python def区别分析
2014/11/30 Python
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
python写日志封装类实例
2015/06/28 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书