JS中的继承操作实例总结

更新时间：2020年06月06日 10:27:58 作者：Jacano

这篇文章主要介绍了JS中的继承操作,结合实例形式总结分析了JS中的原型链继承、构造函数继承、组合继承、class继承等常见继承操作实现技巧,需要的朋友可以参考下

1.原型链继承

function SuperType() {
  this.property = true; 
}
SuperType.prototype.getSuperValue = function() {
  return this.property;
}
function SubType() {
  ths.subproperty = false;
}
SubType.prototype = new SuperType();   // 实现继承
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}
var instance = new SubType();
console.log(instance.getSuperValue());   // true

原理:让SuperType的实例成为子类的原型对象，子类的实例拥有了父类的属性和方法。但也有弊端，如果父类的属性是引用类型，这将导致共享的属性被改变的时候，全部的属性将被改变，我们一下代码。

function SuperType() {
  this.property = [1,2,3]; 
}
SuperType.prototype.getSuperValue = function() {
  return this.property;
}
function SubType() {
  ths.subproperty = false;
}
SubType.prototype = new SuperType();   // 实现继承
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}
var instance1 = new SubType();
var instance2 = new SubType();
instance1.property.push(4);
console.log(instance1.property);   // [1,2,3,4]
console.log(instance2.property);   // [1,2,3,4]

我们修改一处的实例属性，两个实例的属性都会被修改，因为这个属性是共享的，这也是原型链继承的缺点。

2.构造函数继承

function SuperType(name) {
  this.name = name;
  this.numbers = [1,2,3];
}
function SubType() {
  SuperType.call(this,"Nicholas");
  this.age = 29;
}

var instance1 = new SubType();
var instance2 = new SubType();
instance1.property.push(4);
console.log(instance1.name);    // Nicholas
console.log(instance1.age);     // 29
console.log(instance1.numbers);   // [1,2,3,4]
console.log(instance2.numbers); // [1,2,3]

在子类中调用父类的构造函数，每次实例化时都会新建父类的属性放在新实例中，因此每个实例中的属性都是不一样的，改变一个实例的值不会造成另一个实例的值改变。这个继承方式的缺点是方法的定义不能复用。

3.组合继承

这个方法将原型链继承和构造函数继承结合到一起，融合了他们各自的优点。

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);
var instance2 =new SubType("Greg", 27);
instance1.colors.push("black");
console.log(instance1.colors);    // red,blue,green,black
console.log(instance2.colors);    // red,blue,green
instance1.sayName();         // Nicholas
instance2.sayName();         // Greg
instance1.sayAge();           // 29
instance2.sayAge();           // 27

4.class继承

ES6中可以通过class创建对象，通过关键字extends继承。

class Point {
 constructor(x, y) {
  this.x = x;
  this.y = y;
 }
}

class ColorPoint extends Point {
 constructor(x, y, color) {
  this.color = color; // ReferenceError
  super(x, y);
  this.color = color; // 正确
 }
}

在ES6的继承中，子类一定要重写父类的构造函授的方法，否则会报错。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

JS
继承

JavaScript限定复选框的选择个数示例代码
有10个复选框，用户最多只能勾选3个，否则就灰掉所有复选框，具体实现思路及代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08
JavaScript设计模式之享元模式实例详解
这篇文章主要介绍了JavaScript设计模式之享元模式,结合实例形式较为详细的分析了javascript享元模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
2019-01-01
浅谈JS 数字和字符串之间相互转化的纠纷
下面小编就为大家带来一篇浅谈JS 数字和字符串之间相互转化的纠纷。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
40行原生js代码实现前端简易路由
路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同,下面这篇文章主要给大家介绍了关于如何通过40行原生js代码实现前端简易路由的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
Js中async/await的执行顺序详解
随着async/await正式纳入ES7标准，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。下面这篇文章主要给大家介绍了关于Js中async/await执行顺序的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-09-09
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
本文结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。对bootstrap表格组件相关知识感兴趣的朋友一起学习吧
2016-05-05
如何确保JavaScript的执行顺序之实战篇
我曾在文章《如何在多个页面使用同一个HTML片段 - 续》的最后提到JavaScript顺序执行的特性。虽然现代浏览器可以并行的下载JavaScript（部分浏览器），但考虑到JavaScript的依赖关系，他们的执行依然是按照引入顺序进行的。
2011-03-03
jquery根据锚点offset值实现动画切换
点击后僵硬的切换是不是很不爽，下面为大家介绍的是根据锚点offset值来实现动画切换，喜欢的朋友不要错过
2014-09-09
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
今天小编给大家分享基于原生JS实现一个炫酷的登录页面，实现效果有点像重力模拟弹跳系统，效果非常棒，需要的朋友参考下实现代码吧
2017-11-11
解决在Bootstrap模糊框中使用WebUploader的问题
这篇文章主要介绍了在Bootstrap模糊框中使用WebUploader的问题及解决方法，,需要的朋友可以参考下
2018-03-03