JavaScript中常见的继承方式总结

yizhihongxing

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日

相关文章

  • js数组去重的hash方法

    当我们在使用 JavaScript 编程时,经常会遇到需要对数组进行去重的情况。这时候,我们可以使用 hash 方法对数组进行去重。以下是 hash 方法的完整攻略,包括原理、步骤以及示例。 什么是 hash 去重法? hash 去重法是一种对 JavaScript 数组进行去重的算法,它的原理是:利用对象属性的唯一性,将数组元素作为对象的属性名,来判断元素…

    JavaScript 2023年5月27日
    00
  • 在JS中如何判断两个对象是否相等

    在JavaScript中,判断两个对象是否相等有多种方法,取决于你对 相等 的定义以及对象属性的类型。以下是几种常见的方法:   1. 严格相等运算符 (===) 使用 === 运算符可以比较两个对象是否引用同一个对象。如果两个变量引用了同一个对象,则它们是相等的,否则它们是不相等的。例如: const obj1 = { a: 1 }; const obj2…

    JavaScript 2023年5月8日
    00
  • javaScript知识点总结(必看篇)

    首先感谢您对JavaScript知识的关注。以下是我对”javaScript知识点总结(必看篇)”的完整讲解: 1. 前言 在这篇知识点总结中,作者主要归纳了JavaScript中的核心概念和它们的实际应用。主要包括以下几个方面: 变量和数据类型 操作符和表达式 流程控制语句 函数和作用域 数组和对象 正则表达式 异步编程和Promise ES6新特性 2.…

    JavaScript 2023年5月17日
    00
  • javascript时间自动刷新实现原理与步骤

    JavaScript 时间自动刷新实现主要是通过不断更新页面上显示的日期和时间来实现,其实现步骤主要包括以下几步: 创建用于显示时间的 HTML 元素。可以使用 p 或 span 等标签,例如: <p id="time"></p> 创建用于更新时间的 JavaScript 函数。该函数需要通过定时器来不断更新时间,…

    JavaScript 2023年5月27日
    00
  • JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)

    JavaScript字符串对象 toLowerCase() 方法入门实例 toLowerCase() 方法简介 JavaScript 中的字符串对象有一个 toLowerCase() 方法,用于把字符串中的字母都转换成小写字母。该方法是字符串类型的实例方法,意味着只能通过字符串对象调用该方法。 toLowerCase() 方法语法 string.toLowe…

    JavaScript 2023年5月28日
    00
  • js DOM的事件常见操作实例详解

    js DOM的事件常见操作实例详解 前言 在web开发中,dom事件是我们经常会遇到的部分。在dom事件中,我们可以监听各种事件,如点击,键盘输入等。本文将对常见的dom事件进行详细的介绍,并提供常见操作的实例。 常见的DOM事件 以下是一些常见的DOM事件:- 鼠标事件:mousedown, mouseup, click, dblclick, mouseo…

    JavaScript 2023年6月10日
    00
  • JavaScript中清空数组的三种方法分享

    下面是详细讲解“JavaScript中清空数组的三种方法分享”的完整攻略。 JavaScript中清空数组的三种方法分享 在JavaScript中,我们经常需要清空一个数组,以便重新填充数据。本文将介绍三种方法来清空一个数组。 方法一:重置数组变量 该方法是最简单的一种方法。只需要将数组变量重新赋值为空数组即可清空该数组。 let arr = [1, 2, …

    JavaScript 2023年5月27日
    00
  • JavaScript 几种循环方式以及模块化的总结

    当我们编写JavaScript程序时,经常需要使用循环语句来遍历数组,对象,或执行一些代码块。其中常用的循环有for、while、do-while和for of等,下面进行详细讲解: for循环 for循环是最常见的循环语句,通常用于遍历数组,语法如下: for (初始化; 条件; 计数器) { //要执行的代码块 } 其中,初始化部分只在循环开始执行一次,…

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