js基于原型和class的面向对象-继承

简介: js基于原型和class的面向对象-继承

本文不讲原理,直接上实例代码

一、基于原型的类继承

1、父类

// 父类构造方法
function Animal(name) {
    // 属性
    this.name = name
}

// 父类方法
Animal.prototype.echoName = function () {
    console.log(this.name);
}

2、子类

// 子类构造方法

function Dog(name, age) {
// 调用父类构造函数
Animal.call(this, name)
this.age = age
}

// 子类继承父类的原型
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 子类方法
Dog.prototype.sayHello = function () {
console.log(this.name, this.age);
}

3、实例化

// 实例化父类
var animal = new Animal('Tom')
animal.echoName()

// 实例化子类
var dog = new Dog('Tom', 23)
dog.echoName()
dog.sayHello()

二、基于class的类继承

JavaScrip从ES6开始正式引入关键字class

1、父类

class Animal {
// 构造方法
constructor(name) {
// 属性
this.name = name
}

// 父类方法
echoName() {
console.log(this.name);
}
}

2、子类

class Dog extends Animal {
// 构造方法
constructor(name, age) {
// 调用父类构造函数
super(name)
this.age = age
}

sayHello() {
console.log(this.name, this.age);
}

}

3、实例化

// 实例化父类
var animal = new Animal('Tom')
animal.echoName()

// 实例化子类
var dog = new Dog('Tom', 23)
dog.echoName()
dog.sayHello()

参考

  1. 对象的继承
  2. 面向对象编程
            </div>
目录
相关文章
|
9月前
|
人工智能 JSON 安全
DeepSeek Engineer:集成 DeepSeek API 的开源 AI 编程助手,支持文件读取、编辑并生成结构化响应
DeepSeek Engineer 是一款开源AI编程助手,通过命令行界面处理用户对话并生成结构化JSON,支持文件操作和代码生成。
1236 6
DeepSeek Engineer:集成 DeepSeek API 的开源 AI 编程助手,支持文件读取、编辑并生成结构化响应
|
12月前
|
存储 缓存 运维
缓存技术有哪些优缺点呢
【10月更文挑战第19天】缓存技术有哪些优缺点呢
|
前端开发 关系型数据库 Java
基于SSM的宠物领养系统的设计与实现
基于SSM的宠物领养系统的设计与实现
1029 0
|
算法 物联网 定位技术
iBeacon蓝牙定位赋能AR技术,重塑室内导航空间体验
iBeacon技术与AR结合,革新室内导航,解决传统技术在室内的局限。利用蓝牙BLE信号,iBeacon实现无需配对的精准定位,通过RSSI和算法计算用户位置。AR界面提供直观导航,适用于商场导购、博物馆导览、停车场寻车和景区导游等场景,实现高精度、实时、低能耗且互动的导航体验。未来,这一技术有望在智能生活领域发挥更大作用。
458 0
iBeacon蓝牙定位赋能AR技术,重塑室内导航空间体验
|
存储 安全 测试技术
【计算机三级数据库技术】第4章 数据库应用系统功能设计与实现--附思维导图
重点介绍了数据库应用系统(DBAS)的功能设计和实现。
252 1
|
机器学习/深度学习 搜索推荐 vr&ar
探索未来智能手机操作系统的发展趋势
随着科技的不断进步,智能手机操作系统正在经历着前所未有的变革和发展。本文将从技术创新、用户体验和生态系统三个方面探讨未来智能手机操作系统的发展趋势,展望智能手机操作系统的未来发展方向。
|
机器学习/深度学习 存储 自然语言处理
机器学习面试笔试知识点-贝叶斯网络(Bayesian Network) 、马尔科夫(Markov) 和主题模型(T M)1
机器学习面试笔试知识点-贝叶斯网络(Bayesian Network) 、马尔科夫(Markov) 和主题模型(T M)
392 0
机器学习面试笔试知识点-贝叶斯网络(Bayesian Network) 、马尔科夫(Markov) 和主题模型(T M)1
|
前端开发 容器
用CSS实现超美星空特效
最近真是越来越对CSS感兴趣了,于是再来整一手,夜晚的星星,再配合上皎洁的月光,这唯美的星空,它来了! 今天带领大家,用CSS实现一下,这美丽的星空。
|
存储 测试技术 异构计算
HDL-Bits 刷题记录 01
HDL-Bits 刷题记录 01
568 0
HDL-Bits 刷题记录 01
|
弹性计算 前端开发 安全
阿里云服务器宝塔面板部署项目
本文章讲解宝塔面板的安装与宝塔面板前后端项目的部署
1045 0
阿里云服务器宝塔面板部署项目