扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript类的继承全面示例讲解
  • 270

0
分享到

JavaScript类的继承全面示例讲解

JavaScript类的继承JavaScript继承 2022-11-13 14:11:30 270人浏览 泡泡鱼
摘要

目录1. ES5 中的继承1.1 修改原型链1.2 调用父类的构造函数1.3 组合继承1.4 原型继承1.5 寄生式继承2. es6 中的继承1. ES5 中的继承 首先假设我们有一

1. ES5 中的继承

首先假设我们有一个父类 Person，并且在类的内部和原型链上各定义了一个方法：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greed = function() {
    console.log('Hello, I am ', this.name);
  }
}
Person.prototype.getInfo = function() {
  return this.name + ',' + this.age;
}

1.1 修改原型链

这是最普遍的继承做法，通过将子类的 prototype 指向父类的实例来实现：

function Student() {
}
Student.prototype = new Person();
Student.prototype.name = '夏安';
Student.prototype.age = 18;
const stud = new Student();
stud.getInfo();

在这种继承方式中，stud 对象既是子类的实例，也是父类的实例。然而也有缺点，在子类的构造函数中无法通过传递参数对父类继承的属性值进行修改，只能通过修改 prototype 的方式进行修改。

1.2 调用父类的构造函数

function Student(name, age, sex) {
  Person.call(this);
  this.name = name;
  this.age = age;
  this.sex = sex;
}
const stud = new Student('夏安', 18, 'male');
stud.greed(); // Hello, I am  夏安
stud.getInfo(); // Error

这种方式避免了原型链继承的缺点，直接在子类中调用父类的构造函数，在这种情况下，stud 对象只是子类的实例，不是父类的实例，而且只能调用父类实例中定义的方法，不能调用父类原型上定义的方法。

1.3 组合继承

这种继承方式是前面两种继承方式的结合体。

function Student(name, age, sex) {
  Person.call(this);
  this.name = name;
  this.age = age;
  this.sex = sex;
}
Student.prototype = new Person();
const stud = new Student('夏安', 18, 'male');
stud.greed();
stud.getInfo();

这种方式结合上面两种继承方式的优点，也是 node 源码中标准的继承方式。唯一的问题是调用了父类的构造函数两次，分别是在设置子类的 prototype 和实例化子类新对象时调用的，这造成了一定的内存浪费。

1.4 原型继承

利用一个空对象作为中介，将某个对象直接赋值给空对象构造函数的原型。

function createObject(o) {
  // 创建临时类
  function f() {
  }
  // 修改类的原型为o, 于是f的实例都将继承o上的方法
  f.prototype = o
  return new f()
}

这不就是Object.create吗？ createObject对传入其中的对象执行了一次浅复制，将构造函数f的原型直接指向传入的对象。同样也没有解决修改原型链的缺点。

1.5 寄生式继承

在原型式继承的基础上，增强对象，返回构造函数，或者说使用原型继承对一个目标对象进行浅复制，增强这个浅复制的能力。

function Student() {
  const clone = Object.create(Person);
  clone.name = '夏安';
  return clone;
}

同样也可以和之前的方法进行组合，这里就不再赘述。

2. ES6 中的继承

在 ES6 中可以直接使用 extends 关键字来实现继承，形式上更加简洁。我们前面也提到了，ES6 对 Class 的改进就是为了避免开发者过多地在语法细节中纠缠。

我们设计一个 student 类来继承之前定义的 person 类。

class Student extends Person {
  constructor(name, age, sex) {
    super(name, age);
    this.sex = sex;
  }
  getInfo() {
    return super.getInfo() + ',' + this.sex;
  }
  print() {
    const info = this.getInfo();
    console.log(info);
  }
}
const student = new Student('夏安', 18, 'male');
student.print(); // 夏安,18,male

在代码中我们定义了 Student 类，在它的构造方法中调用了 super 方法，该方法调用了父类的构造函数，并将父类中的属性绑定到子类上。

super 方法可以带参数，表示哪些父类的属性会被继承，在代码中，子类使用 super 继承了 Person 类的 name 以及 age 属性，同时又声明了一个 sex 属性。

在子类中，super 方法是必须要调用的，原因在于子类本身没有自身的 this 对象，必须通过 super 方法拿到父类的 this 对象，可以在 super 函数调用前尝试打印子类的 this，代码会出现未定义的错误。

如果子类没有定义 constructor 方法，那么在默认的构造方法内部自动调用 super 方法，并继承父类的全部属性。

同时，在子类的构造方法中，必须先调用 super 方法，然后才能调用 this 关键字声明其他的属性（如果存在的话），这同样是因为在 super 没有调用之前，子类还没有 this 这一缘故。

class Student extends Person {
  constructor(name, age, sex) {
    console.log(this); // Error
    super(name, age);
    this.sex = sex;
  }
}

除了用在子类的构造函数中，super 还可以用在类方法中来引用父类的方法。

class Student extends Person {
  constructor(name, age, sex) {
    super(name, age);
    this.sex = sex;
  }
  print() {
    const info = super.getInfo(); // 调用父类方法
    console.log(info);
  }
}

值得注意的是，super 只能调用父类方法，而不能调用父类的属性，因为方法是定义在原型链上的，属性则是定义在类的内部（就像组合继承那样，属性定义在类的内部）。

class Student extends Person {
  constructor(name, age, sex) {
    super(name, age);
    this.sex = sex;
  }
  getInfo() {
    return super.name; // undefinded
  }
}

此外，当子类的函数被调用时，使用的均为子类的 this（修改父类的 this 得来），即使使用 super 来调用父类的方法，使用的仍然是子类的 this。

class Person {
  constructor() {
    this.name = '夏安';
    this.sex = 'male';
  }
  getInfo() {
    return this.name + ',' + this.sex;
  }
}
class Student extends Person {
  constructor() {
    super();
    this.name = '安夏';
    this.sex = 'Female';
  }
  print() {
    return super.getInfo();
  }
}
const student = new Student();
console.log(student.print()); // 安夏,Female
console.log(student.getInfo()); // 安夏,Female

在上面的例子中，super 调用了父类的方法，输出的内容却是子类的属性，说明 super 绑定了子类的 this。

到此这篇关于javascript类的继承全面示例讲解的文章就介绍到这了,更多相关js 类的继承内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JavaScript类的继承全面示例讲解

本文链接: https://lsjlt.com/news/172032.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript类的继承全面示例讲解
    目录1. ES5 中的继承1.1 修改原型链1.2 调用父类的构造函数1.3 组合继承1.4 原型继承1.5 寄生式继承2. ES6 中的继承1. ES5 中的继承 首先假设我们有一...
    99+
    2022-11-13
    JavaScript 类的继承 JavaScript 继承
  • JavaScript继承与多继承实例讲解
    这篇文章主要介绍“JavaScript继承与多继承实例讲解”，在日常操作中，相信很多人在JavaScript继承与多继承实例讲解问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2024-04-02
  • JavaScript面向对象之class继承类案例讲解
    1. 面向对象class继承 在上面的章节中我们看到了JavaScript的对象模型是基于原型实现的，特点是简单，缺点是理解起来比传统的类－实例模型要困难，最大的缺点是继承的实现需要...
    99+
    2024-04-02
  • 举例讲解Python面向对象编程中类的继承
    python创建一个类很简单只需要定义它就可以了. class Cat: pass 就像这样就可以了，通过创建子类我们可以继承他的父类(超类)的方法。这里重新写一下cat class Cat...
    99+
    2022-06-04
    面向对象 Python
  • C++ 继承的范例讲解
    目录1.继承的概念2.继承方式3.基类与派生类的赋值转换4.作用域与隐藏5.派生类的默认成员函数6.友元与静态成员7.菱形继承与虚继承8.继承和组合1.继承的概念 继承，是面向对象的...
    99+
    2024-04-02
  • ES6 javascript中Class类继承的示例分析
    小编给大家分享一下ES6 javascript中Class类继承的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！具体如下：1. 基本用法Class 之间可以通过extends关键字...
    99+
    2024-04-02
  • python 面向对象之继承实例讲解
    面向对象编程语言具有封装、继承、多态三个基本特征，本文就继承举例详谈比如说学校主要有3大角色：学校，讲师，学员学校可以注册学员，统计有多少学员老师负责讲课学生听课，提问，学习，交学费先定义4个类：class School(obje...
    99+
    2023-01-30
    面向对象 实例 python
  • Python面向对象封装继承和多态示例讲解
    目录1. 封装2. 继承多态的实现面向对象的三大特征：封装，继承，多态 1.封装： 提高程序的安全性 将数据（属性）和行为（方法）包装到类对象中，在方法内部对属性进行对象的...
    99+
    2024-04-02
  • javascript中继承的示例分析
    这篇文章主要介绍javascript中继承的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！javascript 中的继承实例详解阅读目录原型链继承借用构造函数组合继承寄生组合...
    99+
    2024-04-02
  • Java超详细讲解类的继承
    目录写在前面1.子类的创建1.1子类的创建方法1.2调用父类中特定的构造方法2.在子类中访问父类成员3.覆盖3.1覆盖父类中的方法3.2用父类的对象访问子类的成员4.不可被继承的成员...
    99+
    2024-04-02
  • JavaScript原型继承的示例分析
    这篇文章主要介绍JavaScript原型继承的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！在传统的基于Class的语言如Java、C++中，继承的本质是扩展一个已有的Cla...
    99+
    2024-04-02
  • JavaScript组合继承的示例分析
    这篇文章主要为大家展示了“JavaScript组合继承的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript组合继承的示例分析”这篇文章吧。原型链继承父类实例作为子类的原型...
    99+
    2023-06-25
  • JavaScript 继承的真谛：揭示实例和类的区别
    ...
    99+
    2024-04-02
  • python类的继承实例详解
    python 类的继承 对于许多文章讲解python类的继承，大多数都是说一些什么oop,多态等概念，我认为这样可能对有一定基础的开发者帮助不是那么大，不如直接用在各种情况下所写的代码，来展示对于某一种代码...
    99+
    2022-06-04
    详解 实例 python
  • Python 类的继承实例详解
    Python 类的继承详解 Python既然是面向对象的，当然支持类的继承，Python实现类的继承比JavaScript简单。 Parent类： class Parent: parentAt...
    99+
    2022-06-04
    详解 实例 Python
  • JavaScript 继承的启示：从类和继承中汲取宝贵的教训
    ...
    99+
    2024-04-02
  • JavaScript 类的秘密揭示：继承的奥秘
    JavaScript 类的继承机制是理解面向对象编程的基础。 本文将深入探讨 JavaScript 类的继承，展示如何使用它来创建复杂而灵活的应用程序。 理解 JavaScript 类的继承 JavaScript 类的继承通过原型的机制实...
    99+
    2024-02-15
    JavaScript 类 继承
  • javascript中实现继承的示例分析
    小编给大家分享一下javascript中实现继承的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！类式继承//声明父类//声明父类function SuperClass() { &nbs...
    99+
    2023-06-27
  • JavaScript 类与继承的平衡：理解多重继承的复杂性
    ...
    99+
    2024-04-02
  • Javascript的类继承是什么
    本篇内容介绍了“Javascript的类继承是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！说到Jav...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作