JS Pro-深入面向对象的程序设计之继承的详解

JS Pro-深入面向对象的程序设计之继承的详解

本攻略将从以下内容入手,逐步深入探讨JavaScript面向对象编程中的继承。

  1. 原型链继承
  2. 构造函数继承
  3. 组合继承
  4. 原型式继承
  5. 寄生式继承
  6. 寄生组合式继承

原型链继承

原型链继承,顾名思义,指的是连接原型链的方式进行继承。简单来说,就是在子类的构造函数中通过关联父类的原型实现继承。

function Parent() {
  this.parentName = 'Tom';
}

Parent.prototype.sayHello = function() {
  console.log("Hello, " + this.parentName);
}

function Child() {
  this.childName = 'Jerry';
}

Child.prototype = new Parent();

Child.prototype.sayHi = function() {
  console.log("Hi, " + this.childName);
}

var child = new Child();
child.sayHello();    //输出 "Hello, Tom"
child.sayHi();       //输出 "Hi, Jerry"

构造函数继承

构造函数继承,就是通过在子类的构造函数中调用父类的构造函数实现继承。这里使用apply方法绑定this,实现让子类接受父类的私有属性。

function Parent(name) {
  this.parentName = name;
  this.sayHello = function() {
    console.log("Hello, " + this.parentName);
  }
}

function Child(name) {
  Parent.apply(this, [name]);
  this.childName = 'Jerry';
  this.sayHi = function() {
    console.log("Hi, " + this.childName);
  }
}

var child = new Child('Tom');
child.sayHello();     //输出 "Hello, Tom"
child.sayHi();        //输出 "Hi, Jerry"

组合继承

组合继承,把原型链继承和构造函数继承结合起来使用,这是一种最常用的继承方式。它通过在子类的构造函数中调用父类的构造函数,实现了继承父类的私有属性;通过将父类的原型赋值给子类的原型,实现了继承父类的共有属性和方法。

function Parent(name) {
  this.parentName = name;
}

Parent.prototype.sayHello = function() {
  console.log("Hello, " + this.parentName);
}

function Child(name) {
  Parent.call(this, name);
  this.childName = 'Jerry';
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

Child.prototype.sayHi = function() {
  console.log("Hi, " + this.childName);
}

var child = new Child('Tom');
child.sayHello();     //输出 "Hello, Tom"
child.sayHi();        //输出 "Hi, Jerry"

原型式继承

原型式继承,是通过利用已有对象创建新对象,作为形参传入,即可创建一个新对象的方式实现继承。虽然它看上去很灵活、简单,但它的继承关系是实现在对象之间的,不能描述基于类的继承,因此这种方式并不是很常用。

var obj = {
  name: 'Tom',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

var newObj = Object.create(obj);

newObj.name = 'Jerry';
newObj.sayHello();      //输出 "Hello, Jerry"

寄生式继承

寄生式继承是在原型式继承的基础上,在新创建的对象上增强属性和方法,然后再返回这个新的对象。这种技巧常常用来封装继承的过程,以便于复用。

function createObj(obj) {
  var clone = Object.create(obj);
  clone.sayHi = function() {
    console.log('Hi, ' + this.name);
  };
  return clone;
}

var obj = {
  name: 'Tom',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

var newObj = createObj(obj);
newObj.name = 'Jerry';
newObj.sayHello();     //输出 "Hello, Jerry"
newObj.sayHi();        //输出 "Hi, Jerry"

寄生组合式继承

寄生式组合继承,是组合继承的一种优化写法,它采用了在父类实例的基础上,再用子类的原型覆盖一部分父类的原型(继承父类的共有属性和方法),这样既保留了传统继承的优点,避免了多次调用父类构造函数造成的性能浪费,也修复了组合继承覆盖原型的缺点。这种实现方式是目前继承方案中最为常用的方式。

function Parent(name) {
  this.parentName = name;
}

Parent.prototype.sayHello = function() {
  console.log("Hello, " + this.parentName);
}

function Child(name) {
  Parent.call(this, name);
  this.childName = 'Jerry';
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.sayHi = function() {
  console.log("Hi, " + this.childName);
}

var child = new Child('Tom');
child.sayHello();     //输出 "Hello, Tom"
child.sayHi();        //输出 "Hi, Jerry"

以上就是JavaScript面向对象编程中继承的详细介绍,包括6种常见实现方式。在实际开发中,应根据具体需求选择适合的继承方式来完成开发任务。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS Pro-深入面向对象的程序设计之继承的详解 - Python技术站

(0)
上一篇 2天前
下一篇 2天前

相关文章

  • 一文详解如何使用node执行js文件

    一文详解如何使用node执行js文件 在本篇文章中,我们将会详细介绍如何使用 Node.js 来运行 JavaScript 代码。 Node.js 是什么 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,可以让 JavaScript 代码在服务器端运行。它提供了丰富的内置库和模块,可以轻松地构建高性能、可伸缩的网络应用…

    JavaScript 1天前
    00
  • 完美解决JS文件页面加载时的阻塞问题

    当浏览器加载 HTML 文件时,在遇到 <script> 标签时,会立即停止加载其他资源,转而加载并执行该脚本,这就是 JS 文件阻塞页面加载的问题,如果页面中的 JS 文件过多或者大小过大,将导致页面加载速度缓慢,降低用户体验。为了解决这个问题,我们可以采取以下几种方法。 1. 异步加载 JS 文件 将脚本标签的 async 属性设置为 tru…

    JavaScript 2天前
    00
  • python的pip有什么用

    下面是关于“Python的pip有什么用”的详细攻略: 1. 什么是pip pip是Python语言中一个非常常用的包管理工具,用于安装和管理Python的第三方库。它可以自动下载、安装和更新Python库,大大方便了开发者的工作。pip已经是Python3.4及以后版本的标准库之一,不需要额外安装。 2. pip的使用 安装pip 如果你使用的Python…

    JavaScript 1天前
    00
  • JavaScript实现数组对象去重的多种方法

    下面我来为大家详细讲解“JavaScript实现数组对象去重的多种方法”。 一、背景介绍 在前端开发中,我们经常需要对数组进行去重操作,以减少某些操作的时间复杂度。在JavaScript中,实现数组对象去重的方法有很多,也存在各自的优缺点。下面我将为大家介绍一些常用的去重方法以及其优缺点。 二、方法一:利用Set(ES6) 由于ES6出现了Set数据类型,所…

    JavaScript 2天前
    00
  • Javascript String对象扩展HTML编码和解码的方法

    下面是关于”Javascript String对象扩展HTML编码和解码的方法”的完整攻略: 1. HTML编码的概念 在编写HTML文件时,我们经常会使用一些特殊的字符,比如”<“、”>”、”&”等。但是,在HTML文档中,这些字符并不是直接显示出来的,因为它们被解释为HTML标签或其他功能。 如果我们需要在HTML文档中直接显示这些字…

    JavaScript 2023年5月20日
    00
  • Javascript Math LN10 属性

    JavaScript中的Math.LN10属性是一个常数,表示自然对数中10的对数。以下是关于Math.LN10属性的完整攻略,包括两个示例。 JavaScript Math对象的LN10属性 JavaScript Math对象中的LN10属性是一个常数,表示自然对数中10的对数。 下面是LN10属性语法: Math.LN10 下面是一个LN10属性的示例:…

    JavaScript 2023年5月11日
    00
  • JS中把字符转成ASCII值的函数示例代码

    下面就来详细讲解一下JS中把字符转成ASCII值的函数示例代码的完整攻略。 什么是ASCII码 在进行进一步说明之前,先给大家介绍一下ASCII码(American Standard Code for Information Interchange),也就是美国信息交换标准代码,它是一种基于拉丁字母的一套电脑编码系统,也是目前广泛使用的字符编码标准,它定义了…

    JavaScript 1天前
    00
  • 关于JavaScript数组对象去重的几种方法

    没问题,以下是关于JavaScript数组对象去重的几种方法的完整攻略。 关于JavaScript数组对象去重的几种方法 方法一:使用Set对象 Set对象可以快速去除数组中的重复元素。具体做法是将数组转换成Set对象,再将Set对象转换成数组。这种方法的优点是简洁高效,也符合函数式编程的原则。 示例代码如下: let arr = [1, 2, 3, 2, …

    JavaScript 2天前
    00
  • javascript的console.log()用法小结

    当我们在进行javascript编程时,调试代码是非常重要的一步。而在调试过程中,console.log()是我们经常用到的一个方法,它可以在浏览器的控制台中输出信息,帮助我们快速排查代码的问题。 下面是关于javascript的console.log()用法的完整攻略: 1. console.log()方法的语法 console.log()方法是javas…

    JavaScript 1天前
    00
  • JS实现的四叉树算法详解

    JS实现四叉树算法详解 什么是四叉树 四叉树是一种数据结构,在计算机科学中用于存储二维空间中的对象。四叉树允许管理大量对象,以便更快地进行搜索和查找操作。四叉树的时间复杂度为 O(log n),相对于普通的线性搜索的 O(n) 更加高效。 四叉树如何工作? 四叉树能够将二维空间分割成4个等大小的矩形,每个矩形又可以被分成4个矩形,如此递归下去,直到每个小矩形…

    JavaScript 1天前
    00