javascript 中的继承实例详解


Posted in Javascript onMay 05, 2017

javascript 中的继承实例详解

阅读目录

  • 原型链继承
  • 借用构造函数
  • 组合继承
  • 寄生组合式继承
  • 后记

继承有两种方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。

由于函数没有签名,在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承,而且实现继承主要依靠原型链来实现。

下面介绍几种js的继承:

原型链继承

原型链继承实现的本质是重写原型对象,代之以一个新类型的实例。代码如下:

function SuperType() {
  this.property = true;
}

SuperType.prototype.getSuperValue = function() {
  return this.property;
};

function SubType() {
  this.subproperty = false;
}

// 继承了SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {
  return this.subproperty;
};

var instance = new SubType();

console.log(instance.getSuperValue()); // true

可以看到instance调用了父级的getSuperVlue()方法,实现了继承。

原型链的继承有如下问题:

  1. 包含引用类型值的原型时,在改变原型的引用类型时,会全部改了
  2. 在创建子类型的实例时,没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数

示例代码如下:

function SuperType1() {
  this.colors = ['red', 'blue', 'green'];
}
function SubType1() {

}
SubType1.prototype = new SuperType1();
var instance1 = new SubType1();
instance1.colors.push('black');
console.log(instance1.colors); // [ 'red', 'blue', 'green', 'black' ]

var instance2 = new SubType1();
console.log(instance2.colors); // [ 'red', 'blue', 'green', 'black' ]

可以发现,instance1和instance2的colors属性是共享的,这就出问题了,同时也能够看出,在new一个新的方法时,如果传值的话,是传不到父级的。

借用构造函数

原理是在子类型构造函数的内部调用超类型构造函数,因为函数只不过是在特定环境中执行代码的对象,这样就可以获取父级的方法和属性了。

代码如下:

function SuperType(name) {
  this.name = name;
}

function SubType(name) {
  // 继承了SuperType,同时还传递了参数
  SuperType.call(this, name);

  // 实例属性
  this.age = 29;
}

var instance = new SubType('Bob');

console.log(instance.name); // Bob
console.log(instance.age); // 29

可以看出,调用构造函数继承解决了向父类型传参的问题,但调用构造函数也有其自身的问题:

  1. 方法都在构造函数中,函数复用没有了。
  2. 超类型的原型中定义的方法,对子类型而言是不可见的。

第一个问题很明显,针对第二个问题的解释是,由于只是执行了一次函数,并没有new出新对象,故而父类prototype中的方法对子类是不可见的。

组合继承

由于原型链继承和借用构造函数继承都有缺陷,故而在实际中一般不会单独使用。

组合继承是借用其两者的优点而产生的继承方法。

其原理是使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承。

代码如下:

function SuperType(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

SuperType.prototype.sayName = function() {
  console.log(this.name);
};

function SubType(name, age) {
  // 继承属性
  SuperType.call(this, name);

  this.age = age;
}
// 继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
  console.log(this.age);
};

var instance1 = new SubType('Nicholas', 29);
instance1.colors.push('black');

console.log(instance1.colors); // [ 'red', 'blue', 'green', 'black' ]
instance1.sayName(); // Nicholas
instance1.sayAge(); // 29

var instance2 = new SubType('Greg', 27);

console.log(instance2.colors); // [ 'red', 'blue', 'green' ]
instance2.sayName(); // Greg
instance2.sayAge(); // 27

组合继承能够解决上面两种继承方式带来的问题,但是组合继承也有其自身的小问题,那就是会调用两次超类型构造函数,通过分析便可知道 一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。

寄生组合式继承

寄生组合式继承的原理为通过借用构造函数来继承属性,通过原型链的混成形式来继承方法,基本思路是不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。

代码如下:

function object(o) {
  function F() {}
  F.prototype = o;
  return new F;
}

function inheritPrototype(subType, superType) {
  var prototype = object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}

function SuperType(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

SuperType.prototype.sayName = function() {
 console.log(this.name);
};

function SubType(name, age) {
  SuperType.call(this, name);

  this.age = age;
}

// 继承的关键
inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function() {
  console.log(this.age);
};

var instance = new SubType('天涯', 23);
instance.sayName();
instance.sayAge();

寄生组合式继承只有在调用构造函数时执行了一遍超类型,解决了组合继承的小问题。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
JavaScript函数表达式详解及实例
May 05 #Javascript
Node.js中的http请求客户端示例(request client)
May 04 #Javascript
Bootstrap布局之栅格系统学习笔记
May 04 #Javascript
vue.js开发环境搭建教程
May 04 #Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 #jQuery
详解webpack es6 to es5支持配置
May 04 #Javascript
angular 基于ng-messages的表单验证实例
May 04 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
php MySQL与分页效率
2008/06/04 PHP
php 输出双引号"与单引号'的方法
2010/05/09 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
详解Python中for循环的使用方法
2015/05/14 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python队列queue模块详解
2018/04/27 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
Python连接Impala实现步骤解析
2020/08/04 Python
中专毕业生的自我鉴定
2013/12/01 职场文书
老师自我鉴定范文
2013/12/25 职场文书
《自选商场》教学反思
2014/02/14 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS