JavaScript实现继承的4种方法总结

yizhihongxing

JavaScript实现继承的4种方法总结

在JavaScript中实现继承有多种方法,常见的有原型链继承、借用构造函数继承、组合继承和寄生组合式继承。下面会一一介绍这些方法。

1. 原型链继承

原型链继承是JavaScript中最常见的继承方式,它的实现方式非常简单。我们可以通过将子类(派生类)的原型对象(prototype)设置为父类(基类)的实例对象,从而实现继承。

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

Parent.prototype.sayHello = function() {
  console.log('Hello, I am ' + this.name);
}

function Child() {}

Child.prototype = new Parent();

var child = new Child();

console.log(child.name); // "parent"
child.sayHello(); // "Hello, I am parent"

在上面的代码中,我们通过将Child的prototype属性设置为Parent类的实例对象,实现了Child类继承Parent类的属性和方法。

但是采用原型链继承有一个缺点,如果子类(派生类)修改了继承来的属性或方法,那么也会影响到父类(基类)的同样的属性或方法。

2. 借用构造函数继承

借用构造函数继承是通过在子类中调用父类的构造函数来实现继承的。这样做的好处是可以避免原型链继承的缺点,但是它也有一个缺点,那就是不能继承父类原型对象中的属性和方法。

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

function Child() {
  Parent.call(this);
  this.sex = 'male';
}

var child = new Child();

console.log(child.name); // "parent"
console.log(child.sex); // "male"
console.log(child.age); // 30

var parent = new Parent();

console.log(parent.name); // "parent"
console.log(parent.age); // 30
console.log(parent.sex); // undefined

在上面的代码中,我们使用了Parent.call(this),也就是在子类Child的构造函数中调用了父类Parent的构造函数,这样就可以借用父类的属性和方法。

3. 组合继承

组合继承是综合了原型链继承和借用构造函数继承的优点,它实现了既能继承父类原型对象中的属性和方法,又不会影响父类的同样的属性或方法和继承父类构造函数中的属性和方法。

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

Parent.prototype.sayHello = function() {
  console.log('Hello, I am ' + this.name);
}

function Child() {
  Parent.call(this);
  this.sex = 'male';
}

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

var child = new Child();

console.log(child.name); // "parent"
console.log(child.sex); // "male"
console.log(child.age); // 30
child.sayHello(); // "Hello, I am parent"

在上面的代码中,我们定义了一个Parent类和一个Child类,先通过借用构造函数继承继承父类构造函数中的属性和方法,再通过将Child的prototype属性设置为Parent类的实例对象实现继承父类原型对象中的属性和方法。在设置完Child的prototype对象之后,需要将其constructor设置为Child。

4. 寄生组合式继承

寄生组合式继承是组合继承的优化版,它通过寄生方式来继承父类原型对象中的属性和方法,避免了父类构造函数中重复调用已经存在于原型中的方法。

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

Parent.prototype.sayHello = function() {
  console.log('Hello, I am ' + this.name);
}

function Child() {
  Parent.call(this);
  this.sex = 'male';
}

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

var child = new Child();

console.log(child.name); // "parent"
console.log(child.sex); // "male"
console.log(child.age); // 30
child.sayHello(); // "Hello, I am parent"

在上面的代码中,我们使用了Object.create()方法,将Child的prototype对象设置为Parent.prototype的一个副本。这样做可以避免父类构造函数中重复调用已经存在于原型中的方法。

总结:

  1. 原型链继承:简单、易用,但有一个严重的缺点,就是很容易出现父类对象的属性被子类修改的情况。
  2. 借用构造函数继承:可以避免原型链继承的缺点,但是不能继承父类原型对象中的属性和方法。
  3. 组合继承:综合了原型链继承和借用构造函数继承的优点,实现了完美继承。
  4. 寄生组合式继承:组合继承的优化版,用寄生方式来继承父类原型对象中的属性和方法。

以上是JavaScript实现继承的4种方法总结,希望对你有帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实现继承的4种方法总结 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 一篇文章搞定iOS的Cookie存取

    一篇文章搞定iOS的Cookie存取 什么是Cookie Cookie是浏览器保存在客户端的一种数据,原本是为了解决HTTP协议无状态的问题而出现的。随着互联网技术的发展,Cookie的应用场景变得越来越广泛,现在已经成为了网站进行用户识别和状态管理的常见手段。 iOS中如何实现Cookie存取 iOS中要实现Cookie的存取,可以使用NSHTTPCook…

    JavaScript 2023年6月11日
    00
  • JS遍历DOM文档树的方法实例详解

    下面是关于“JS遍历DOM文档树的方法实例详解”的完整攻略。 标题 JS遍历DOM文档树的方法实例详解 简介 在编写JavaScript代码时,遍历DOM文档树是非常常见的操作。例如,查找某个元素、对所有子元素进行操作等等。本文将介绍以下5个遍历DOM文档树的方法: getElementById getElementsByTagName getElement…

    JavaScript 2023年5月28日
    00
  • jQuery插件formValidator自定义函数扩展功能实例详解

    下面是详细的攻略: jQuery插件formValidator自定义函数扩展功能实例详解 什么是formValidator插件? formValidator是一款基于jQuery的验证插件,它可以用于对表单中的各种表单元素进行验证,如文本框、下拉框、复选框等。formValidator插件支持常见的验证功能,如非空、长度范围、正则表达式等,并且具有灵活、易用…

    JavaScript 2023年6月10日
    00
  • 浅谈javascript中return语句

    当在JavaScript中编写函数时,有时需要将函数的结果返回到调用函数的地方。这就是使用return语句的情况。 return语句允许我们从函数中返回一个值,并将其放回到调用函数的行。在本文中,我们将讨论JavaScript中的return语句及其用法。 什么是return语句 JavaScript中的return语句指定函数应该返回的值。如果一个函数没有…

    JavaScript 2023年6月11日
    00
  • element-ui表格合并span-method的实现方法

    下面是”element-ui表格合并span-method的实现方法 “的完整攻略。 1. 简介 在使用 Element UI 表格组件时,经常遇到需要对表格进行合并单元格的操作。Element UI 表格提供了 span-method 方法来实现单元格合并,可以按行或列进行合并。span-method 方法的作用是在表格初始渲染和数据更新时对单元格进行合并…

    JavaScript 2023年6月10日
    00
  • JS使用ajax方法获取指定url的head信息中指定字段值的方法

    要使用JS获取指定URL的Head信息中指定字段值,需要使用Ajax方法,具体操作流程如下: 创建XMLHttpRequest对象 XMLHttpRequest对象是用于在后台与服务器交换数据的核心技术之一,能够在不刷新页面的情况下更新网页的局部信息。 const xhr = new XMLHttpRequest(); 用open方法指定请求信息 open方…

    JavaScript 2023年6月11日
    00
  • 用js实现in_array的方法

    下面我将详细讲解如何用JS实现in_array的方法。 一、in_array的功能 首先,我们先来介绍一下in_array的功能。in_array是PHP语言中用来检查一个值是否在一个数组中的方法,其返回值为布尔类型,即true或false。如果该值存在于该数组中,则返回true,否则返回false。 例如,我们有一个数组arr,其中包含了3个元素:[1,2…

    JavaScript 2023年5月27日
    00
  • JS定时器实现数值从0到10来回变化

    实现数值从0到10来回变化,可以通过JavaScript中的定时器来实现。具体步骤如下: 使用JavaScript的setInterval()方法创建一个定时器。该方法接受两个参数:要执行的代码块和时间间隔,单位是毫秒。 创建一个计数器变量,初始值设为0,每当定时器触发时,将计数器加1,并将该数值显示在页面上。 设定一个条件,当计数器的值为10时,将其减1,…

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