首页 > 其他分享 >4. 前端设计模式之原型模式

4. 前端设计模式之原型模式

时间:2023-09-10 20:32:47浏览次数:46  
标签:const name 前端 Dog 原型 bark 设计模式 dog1

Prototype Pattern

原型模式: 在多个对象间共享相同的属性  

JavaScript原生支持原型链也是实现继承的基础, 如以下代码虽然是使用的ES2016新的语法classc创建的类Dog,然后又使用new实例化对象dog1、dog2、dog3,底层依然操作的原型链:

class Dog {
  constructor(name) {
    this.name = name;
  }
 
  bark() {
    return `Woof!`;
  }
}
 
const dog1 = new Dog("Daisy");
const dog2 = new Dog("Max");
const dog3 = new Dog("Spot");

创建的原型链:

4. 前端设计模式之原型模式_原型链

对象dog的__proto__属性执行Dog.prototype, 对象本身拥有name属性,但bark属性是在类中定义的,当我们调用dog1.bark时,代码执行器会先在当前对象中查找,如果没有找到就在dog1.__proto__指向的对像中查找,这样一层一层查找直到找到。

JavaScript早期并不支持Classs. 如果需要实现继承就是通过修改对象的原型指向完成。

var dog1 = {name:'dog1'}
dog1.__proto__ = {
  hello: function(){ console.log('Hello FusionZhu')}
};
dog1.hello();//print Hello FusionZhu

也可以使用Object.create在创建对象时为其指定原型

const dog = {
  bark() {
    console.log(`Woof!`);
  }
};

const pet1 = Object.create(dog);//这样pet1的原型就指向dog对象,也可以说pet1继承于dog

pet1.bark(); // Woof!

标签:const,name,前端,Dog,原型,bark,设计模式,dog1
From: https://blog.51cto.com/u_14256460/7427852

相关文章

  • 纯前端也可以访问文件系统!
    前言周末逛github的时候,发现我们只需要在github域名上加上1s他就能够打开一个vscode窗口来阅读代码,比起在github仓库中查看更加方便然后我就想网页端vscode能不能打开我本地的项目呢,带着这个疑惑我打开了网页版vscode,它居然真的可以打开我本地的项目代码!难道又出了新的API让......
  • web前端HTML中五种网页跳转的方法
    单自动跳转法对于表单大家都很熟悉,就是将表单中填写的内容,提交到action参数中指定的url地址中,目标url再对接收到的数据进行处理。利用这一点,我们可间接的实现网页跳转,只不过,我们并不需要提交任何表单内容。再结合javascript脚本,可以对表单进行自动提交。示例如下:cript>其中form1名......
  • 设计模式-中介者模式
    中介者模式定义+用一个中介对象来封装一系列的对象交互。中介者使各个对象不需要显示地互相引用,从而使耦合松散,并且可以独立地改变他们的交互。UML类图使用场景+一般用于一组对象以定义良好但复杂的方式进行通信的场景,比如窗体的Form或者web页面asp+想定制一个分......
  • 前端开发者必看:CCS选择器的使用技巧和最佳实践
    前端开发中,选择器是非常重要的一部分。CSS选择器是用于选取HTML或XML文档中特定元素的模式,通过这些模式可以控制页面的样式。在前端开发中,常用的CSS选择器有以下几种:标签选择器标签选择器是通过HTML标签名称来选取元素,例如:p{color:red;}上述代码将会把页面中所有的......
  • 趣解设计模式之《办理入职这么难吗?》
    〇、小故事小王大学毕业,经过大学期间的刻苦学习,终于成功的面试上了一家公司。按照约定的时间,小王兴高采烈的来到公司前台去办理入职手续。“您好,我是来办理入职手续的”小王对前台妹妹说,前台妹妹看都没看他一眼,顺手递给了他一个单子,带着一丝不耐烦的语气跟他说,“照着单子做就行”......
  • 如何让Android平台像网络摄像机一样实现GB28181前端设备接入?
     技术背景好多开发者在做国标对接的时候,首先想到的是IPC(网络摄像头),通过参数化配置,接入到国标平台,实现媒体数据的按需查看等操作。像执法记录仪等智能终端,跑在Android平台,对接GB28181平台的需求也非常大,网上相关demo也不少,但真正设计符合相关协议规范、功能完善、长时间稳定运......
  • Android前端音视频数据接入GB28181平台意义
    技术背景在我们研发Android平台GB28181前端音视频接入模块之前,业内听到最多的是,如何用Android端在没有国标摄像头设备的前提下,模拟GB28181的信令和媒体流交互流程,实现GB28181整体方案的测试。 Android端真的没有必要做个支持GB28181的接入模块? 如果说做一个设备端摄像头国......
  • django-前端时间组件
    1、插件的下载BootstrapDatepicker是一款基于Bootstrap框架的日期选择控件,可以方便地在Web应用中添加可交互的日期选择功能。BootstrapDatepicker拥有丰富的选项和API,支持多种日期格式,可以自定义样式并支持各种语言。BootstrapDatepicker依赖bootstrap:bootstrap.min.css......
  • 开课吧前端1期.阶段2:ES6详解-4 Promise generator-认识生成器函数 generator-yield
    10、PromisePromise--承诺异步:操作之间没啥关系,同时进行多个操作同步:同时只能做一件事优缺点异步:代码更复杂同步:代码简单 //比如我要请求4个数据,真正生产还要判断,没法看了,缩进//异步:特别麻烦ajax('/banners',function(banners)){ajax('/hotItem......
  • vue前端table列表右侧的滑动条怎样实现
    要在Vue前端table列表右侧添加滑动条,您可以使用CSSoverflow属性和::-webkit-scrollbar伪元素来实现。以下是示例代码:<template><divclass="table-container"><tableclass="table"><!--表头--><thead><tr>......