JS中的继承操作实例总结


Posted in Javascript onJune 06, 2020

本文实例讲述了JS中的继承操作。分享给大家供大家参考,具体如下:

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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
js实现简单的打印表格
Jan 15 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
ES6 async、await的基本使用方法示例
Jun 06 #Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 #Javascript
ES6 Generator基本使用方法示例
Jun 06 #Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
ES6 Symbol在对象中的作用实例分析
Jun 06 #Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 #Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 #Javascript
You might like
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
动态调用css文件——jquery的应用
2007/02/20 Javascript
offsetParent 算法分析
2010/04/05 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
python操作sqlite的CRUD实例分析
2015/05/08 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
甲方资料员岗位职责
2013/12/13 职场文书
干部现实表现材料
2014/02/13 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
出纳会计岗位职责
2014/03/12 职场文书
副董事长岗位职责
2014/04/02 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
七一建党节慰问信
2015/02/14 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书