JavaScript中常见的继承方式总结

JavaScript中常见的继承方式主要包括原型链继承、构造函数继承、组合继承、寄生组合继承、ES6类继承等,下面将详细介绍这些继承方式。

原型链继承

原型链继承是JavaScript中最为普遍的继承方式,它的基本思想是让一个构造函数的原型对象作为另一个构造函数的实例的原型,从而实现继承。其实现方式如下:

function Parent() {
    this.name = 'parent';
}

Parent.prototype.sayName = function() {
    console.log(this.name);
}

function Child() {
    this.age = 18;
}

Child.prototype = new Parent();

var child1 = new Child();
child1.sayName(); // 输出 parent
console.log(child1.age); // 输出 18

上述代码中,定义了两个构造函数:Parent和Child。Parent定义了一个属性name和一个方法sayName,Child定义了一个属性age。使用Child.prototype = new Parent()实现Child继承Parent的原型,从而实现原型链继承。

原型链继承的缺点是不能向Parent传递参数,因为在实例化的过程中,不能让子类的构造函数向Parent的构造函数传递参数。

构造函数继承

构造函数继承的基本思想是在子类构造函数的内部调用父类的构造函数。这种方式能够很好地解决原型链继承中子类实例可能会共享父类引用属性的问题,同时也能够实现向父类构造函数传递参数。其实现方式如下:

function Parent(name) {
    this.name = name;
    this.sayName = function() {
        console.log(this.name);
    }
}

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

var child1 = new Child('child', 18);
child1.sayName(); // 输出 child
console.log(child1.age); // 输出 18

上述代码中,定义了两个构造函数:Parent和Child。Parent定义了一个属性name和一个方法sayName,Child定义了一个属性age。在Child的构造函数中使用Parent.call(this, name)调用父类构造函数加入子类实例,从而实现构造函数继承。

构造函数继承的缺点是不能继承父类的原型对象,从而不能复用父类方法。同时,由于每个实例都有一个父类构造函数的副本,因此在创建大量实例时会消耗大量内存。

组合继承

组合继承结合了原型链继承和构造函数继承的优点,将两者组合到了一起。其实现方式如下:

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

Parent.prototype.sayName = function() {
    console.log(this.name);
}

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

Child.prototype = new Parent(); // 继承父类的原型对象
Child.prototype.constructor = Child;

var child1 = new Child('child', 18);
child1.sayName(); // 输出 child
console.log(child1.age); // 输出 18

上述代码中,定义了两个构造函数:Parent和Child。Parent定义了一个属性name和一个方法sayName,Child定义了一个属性age。在Child的构造函数中使用Parent.call(this, name)调用父类构造函数加入子类实例,使用Child.prototype = new Parent()继承父类的原型对象,通过Child.prototype.constructor = Child将原本指向Parent的Child.prototype.constructor指向Child本身,从而实现组合继承。

组合继承的优点是既能继承原型上的属性和方法,又能在创建实例的时候向父类传递参数。但是缺点是每次创建子类实例都要调用一次父类构造函数。

寄生组合继承

寄生组合继承是组合继承的一种优化,通过使用Object.create()方法代替new Parent()来继承父类原型对象,从而避免了重复调用父类构造函数的问题。其实现方式如下:

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

Parent.prototype.sayName = function() {
    console.log(this.name);
}

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

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

var child1 = new Child('child', 18);
child1.sayName(); // 输出 child
console.log(child1.age); // 输出 18

上述代码中,定义了两个构造函数:Parent和Child。Parent定义了一个属性name和一个方法sayName,Child定义了一个属性age。在Child的构造函数中使用Parent.call(this, name)调用父类构造函数加入子类实例,使用Child.prototype = Object.create(Parent.prototype)来继承父类原型对象,通过Child.prototype.constructor = Child将原本指向Parent的Child.prototype.construction指向Child本身,从而实现寄生组合继承。

ES6类继承

在ES6中,新增了类的概念,类似于其他语言。ES6通过class关键字提供了类的声明方式,同时还新增了extendssuper关键字来实现继承和调用父类的方法。其实现方式如下:

class Parent {
    constructor(name) {
        this.name = name;
    }

    sayName() {
        console.log(this.name);
    }
}

class Child extends Parent {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
}

var child1 = new Child('child', 18);
child1.sayName(); // 输出 child
console.log(child1.age); // 输出 18

上述代码中,使用class关键字定义了两个类:Parent和Child。在Child中使用extends关键字继承自Parent,使用super(name)调用父类构造函数初始化子类实例,从而实现了ES6类继承。

需要注意的是,ES6类继承只是一种语法糖,在底层还是使用原型链实现的。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript中常见的继承方式总结 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 浅谈JavaScript中内存泄漏的几种情况

    浅谈 JavaScript 中内存泄漏的几种情况 JavaScript 作为一门动态语言,具有自动垃圾回收机制,可以自动管理内存,以使程序运行更加高效。然而,由于某些原因,一些对象可能会无法被垃圾收集器正确回收,导致内存泄漏。本文将介绍几种常见的 JavaScript 内存泄漏情况。 1. 全局变量 在 JavaScript 中,变量分为全局变量和局部变量。…

    JavaScript 2023年6月10日
    00
  • eval(function(p,a,c,k,e,d)系列解密javascript程序

    “eval(function(p,a,c,k,e,d)系列解密javascript程序”是一种常见的JavaScript代码混淆技术,其目的是为了防止源代码被轻易的阅读和修改而被应用于网络安全或代码保护场景中。下面是其详细的攻略流程。 步骤一: 代码检测 首先需要对目标网站的页面源代码进行检测,查找是否存在 “eval(function(p,a,c,k,e,…

    JavaScript 2023年5月19日
    00
  • js实现倒计时及时间对象

    下面是详细讲解“JS实现倒计时及时间对象”的完整攻略。 时间对象 在 JavaScript 中,可以使用内置的时间对象 Date 来处理日期和时间。所以,我们可以借助 Date 对象来实现倒计时。 获取当前时间 首先,我们需要获取当前的时间。使用 new Date() 可以获取当前的日期和时间。 let now = new Date(); // 获取当前时间…

    JavaScript 2023年5月27日
    00
  • JavaScript如何获取到导航条中HTTP信息

    要获取网站的HTTP信息,可以通过JavaScript中的内置对象window对象来获取。具体的方法包括以下几个步骤: 1.使用window.location对象获取当前页面的URL地址; 2.通过获取到的URL地址字符串,使用location对象的属性来获取端口、协议、主机名等HTTP信息。 以下是用代码实现上述步骤的示例: // 获取当前页面的URL地址…

    JavaScript 2023年6月11日
    00
  • javascript:void(0)的含义及用法实例

    当我们在网页中点击一个按钮或链接时,为了防止页面刷新或跳转,常常会在href属性中使用“javascript:void(0)”这个值。那么这个值的含义以及用法实例是什么呢?接下来我们详细讲解。 含义 在javascript中,void是一个运算符,用于返回undefined。因此,使用“javascript:void(0)”就是将当前链接的默认行为赋值为“什…

    JavaScript 2023年5月28日
    00
  • JavaScript获取URL汇总

    我将为你详细讲解如何在JavaScript中获取URL。 一、获取当前页面URL 要获取当前页面的URL,在JavaScript中可以使用window.location.href属性。window.location对象包含很多元素,如协议(http、https等)、主机名、端口、路径和查询字符串等。使用window.location.href属性可以获取完整…

    JavaScript 2023年6月11日
    00
  • 微信小程序实现页面导航与传参功能详解

    下面我会详细讲解“微信小程序实现页面导航与传参功能”的完整攻略。本文过程中会包含两条示例说明。 实现页面导航 在微信小程序中,页面导航可以通过wx.navigateTo和wx.redirectTo两个API实现。 wx.navigateTo wx.navigateTo会创建一个新页面并进行导航。 wx.navigateTo({ url: ‘pages/det…

    JavaScript 2023年6月11日
    00
  • javascript事件模型介绍

    JavaScript事件模型介绍 JavaScript事件模型是一种基于浏览器内部事件循环机制的编程模型。通过事件模型,我们可以定义当某个特定事件发生时,需要执行的 JavaScript 代码。事件模型是一种异步编程的方式,它能够帮助我们编写更高效、更灵活、更交互性强的网页应用。 事件模型基本原理 事件模型基于一个事件监听器的机制,用于监视一个特定的事件是否…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部