JavaScript - 继承

首页 / JavaScript / JS Inheritance

JavaScript继承是一种机制,使无涯教程可以在现有类的基础上创建新类。它为子类提供了灵活性,以重用父类的方法和变量。

JavaScript extends关键字用于在父类的基础上创建子类。它有助于子类获取其父类的所有属性和行为。

要点

  • 它保持IS-A关系。
  • extends关键字用于类表达式或类声明中。
  • 使用extends关键字,可以获得内置对象以及自定义类的所有属性和行为。
  • 还可以使用基于原型的方法来实现继承。

示例1:内置对象

在此示例中,扩展了 Date 对象以显示今天的日期。

<script>
class Moment extends Date {
  constructor() {
    super();
  }}
var m=new Moment();
document.writeln("Current date:")
document.writeln(m.getDate()+"-"+(m.getMonth()+1)+"-"+m.getFullYear());
</script>

输出:

Current date: 31-8-2018

再看一个示例,以显示给定日期的年份值。

<script>
class Moment extends Date {
  constructor(year) {
    super(year);
  }}
var m=new Moment("August 15, 1947 20:22:10");
document.writeln("Year value:")
document.writeln(m.getFullYear());
</script>

输出:

Year value: 1947

展示例2: 自定义类

在此示例中,声明了扩展其父类属性的子类。

链接:https://www.learnfk.comhttps://www.learnfk.com/javascript/javascript-oops-inheritance.html

来源:LearnFk无涯教程网

<script>
class Bike
{
  constructor()
  {
    this.company="Honda";
  }
}
class Vehicle extends Bike {
  constructor(name,price) {
   super();
    this.name=name;
    this.price=price;
  } 
}
var v = new Vehicle("Shine","70000");
document.writeln(v.company+" "+v.name+" "+v.price);
</script>

输出:

Honda Shine 70000

示例3:基于原型的方法

在这里,执行基于原型的继承。在这种方法中,不需要使用classextends关键字。

<script>
//Constructor function
function Bike(company)
{
    this.company=company; 
}

Bike.prototype.getCompany=function()
{
  return this.company;
}
//Another constructor function
function Vehicle(name,price) {
 this.name=name;
  this.price=price;
  } 
var bike = new Bike("Honda");
Vehicle.prototype=bike; //Now Bike treats as a parent of Vehicle.
var vehicle=new Vehicle("Shine",70000);
document.writeln(vehicle.getCompany()+" "+vehicle.name+" "+vehicle.price);
</script>

输出:

Honda Shine 70000

这一章《JavaScript - 继承》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持,感谢!😊

相关文章

程序员的数学基础课 -〔黄申 - 58讲〕

Kafka核心技术与实战 -〔胡夕 - 47讲〕

OAuth 2.0实战课 -〔王新栋 - 17讲〕

零基础实战机器学习 -〔黄佳 - 24讲〕

如何在 svg 中创建交错的方形平铺图案?

将新值推送到对象数组,同时保持旧值不变 React Js Next Js

如何将 Rsa 密钥对(字符串)转换为加密密钥以对数据进行签名

Typescript - 具有无效值的类型断言不会引发错误

不适用于 React 的 JSX 条件

如何根据另一个输入的值进行输入?

视频推荐〔JavaScript - 15-变量案例弹出用户名〕

更多视频 »
好记忆不如烂笔头。留下你的足迹吧 :)