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 相关文章推荐
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
javascript关于继承解析
May 10 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
Vue基础学习之项目整合及优化
Jun 02 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
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
java script编程起步(第三课)
2007/01/10 Javascript
FireFox中textNode分片的问题
2007/04/10 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
python中input()与raw_input()的区别分析
2016/02/27 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
对Django外键关系的描述
2019/07/26 Python
python 的topk算法实例
2020/04/02 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
C语言面试题
2013/05/19 面试题
工商管理专业职业生涯规划
2014/01/01 职场文书
《春笋》教学反思
2014/04/15 职场文书
银行催款通知书
2015/04/17 职场文书
《颐和园》教学反思
2016/02/19 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
调研报告的主要写法
2019/04/18 职场文书
小学毕业教师寄语
2019/06/21 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
Anaconda配置各版本Pytorch的实现
2021/08/07 Python