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日

相关文章

  • JSON与JS对象的区别与对比

    JSON和JavaScript对象都是在Web应用程序中处理数据的重要方式。虽然它们看上去很相似,但它们有着不同的特性和适用场景。下面是关于JSON与JS对象的区别与对比的详细说明。 什么是JS对象? JS对象是一种数据类型。它是所有JS基本类型之一,可以通过定义一个变量并使用构造函数Object()来创建对象。例如: var person = new Ob…

    JavaScript 2023年5月27日
    00
  • JavaScript操作DOM元素的childNodes和children区别

    当操作网页中的DOM元素时,常常需要获取元素的子元素以及对这些子元素进行操作。在JavaScript中,有两个常用的属性用于获取DOM元素的子元素,分别是childNodes和children。虽然它们的功能类似,但也有一些区别。下面我们进行一一讲解。 childNodes属性 childNodes属性返回某一元素的所有子节点,包括文本节点。这个属性返回的对…

    JavaScript 2023年6月11日
    00
  • TreeView无刷新获取text及value实现代码

    TreeView是Web开发中经常使用的一种树形控件,它可以在Web页面上展示层级数据结构,同时提供交互式的视图操作。本文将介绍如何使用无刷新技术获取TreeView的text与value的值,并实现基本的交互功能,包括单选、多选等。 一、前置知识 在使用无刷新技术之前,需要掌握以下知识: HTML基础知识,了解如何布局Web页面; JavaScript基础…

    JavaScript 2023年6月11日
    00
  • Discuz .net版本中的短消息系统

    Discuz .net是一款知名的论坛程序,其短消息系统是其重要的功能之一。本文将详细讲解Discuz .net版本中的短消息系统,包括如何创建、管理和使用短消息系统。 创建和启用短消息系统 在Discuz .net中,默认情况下是已经启用了短消息系统的,而且用户可以在论坛的任何页面中通过左上角的“短消息”链接进入短消息系统。如果管理员需要修改短消息系统的设…

    JavaScript 2023年6月11日
    00
  • JavaScript实现页面定时刷新(定时器,meta)

    下面是JavaScript实现页面定时刷新的完整攻略。 一、使用JavaScript定时器实现页面定时刷新 JavaScript定时器是一个非常常见的JavaScript特性,可以让你重复执行一段JavaScript代码片段。结合定时器和location.reload()方法,可以非常简单地实现页面定时刷新。 以下是使用JavaScript定时器实现页面定时…

    JavaScript 2023年6月11日
    00
  • 收藏Javascript中常用的55个经典技巧

    收藏Javascript中常用的55个经典技巧 介绍 本文收集了Javascript中常用的55个经典技巧,每个技巧都包含简短的代码示例和详细的解释。这些技巧旨在帮助Javascript开发者提高他们的编程技能。 主要内容 以下是本文中包含的55个Javascript技巧: 数组去重 javascriptconst arr = [1, 2, 3, 3, 4,…

    JavaScript 2023年5月18日
    00
  • 温习Javascript基础语法之词法结构

    下面是详细讲解“温习Javascript基础语法之词法结构”的完整攻略: 什么是词法结构? 在Javascript中,词法结构指的是一段代码中各种符号和关键字的组合。这包括变量名、函数名、运算符、括号等等。词法结构决定了一段代码的意义和行为。 Javascript标识符 Javascript标识符是指命名变量、函数、参数和属性等的标识符。Javascript…

    JavaScript 2023年6月1日
    00
  • ElementUI中Tree组件使用案例讲解

    下面是ElementUI中Tree组件使用的完整攻略。 1. Tree组件介绍 Tree组件是ElementUI中用来展示树形数据结构的组件。它可以帮助我们方便地展示复杂的数据,简化用户的交互流程。 2. Tree组件的基本使用 使用Tree组件的前提是需要安装ElementUI库,可以通过以下命令安装: npm install element-ui -S …

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