web前端tips:js继承——原型链继承

这篇具有很好参考价值的文章主要介绍了web前端tips:js继承——原型链继承。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

web前端tips:js继承——原型链继承,js,web前端,前端,javascript,js,js继承

原型链继承

原型链继承是 JavaScript 中实现继承的一种方式,它通过使用原型来实现对象之间的继承关系。

在 JavaScript 中,每个对象都有一个原型(prototype),它是一个指向另一个对象的引用。当我们访问一个对象的属性时,如果该对象自身没有该属性,则会去它的原型上查找,如果原型上也没有,则会继续往上层原型查找,直到找到该属性或者到达原型链的顶端。

原型链继承就是利用这种原型链的特性来实现继承。具体步骤如下:

  1. 创建一个父类的构造函数,并定义父类的属性和方法。
  2. 创建一个子类的构造函数,并将其原型对象指向父类的实例。
  3. 在子类的构造函数中添加子类独有的属性和方法。
// 1
function Parent() {
  this.arr = [1,2,3]
}
Parent.prototype.getArr = function() {
  return this.arr
}

// 2
function Child() {
  this.name = 'Child'
}
Child.prototype = new Parent()

// 3
Child.prototype.getName = function() {
  return this.name
}

// 实例化
var child = new Child()
child.getName() // 'Child'
child.getArr() // [1,2,3]

通过以上步骤,我们就实现了子类继承父类的属性和方法,并且可以在子类中添加自己独有的属性和方法。这样,当我们创建子类的实例时,它会先在自身查找属性和方法,如果没有找到,则会去父类的原型上查找,从而实现了继承。

优点

原型链继承方式的优点在于 简单

缺点

使用原型链继承的一个缺点是,所有子类的实例都共享同一个父类的实例,这可能会导致子类实例之间相互影响。

child.arr.push(4)
child.getArr() // [1,2,3,4]

var child2 = new Child()
child2.gerArr() // [1,2,3,4],想要的结果应该是[1,2,3]

另外,如果子类需要传递参数给父类的构造函数,就无法通过直接调用父类的构造函数来实现,需要通过中间的过程来传递参数。

结语

牵手 持续为你分享各类知识和软件 ,欢迎访问、关注、讨论 并留下你的小心心❤文章来源地址https://www.toymoban.com/news/detail-605811.html

到了这里,关于web前端tips:js继承——原型链继承的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 第6集丨JavaScript 使用原型(prototype)实现继承——最佳实战3

    对于继承应用来说,主要目标是将一些现有的功能归为己有。也就是说,我们在新建一个对象时,通常首先应该继承于现有对象,然后在为其添加额外的方法和属性。对此,我们可以通过一个函数调用来完成,并且在其中混合使用我们刚才所讨论的两种方式: 使用原型继承的

    2024年02月16日
    浏览(49)
  • 第4集丨JavaScript 使用原型(prototype)实现继承——最佳实战2

    书接上集,在上集中我们给出了一个需求说明,要求利用现学的知识实现原型( prototype )继承,并且我们给出了三种实现方式。但是这三种方式各自有优缺点,都不能很好的满足要求,那是否还有其他更好的实现方式呢? 在看本文之前,诸位可以自己思考下?带着问题去学

    2024年02月12日
    浏览(47)
  • 第2集丨JavaScript 中原型链(prototype chain)与继承

    对于使用过基于类的语言(如 Java 或 C++ )的开发者来说, JavaScript 实在是有些令人困惑—— JavaScript 是动态的且没有静态类型。一切都是对象(实例)或函数(构造函数),甚至函数本身也是 Function 构造函数的实例。即使是语法结构中的“类”也只是运行时的构造函数。

    2024年02月12日
    浏览(46)
  • 什么是JavaScript中的类(Class)和继承(Inheritance)?它们与原型链继承相比有哪些优缺点?

    JavaScript中的类(Class)和继承(Inheritance)是面向对象编程的重要概念。类是一种抽象的概念,它定义了一组属性和方法,并且这些属性和方法可以在同一组对象中重复使用。继承是类之间的层次关系,其中一个类继承了另一个类的属性和方法,从而能够共享其代码和行为。 在Ja

    2024年02月12日
    浏览(58)
  • 【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇

    ⌚️⌚️⌚️个人格言:时间是亳不留情的,它真使人在自己制造的镜子里照见自己的真相! 📖Git专栏:📑Git篇🔥🔥🔥 📖JavaScript专栏:📑js实用技巧篇,该专栏持续更新中🔥🔥🔥,目的是给大家分享一些常用实用技巧,同时巩固自己的基础,共同进步,欢迎前来交流👀

    2023年04月16日
    浏览(39)
  • 【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】下篇

    ⌚️⌚️⌚️个人格言:时间是亳不留情的,它真使人在自己制造的镜子里照见自己的真相! 📖Git专栏:📑Git篇🔥🔥🔥 📖JavaScript专栏:📑js实用技巧篇,该专栏持续更新中🔥🔥🔥,目的是给大家分享一些常用实用技巧,同时巩固自己的基础,共同进步,欢迎前来交流👀

    2024年02月01日
    浏览(77)
  • web前端框架JS学习之JavaScript类型转换

    vascript有多种数据类型,如字符串、数字、布尔等,可以通过typeof语句来查看变量的数据类型。数据类型转换就是数据类型之间相互转换,比如把数字转成字符串、把布尔值转成字符串、把字符串转成数字等,这在工作也是经常碰到的。 本期我们就给大家说说web前端框架JS学

    2024年02月10日
    浏览(64)
  • SAP Fiori开发中的JavaScript基础知识15 - 原型,object,constructor,class,继承

    本文将介绍JavaScript中的核心概念 - 原型,并会介绍基于原型的应用场景object,constructor,class,继承。 本文会将这几个核心概念汇总在一篇博客中,因为这些概念是触类旁通的,希望对你有帮助。 在JavaScript中,几乎所有的东西都是对象,每个对象都有一个 特殊的内部属性

    2024年04月23日
    浏览(122)
  • js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承)

    实现原理: 子类的原型指向父类实例 。子类在自身实例上找不到属性和方法时去它父类实例(父类实例和实例的原型对象)上查找,从而实现对父类属性和方法的继承 缺点: 子类创建时不能传参(即没有实现super()的功能); 父类实例的修改会影响子类所有实例 实现原理:

    2024年02月07日
    浏览(48)
  • web前端【3】JS基础-轮播图【JavaScript、定时器、鼠标动作、自动轮播、增加和减少li列表】

    一、实验题目: 轮播图 二、实验内容简介 1.整体布局:图片、左右按钮、数字列表、添加删除按钮 2、左右箭头滚动 3、小圆点滚动 4、自动轮播 5、鼠标动作:指向和离开 6、添加与删除 三、实验过程 1. 需求分析 整体布局:设计一个轮播图,中间部分为自动轮播的图片展示

    2024年02月04日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包