关于JavaScript 类(class)的学习(二)—类继承

一、 类继承介绍

JavaScript 类继承使用 extends 关键字。

继承允许我们依据另一个类来定义一个类,这使得创建和维护一个应用程序变得更容易。

super() 方法用于调用父类的构造函数。

当创建一个类时,您不需要重新编写新的数据成员和成员函数,只需指定新建的类继承了一个已有的类的成员即可。这个已有的类称为基类(父类),新建的类称为派生类(子类)
 

class Site {
  constructor(name) {
    this.sitename = name;
  }
  present() {
    return '我喜欢' + this.sitename;
  }
}
 
class Runoob extends Site {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  show() {
    return this.present() + ', 它创建了 ' + this.age + ' 年。';
  }
}
 
let noob = new Runoob("菜鸟教程", 5);
document.getElementById("demo").innerHTML = noob.show();

super() 方法引用父类的构造方法。

通过在构造方法中调用 super() 方法,我们调用了父类的构造方法,这样就可以访问父类的属性和方法。

继承对于代码可复用性很有用。

JavaScript 并没有像其他编程语言一样具有传统的类,而是基于原型的继承模型。

ES6 引入了类和 class 关键字,但底层机制仍然基于原型继承。

 

二、类继承


在JavaSctipt中,类继承是一种重要的概念,它允许我们创建具有相似特征和行为的对象,并且可以通过继承来共享代码和功能。下面将介绍JS类继承的几种常见方法,包括原型链继承、构造函数继承、组合继承、寄生组合继承以及ES6中的class继承。
1. 原型链继承
原型链继承是JavaScript中最基本的继承方式之一。它通过将父类的实例作为子类的原型,实现了子类对父类属性和方法的继承。这种继承方式的缺点是子类实例共享了父类实例的属性和方法,而且无法在子类中向父类构造两数传递参数。
2.构造函数继承
构造函数继承是通过在子类中调用父类构造两数来实现继承的。这种方式可以解决原型链继承中子类实例共享父类实例属性和方法的问题,但是无法继承父类原型上的方法。
3.组合继承
组合继承是将原型链继承和构造两数继承结合起来的一种继承方式。它通过在子类构造两数中调用父类构造两数,实现了对父类属性的继承,同时通过将父类实例作为子类原型,实现了对父类方法的继承。这种继承方式解决了原型链继承和构造两数继承各自的问题,但是在创建子类实例时会调用两次父类构造两数,造成了一定的性能浪费。
4. 寄生组合继承
奇生组合继承是对组合继承的优化,它通过寄生方式来继承父类的原型,避免了在创建子类实例时调用两次父类构造函数
的问题。具体实现是通过创建一个空函数作为中介,将中介西数的原型指向父类的原型,然后将子类的原型指向中介函数的实例。这样,子类既继承了父类的属任和方法,又避免了调用两次父类构造两数的问题。
5.ES6中的class继承
ES6 入了class关键宇,提供了一种更简洁、 更直观的继承方式。通过使用extends关键字,子类可以继承父类的属性和方法。ES6中的class继承实际上是基于原型链继承的一种语法糖,它使用了super关键字来调用父类的构造函数,并且可以在子类中定义自己的构造函数。

推荐使用ES的class继承
实例:

class Animal {
  constructor(name) {
    this.name = name;
  }
 
  eat() {
    console.log(this.name + " is eating.");
  }
}
 
class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
 
  bark() {
    console.log(this.name + " is barking.");
  }
}
 
const dog = new Dog("Buddy", "Labrador");
dog.eat();
dog.bark();



总结:在arascript中,类继承是一种非常常见和重要的概念,它允许我们创建具有相似特征和行为的对象,并且可以通过继承来共享代码和功能。本文介绍了几种常见的JS类继承方法,包括原型链继承、构造两数继承、组合继承、 寄生组合继承以及ES6中的class继承。每种继承方式都有自己的特点和适用场景,我们可以根据实际需求选择合适的继承方式来实现代码的复用和扩展。同时,了解和掌握这些继承方法也是提高JavaScript编程能力的重要一步、

三、getter 和 setter 
 

类中我们可以使用 getter 和 setter 来获取和设置值,getter 和 setter 都需要在严格模式下执行。

getter 和 setter 可以使得我们对属性的操作变的很灵活。

类中添加 getter 和 setter 使用的是 get 和 set 关键字。

以下实例为 sitename 属性创建 getter 和 setter:
 

class Runoob {
  constructor(name) {
    this.sitename = name;
  }
  get s_name() {
    return this.sitename;
  }
  set s_name(x) {
    this.sitename = x;
  }
}
 
let noob = new Runoob("教程");
 
document.getElementById("demo").innerHTML = noob.s_name;

 

注意:即使 getter 是一个方法,当你想获取属性值时也不要使用括号。

getter/setter 方法的名称不能与属性的名称相同,在本例中属名为 sitename。

很多开发者在属性名称前使用下划线字符 _ 将 getter/setter 与实际属性分开

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值