首页 > 其他分享 >web 前端 tips:js 继承 —— 组合继承

web 前端 tips:js 继承 —— 组合继承

时间:2023-09-15 18:33:55浏览次数:33  
标签:web 继承 型式 js 对象 原型 child 属性

输入图片描述

上篇文章给大家分享了 js继承中的 组合继承

web前端tips:js继承——组合继承

今天给大家分享一下 js 继承中的 原型式继承

原型式继承

JavaScript的原型式继承是一种基于对象的继承方式,通过复制一个对象的属性和方法来创建一个新对象,并将原对象作为新对象的原型。这种继承方式可以通过Object.create()方法来实现。

基本步骤:

  1. 创建一个原型对象 parent,作为新对象的原型。原型对象可以是任意一个已有的对象。

  2. 创建一个新对象 child,然后使用 Object.create() 方法创建一个新对象,并将原型对象作为参数传入。

  3. 可选地,可以为新对象添加/修改属性和方法。

// 1
var parent = {
  name: "Parent",
  sayHello: function() {
    console.log("Hello, " + this.name + "!");
  }
};

// 2
var child = Object.create(parent);
child.name = "Child";

// 3
child.age = 10;
child.sayAge = function() {
  console.log("I am " + this.age + " years old.");
};

// 测试
child.sayHello(); // 输出 "Hello, Child!"
child.sayage(); // 输出 "I am 10 years old."

通过这种方式,子对象 child 拥有了自己的变量 age 和方法 sayAge ,同时也继承了父对象 parent 的属性和方法。

需要注意的是,子对象的属性和方法会覆盖原型对象的同名属性和方法。在访问属性或方法时,会先在子对象中查找,如果找不到再沿着原型链向上查找。因此,当我们调用child.sayHello()时,会输出"Hello, Child",而不是"Hello, Parent"。

优点

  • 灵活性:原型式继承不需要定义构造函数,可以在不创建构造函数的情况下快速创建对象并继承属性和方法。这种灵活性使得原型式继承适用于简单的继承需求。

  • 简单易懂:原型式继承的概念相对简单,容易理解和实现。它是基于JavaScript的原型机制,与JavaScript的对象模型紧密相关。

  • 可扩展性:通过修改原型对象,可以动态地为所有继承自该原型的对象添加新的属性和方法。这使得原型式继承具有较高的可扩展性。

缺点

  • 共享原型:原型式继承是一种浅拷贝的方式,即新对象与原型对象共享同一个原型。如果修改了原型对象的属性或方法,所有继承自该原型的对象都会受到影响。这可能导致意外的副作用,特别是在多个对象之间共享原型时。

  • 无法实现多级继承:原型式继承无法直接实现多级继承,即无法直接继承父对象的原型。如果需要实现多级继承,可能需要使用其他继承方式,如组合继承或类继承。

  • 难以追踪继承关系:由于原型式继承是基于原型链的,继承关系可能变得复杂且难以追踪。当对象之间存在多层继承关系时,可能需要花费更多的时间和精力来理清继承关系。

总的来说,原型式继承是一种简单而灵活的继承方式,适用于简单的继承需求。然而,它也有一些限制和潜在的问题,需要在使用时仔细考虑和处理。对于更复杂的继承需求,可能需要考虑其他继承方式。

结语

牵手 持续为你分享各类知识和软件 ,欢迎访问、关注、讨论 并留下你的小心心❤

标签:web,继承,型式,js,对象,原型,child,属性
From: https://blog.51cto.com/u_15994752/7484710

相关文章

  • Web阶段:第三章:JavaScript语言
    《JavaScript语言精粹》点击下载,密码:synuJavaScript介绍:1.Javascript语言诞生主要是完成页面的数据验证。2.它运行在客户端,需要运行浏览器来解析执行JavaScript代码。3.JS是Netscape网景公司的产品,最早取名为LiveScript;为了吸引更多java程序员。更名为javascript。4.JS是弱类型......
  • threejs 4纹理
     ......
  • threejs 5材质
     ......
  • Web阶段:第四章:常用的正则表达式
    整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$只能输入数字:”^[0-9]*$”只能输入n位的数字:”^\d{n}$”只能输入至少n位的数字:”^\d{n,}$”只能输入m~n位的数字:”^\d{m,n}$”只能输入零和非零开头的数字:”^(0|[1-9][0-9]*)$”。只能输入有两位小数的正实数:”^[0-9]+(.[0-9]{2})?$”。只能......
  • HarmonyOS应用开发Web组件基本属性应用和事件
    一、Web组件概述Web组件用于在应用程序中显示Web页面内容,为开发者提供页面加载、页面交互、页面调试等能力。● 页面加载:Web组件提供基础的前端页面加载的能力,包括加载网络页面、本地页面、Html格式文本数据。● 页面交互:Web组件提供丰富的页面交互的方式,包括:设置前端页面深色模......
  • Web阶段:第五章:JQuery库
    Jquery介绍1.什么是JQuery?jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。2.JQuery核心思想:它的核心思想是writeless,domore(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。3.JQuery流行程度jQuery现在已经成为最流行的javascript库......
  • webrc中的dtls
    简介DTLS(DatagramTransportLayerSecurity)是基于UDP场景下数据包可能丢失或重新排序的现实情况下,为UDP定制和改进的TLS协议。在WebRTC中使用DTLS的地方包括两部分:协商和管理SRTP密钥和为DataChannel提供加密通道。DTLS协议由两层组成:Record协议和Handsh......
  • Web阶段:第八章:Servlet上
    Servlet技术a)什么是Servlet1、Servlet是一个接口(JavaEE规范)2、Servlet是运行在服务器(Tomcat或其他的服务器)上的小程序。3、Servlet程序用来接收用户的请求,和给客户端响应数据。(接收请求,回传响应)b)手动实现Servlet程序1、编写一个类去实现Servlet接口2、实现接口中的service方法3......
  • 使用threejs创建一个长方体
    //创建设备正方体//x1X轴坐标y1Y轴坐标item设备的信息可以把item嵌入到正方体里面h:高度privateinitQuare1(x1:any,y1:any,item:any,h:any){vargeometry=newTHREE.BoxGeometry(0.5,1,0.5);//确定颜色根据设备的状态动态显示正方体......
  • [转]全国城市邮编json格式
    使用时引入importcityfrom'./city.json'即可得到的city即可使用全国城市邮编json格式[{ "label":"北京市", "value":"110000", "children":[{ "label":"市辖区", "value":"110100&quo......