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 相关文章推荐
jquery之Document元素选择器篇
Aug 14 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
Vue.js实现可编辑的表格
Dec 11 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
js Form.elements[i]的使用实例
2011/11/13 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
JSONP跨域请求
2017/03/02 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python绘制并保存指定大小图像的方法
2019/01/10 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
python 一维二维插值实例
2020/04/22 Python
简单的命令查看安装的python版本号
2020/08/28 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
生物科学系大学生的自我评价
2013/12/20 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
美食节策划方案
2014/05/26 职场文书
毕业生求职信
2014/06/10 职场文书
管理工程专业求职信
2014/08/10 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
2014年教师德育工作总结
2014/11/10 职场文书