首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js的继承有几种

JavaScript 中的继承主要有以下几种方式:

一、原型链继承

  1. 基础概念
    • 原型链继承是通过将一个对象的原型设置为另一个对象的实例来实现的。例如:
    • 原型链继承是通过将一个对象的原型设置为另一个对象的实例来实现的。例如:
  • 优势
    • 简单易懂,容易实现。
    • 子类可以继承父类的原型方法。
  • 应用场景
    • 适用于简单的继承关系,当不需要在子类构造函数中传递参数给父类构造函数时。
  • 问题及原因
    • 所有子类实例共享父类的属性。因为子类的原型是父类的一个实例,当父类实例中的属性被修改时,所有子类实例中的该属性都会受到影响。
    • 无法向父类构造函数传递参数。
  • 解决方法
    • 可以结合构造函数来实现部分属性的独立继承。

二、构造函数继承

  1. 基础概念
    • 在子类构造函数中调用父类构造函数来继承属性。例如:
    • 在子类构造函数中调用父类构造函数来继承属性。例如:
  • 优势
    • 可以在子类构造函数中向父类构造函数传递参数。
    • 子类实例拥有自己独立的父类属性副本。
  • 应用场景
    • 当需要在创建子类实例时根据不同情况传递不同的参数给父类构造函数时。
  • 问题及原因
    • 无法继承父类原型上的方法,因为只是调用了父类构造函数,没有涉及到原型的关联。

三、组合继承

  1. 基础概念
    • 结合了原型链继承和构造函数继承的优点。既在子类构造函数中调用父类构造函数继承属性,又将子类的原型设置为父类的一个实例来继承方法。例如:
    • 结合了原型链继承和构造函数继承的优点。既在子类构造函数中调用父类构造函数继承属性,又将子类的原型设置为父类的一个实例来继承方法。例如:
  • 优势
    • 既能够继承父类的属性(每个子类实例有独立的属性副本),又能继承父类原型上的方法。
  • 应用场景
    • 大多数需要继承父类属性和方法的情况都适用。
  • 问题及原因
    • 调用了两次父类构造函数,一次是在子类构造函数中,一次是在设置子类原型为父类实例时。

四、原型式继承

  1. 基础概念
    • 使用 Object.create 方法来创建一个新对象,这个新对象的原型是传入的对象。例如:
    • 使用 Object.create 方法来创建一个新对象,这个新对象的原型是传入的对象。例如:
  • 优势
    • 简单方便,不需要定义构造函数就可以实现继承关系。
  • 应用场景
    • 对于简单的基于对象的继承场景,不需要构造函数的情况。
  • 问题及原因
    • 同原型链继承一样,属性共享的问题存在。

五、寄生式继承

  1. 基础概念
    • 在原型式继承的基础上,对创建的新对象进行扩展。例如:
    • 在原型式继承的基础上,对创建的新对象进行扩展。例如:
  • 优势
    • 可以在创建子对象时方便地添加新的属性和方法。
  • 应用场景
    • 当需要在基于现有对象创建新对象并添加少量自定义内容时。
  • 问题及原因
    • 每次创建子对象都会创建新的方法副本,效率较低。

六、ES6类的继承

  1. 基础概念
    • 使用 class 关键字和 extends 关键字来实现继承。例如:
    • 使用 class 关键字和 extends 关键字来实现继承。例如:
  • 优势
    • 语法简洁、清晰,更接近传统的面向对象编程语言的继承方式。
    • 易于理解和维护。
  • 应用场景
    • 在现代JavaScript开发中广泛使用,适用于各种需要继承的场景。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

js实现继承的几种方式

js作为一个面向对象的弱类型语言,继承也是其非常强大的特性之一。一般情况下会出现下面的6中继承方式。...无法实现多继承 来自原型对象的引用属性是所有实例共享的 创建子类实例时,无法向父类构造函数传参 2、构造继承 核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型) function...) 缺点: 实例并不是父类的实例,只是子类的实例 只能继承父类的实例属性和方法,不能继承原型属性/方法 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能 3、实例继承 核心:为父类实例添加新特性...缺点: 效率较低,内存占用高(因为要拷贝父类的属性) 无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到) 5、组合继承(推荐) 核心:通过调用父类构造,继承父类的属性并保留传参的优点...) 6、寄生组合继承(推荐) 核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点 function Cat(name){

1.4K20

JS实现继承的几种方法总结

文章目录 一、基本代码 二、实现继承的方法: 1.原型链继承 2.构造继承: 3.实例继承 4.拷贝继承: 5.组合继承: 6.寄生组合继承: 7.class – extends – – ES6 一...(call多个父类对象) 缺点: 实例并不是父类的实例,只是子类的实例 只能继承父类的实例属性和方法,不能继承原型属性/方法 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能 ---- 3.实例继承...效率极低,内存占用高(因为要拷贝父类的属性) 无法获取父类不可枚举的方法(for in不能访问到的) ---- 5.组合继承: //核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型...,可以继承实例属性/方法,也可以继承原型属性/方法 既是子类的实例,也是父类的实例 不存在引用属性共享问题 函数可复用 可传参 缺点: 调用了俩次构造函数,生成了俩份实例(子类实例将子类原型上的那份屏蔽了...) ---- 6.寄生组合继承: //核心:通过寄生方式,砍掉父类的实例属性,这样,在调用俩次父类的构造的时候,就不会初始化俩次实例方法/属性,避免了组合继承的缺点。

1.3K40
  • 架构师JavaScript 的对象继承方式,有几种程序写法?

    架构师JavaScript 的对象继承方式,有几种程序写法? 一、对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式)。...二、原型链继承 众所周知,JavaScript 是一门基于原型的语言,在 JavaScript 中 prototype 对象的任何属性和方法都被传递给那个类的所有实例。...原型链利用这种功能来实现继承机制: 注意:调用 Parent 的构造函数,没有给它传递参数。这在原型链中是标准做法。要确保构造函数没有任何参数。...三、使用 call 或 applay 方法 这个方法是与对象冒充方法最相似的方法,因为它也是通过改变了 this 的指向而实现继承: apply 方法本人就不举列了,它和 call 方法的区别在于它的第二个参数必须是数组...六、extends 关键字实现继承 这个是 ES6 的语法糖,下面看下es6实现继承的方法: 上面代码中,子类的constructor方法没有调用super之前,就使用this关键字,结果报错,而放在super

    45420

    JS 原生方法原理探究(四):如何实现继承的几种方式?

    这是JS 原生方法原理探究系列的第四篇文章。本文会介绍如何实现 JS 中常见的几种继承方式,同时简要它们的优缺点。 实现继承的方法 ?...原型链继承和借用构造函数继承分别解决了继承父类方法和继承父类属性的问题,这两个方法结合就得到了组合继承; 原型式继承的核心是实现对象的浅拷贝并进行增强,寄生式继承则将这个过程封装成一个返回对象的函数;...Class extends 继承是 ES6 的,本质上是寄生组合式继承的一种运用 下面的示例中,SuperType 表示父类,SubType 表示继承父类的子类。...此外,对于父类原型上的方法,子类是无法继承的,因为这种继承方式并没有使用到原型。 3)组合继承 看起来,原型链继承擅长方法继承,而借用构造函数继承擅长属性继承,那么能不能取二者之长呢?...寄生组合式继承的出现是为了解决组合继承存在的一些问题,这种继承基本上是完美的了。

    1.5K20

    js的数据类型有哪几种_前端数据类型有哪几种

    大家好,又见面了,我是你们的朋友全栈君。 js的数据类型 现如今的基本数据类型(原始类型)有几种? 5?6?7?...;如下图所示: 具体js数据类型解释如下: #### 原始数据类型: - 布尔类型:布尔表示一个逻辑实体,可以有两个值:true 和 false。...在字符串中的每个元素占据了字符串的位置。第一个元素的索引为0,下一个是索引1,依此类推。字符串的长度是它的元素的数量。...- Symbols符号类型:符号(Symbols)是ECMAScript 第6版新定义的。符号类型是唯一的并且是不可修改的, 并且也可以用来作为Object的key的值(如下)....如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.9K10

    JS 继承

    继承的相关问题,比如: ES6 的 class 继承用 ES5 如何实现。...推荐阅读JS继承相关的书籍章节 《JavaScript高级程序设计第3版》第6章——面向对象的程序设计 6种继承的方案,分别是原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承...图灵社区本书地址,后文放出 github链接,里面包含这几种继承的代码 demo。...上卷第6章——行为委托和附录A(ES6中的class) 总结 继承对于JS来说就是父类拥有的方法和属性、静态方法等,子类也要拥有。...继承方法可以有很多,重点在于必须理解并熟。 悉这些对象、原型以及构造器的工作方式,剩下的就简单了。寄生组合式继承是开发者使用比较多的。

    2.9K32

    js继承

    类式继承 1.最常用的继承组合模式 —— 借用构造函数 & 设置原型 // 父类 function Parent(name) { this.name = name;...继承了父类自身的属性 继承了父类的原型属性(方法) 基于上面的问题,如果 Child.prototype 不指向 Parent的实例 new Parent(),而是指向 Parent.prototype...但是,如果直接共享原型 Child.prototype = Parent.prototype; 这样很明显是有问题的,因为对Child原型的修改,会影响到所有对象和祖先对象! 3....原型继承并不涉及到类,这里的对象都是继承自其他对象。...—— 浅复制 & 深复制 继承的目的是为了实现代码复用,所以一个对象要从另一个对象中获取功能,把目标对象的属性和方法复制过来也是一种方法。

    2.6K10

    js 继承的是什么?如何实现继承?

    继承的含义: 继承是面向对象编程中的一个重要概念,通过继承可以使子类的实例使用在父类中定义的属性和方法。...二、 构造函数继承 针对前面原型链继承可能会存在公用一个原型链的问题,那么我们可以给大家介绍一种方式:构造函数的继承。构造函数的继承相当于将父类复制给子类。...三、 组合继承 原型链继承能继承父类原型链上的属性,但是可能会存在篡改的问题;而构造函数继承不会存在篡改的问题,但是不能继承原型上面的属性。那么我们是否可以将两者进行结合呢?...六、 寄生组合式继承 前面说了这么多,每种继承方式都有自己的优点和缺点,那么是不是可以将这些继承的方式做一个合并:以他之长补己之短呢?...其实我们知道,class语法也是由es5语法来写的,其继承的方法和寄生组合式继承的方法一样。关于es6的类,我在代码自检的时候遇到的两个重点,值得注意下的是: 函数声明会提升,类声明不会。

    1.8K40

    js实现继承

    js实现继承 经典继承(原型链) 缺点:过多的继承了没用的属性 Grandfather.prototype.lastName = 'zhang' function Grandfather() {...grandfather的lastName属性,但是由于原型链的关系,造成了son既会继承grandfather自神的东西,grandfather的原型的东西,father自身的东西和father原型上的东西...,造成了不必要的继承 共享原型 本质:重写原型对象 优点:只会继承父的原型,不会继承父原本自带的属性或方法(只有调用new Father()才会继承自身的东西) 缺点:给本身的原型添加属性或方法时,会把继承的那个原型也修改了...) 原理:在函数里面调用函数,约等于将父里面的代码复制粘贴到子里面,然后通过call将父的this改成子的this 缺点: 不能继承借用的构造函数的原型 每次调用子构造函数都要调用多一次借用的父构造函数...) 雏形 本质:重写原型对象 优点:只会继承父的原型,不会继承父原本自带的属性或方法(只有调用new Father()才会继承自身的东西) 缺点:1,这样继承后即使修改了son的原型也不会修改father

    5.3K20

    JS实现继承的方式

    JS实现继承的方式 构造函数继承 原型继承 组合(构造函数+原型)继承 Class继承 ---- 构造函数继承 构造函数继承的关键:在Child构造函数中执行Parent.call(this)...组合继承 组合继承的关键: 1.属性使用构造函数继承 - 避免了原型继承中Parent引用属性被所有Child实例共享的缺陷。...(this)),降低效率,且如果Parent构造函数有副作用,重复调用可能造成不良后果。...2.子类有constructor class Chinese extend Person{ constructor(skin, language, position){ super(skin...因为子类没有自己的this对象,而是继承父类的this对象。如果不调用super函数,子类就得不到this对象。super()作为父类的构造函数,只能出现在子类的constructor()中。

    2.1K20

    Js继承的实现方式

    Js继承的实现方式 继承是面向对象软件技术当中的一个概念,与多态、封装共为面向对象的三个基本特征。继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。...// 判断child的构造函数Child的prototype对象是否在Parent的原型链上 特点 父类新增原型方法与属性,子类都能访问到 非常纯粹的继承关系,实例是子类的实例,也是父类的实例 子类实例可以继承父类构造函数属性和方法...不足 实例并不是父类的实例,只是子类的实例 只继承了父类的构造函数的属性和方法,没有继承父类原型的属性和方法 每个子类都有父类实例函数的副本,拷贝了父类函数而不是引用,影响性能 实例继承 为父类实例增加成员与方法...new Child()或直接调用Child() 不足 不支持多继承 实例是父类的实例,不是子类的实例 同样也是将父类的成员与方法做了实例化拷贝 拷贝继承 通过直接将父类的属性拷贝到子类的原型中实现继承...父类新增原型方法与属性,子类都能访问到 不足 不能继承父构造函数的实例对象的成员 所有子类实例都会共享父类的原型对象中的属性 组合继承 组合原型链继承和借用构造函数继承,结合了两种模式的优点,传参和复用

    2K20

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券