原型,原型链,继承(圣杯模式)

经典模式和圣杯模式区别

经典模式和圣杯模式都是用于解决构造函数继承和原型继承的问题,但它们在实现继承的方式上有所不同。

经典模式是通过将子类的原型对象设置为父类的实例来实现继承,然后将子类的构造函数设置为子类本身。这样子类既可以继承父类的属性,也可以继承父类原型对象的方法。但是经典模式存在一个问题,就是每次创建子类的实例时都会调用一次父类的构造函数,导致父类的属性被重复初始化。

圣杯模式是在经典模式的基础上进行了改进,通过使用一个中间函数来实现继承。这个中间函数将父类的原型对象赋值给一个临时的构造函数,并将子类的原型对象设置为这个临时构造函数的实例。这样子类既可以继承父类原型对象的方法,又不会重复调用父类的构造函数。此外,圣杯模式还通过将子类的原型对象的constructor属性设置为子类本身来修复原型链断裂的问题。

下面是经典模式和圣杯模式的代码示例:

经典模式:

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

圣杯模式:

function Parent(name) {this.name = name;
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function inherit(C, P) {function F() {}F.prototype = P.prototype;C.prototype = new F();C.prototype.constructor = C;
}function Child(name) {Parent.call(this, name);
}inherit(Child, Parent);

经典模式和圣杯模式都是用于实现继承的方式,但圣杯模式在解决经典模式中的问题上更加优化和完善。

圣杯模式

1. 原型:

原型是JavaScript中用来实现对象之间继承关系的概念。每个JavaScript对象都有一个原型对象,它是一个普通的对象,包含了对象的属性和方法。当我们访问一个对象的属性或方法时,如果对象本身不存在该属性或方法,JavaScript会自动去原型对象中查找。

2. 原型链:

原型链是一种通过原型对象来实现对象之间继承关系的机制。每个对象都有一个原型对象,通过原型链,一个对象可以访问其原型对象的属性和方法。原型链是由一系列原型对象组成的,当我们访问一个对象的属性或方法时,JavaScript会自动沿着原型链向上查找,直到找到该属性或方法或者到达原型链的顶端。

3. 继承:

继承是一种面向对象编程中的重要概念,它允许我们创建一个新的对象,并从一个已有的对象中继承属性和方法。通过继承,我们可以避免重复编写相同的代码,提高代码的复用性和可维护性。

相应的代码示例:

a. 原型链继承:

原型链继承是一种简单的继承方式,它通过将子类的原型对象设置为父类的实例来实现继承。这样子类就可以访问父类原型对象的属性和方法。

function Parent() {this.name = 'Parent';
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function Child() {this.name = 'Child';
}Child.prototype = new Parent();var child = new Child();
child.sayHello(); // 输出: Hello, I am Child

在这个例子中,我们定义了一个父类Parent和一个子类Child。在子类中,我们将其原型对象设置为父类的实例,这样子类就可以继承父类的属性和方法。在子类的实例中,我们可以调用父类原型对象的方法。

b. 构造函数继承:

构造函数继承是一种通过调用父类的构造函数来实现继承的方式。子类通过调用父类的构造函数来继承父类的属性,并在子类的构造函数中使用call方法来调用父类的构造函数。

function Parent(name) {this.name = name;
}function Child(name) {Parent.call(this, name);
}var child = new Child('Child');
console.log(child.name); // 输出: Child

在这个例子中,我们定义了一个父类Parent和一个子类Child。在子类的构造函数中,我们使用call方法调用父类的构造函数,并将子类的实例作为this参数传递给父类的构造函数。这样子类就可以继承父类的属性。

c. 组合继承:

组合继承是一种通过同时使用原型链继承和构造函数继承来实现继承的方式。它通过将子类的原型对象设置为父类的实例,并在子类的构造函数中调用父类的构造函数来实现继承。

function Parent(name) {this.name = name;
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function Child(name) {Parent.call(this, name);
}Child.prototype = new Parent();
Child.prototype.constructor = Child;var child = new Child('Child');
child.sayHello(); // 输出: Hello, I am Child

在这个例子中,我们定义了一个父类Parent和一个子类Child。在子类的构造函数中,我们使用call方法调用父类的构造函数,并将子类的实例作为this参数传递给父类的构造函数。然后,我们将子类的原型对象设置为父类的实例,并将子类的构造函数设置为子类本身。这样子类既可以继承父类的属性,也可以继承父类原型对象的方法。

详细代码说明

a. 原型链继承:

function Parent() {this.name = 'Parent';
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function Child() {this.name = 'Child';
}Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;var child = new Child();
child.sayHello(); // 输出: Hello, I am Child

在这个例子中,我们使用Object.create()方法将子类的原型对象设置为父类的原型对象的一个副本。这样子类就可以继承父类原型对象的属性和方法。

b. 构造函数继承:

function Parent(name) {this.name = name;
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function Child(name) {Parent.call(this, name);
}var child = new Child('Child');
child.sayHello(); // 输出: TypeError: child.sayHello is not a function

在这个例子中,我们通过调用父类的构造函数来继承父类的属性,但是子类无法继承父类原型对象的方法。

c. 组合继承:

function Parent(name) {this.name = name;
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function Child(name) {Parent.call(this, name);
}Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;var child = new Child('Child');
child.sayHello(); // 输出: Hello, I am Child

在这个例子中,我们使用Object.create()方法将子类的原型对象设置为父类的原型对象的一个副本,并将子类的构造函数设置为子类本身。这样子类既可以继承父类的属性,也可以继承父类原型对象的方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/64656.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从零开始的Hadoop学习(六)| HDFS读写流程、NN和2NN工作机制、DataNode工作机制

1. HDFS的读写流程(面试重点) 1.1 HDFS写数据流程 1.1.1 剖析文件写入 (1)客户端通过 Distributed FileSystem 模块向 NameNode 请求上传文件,NameNode检查目标文件是否已存在,父目录是否存在。 &#x…

springsecurity+oauth 分布式认证授权笔记总结12

一 springsecurity实现权限认证的笔记 1.1 springsecurity的作用 springsecurity两大核心功能是认证和授权,通过usernamepasswordAuthenticationFilter进行认证;通过filtersecurityintercepter进行授权。springsecurity其实多个filter过滤链进行过滤。…

Google Services Framework 谷歌服务框架的安装以及遇到的常见问题

安装谷歌三件套: 1、Google 服务框架(Google Services Framework)下载地址: https://www.apkmirror.com/apk/google-inc/google-services-framework/ 注意一定要选择与自己手机对应的安卓系统版本的服务框架。 2、Google Play Se…

Java设计模式:四、行为型模式-05:备忘录模式

文章目录 一、定义:备忘录模式二、模拟场景:备忘录模式三、改善代码:备忘录模式3.1 工程结构3.2 备忘录模式模型结构图3.3 备忘录模式定义3.3.1 配置信息类3.3.2 备忘录类3.3.3 记录者类3.3.4 管理员类 3.4 单元测试 四、总结:备忘…

超全的数据可视化大屏设计组件库 sketch格式

随着大屏可视化设计需求的发展,可视化sketch矢量素材变得越来越受欢迎,它可以为设计师提供丰富的设计元素,帮助他们更高效更快速的完成设计任务。 大屏可视化sketch数量素材是B端可视化设计师们最佳设计资源,它可以帮助设计师轻松…

React 18 在组件间共享状态

参考文章 在组件间共享状态 有时候,希望两个组件的状态始终同步更改。要实现这一点,可以将相关 state 从这两个组件上移除,并把 state 放到它们的公共父级,再通过 props 将 state 传递给这两个组件。这被称为“状态提升”&#…

Socket交互的基本流程?

TCP socket通信过程图 什么是网络编程,网络编程就是编写程序使两台连联网的计算机相互交换数据。怎么交换数据呢?操作系统提供了“套接字”(socket)的组件我们基于这个组件进行网络通信开发。tcp套接字工作流程都以“打电话”来生…

python异常

一.什么是异常 异常是一个事件,该事件会在程序执行过程中发生,会影响程序的正常运行。一般情况下,python无法正常处理一个异常,会导致程序中断。在出现异常时,为了不影响程序的正常运行,我们需要捕获异常。…

HTML+JavaScript+CSS DIY 分隔条splitter

一、需求分析 现在电脑的屏幕越来越大,为了利用好宽屏,我们在设计系统UI时喜欢在左侧放个菜单或选项面板,在右边显示与菜单或选项对应的内容,两者之间用分隔条splitter来间隔,并可以通过拖动分隔条splitter来动态调研…

vue3 ref reactive响应式数据 赋值的问题

文章目录 vue3 ref reactive响应式数据 赋值的问题场景1:将响应式数据赋值请求后的数据错误示范:直接赋值正确写法 场景2:响应式数据解构之后失去响应式原因分析解决办法 toRefs/toRef方法创建ref引用对象 vue3 ref reactive响应式数据 赋值的问题 doing…

DBeaver 23.1.5 发布

导读DBeaver 是一个免费开源的通用数据库工具,适用于开发人员和数据库管理员。DBeaver 23.1.5 现已发布,更新内容如下. Data editor 重新设计了词典查看器面板 UI 空间数据类型:曲线几何线性化已修复 数据保存时结果选项卡关闭的问题已解决…

gitee上传本地项目bug

🤮这个破bug不知道浪费了多长时间,以前没有记录,每次都忘记,这次记下来 问题描述 gitee创建仓库,然后根据它提示的如下命令,但一直报错 原因分析: 把命令复制出来,粘贴到Sublime …

vscode 清除全部的console.log

在放页面的大文件夹view上面右键点击在文件夹中查找 console.log.*$ 注意:要选择使用正则匹配 替换为 " " (空字符串)

CSS中可继承与不可继承属性

可继承 1. 字体属性: font、font-style、font-variant、font-weight、font-size、line-height等属性是字体样式的属性,都可以被子元素继承。 2. 文本属性: color、text-indent、text-align、text-decoration、text-transform、letter-spa…

gitlab-rake gitlab:backup:create 执行报错 Errno::ENOSPC: No space left on device

gitlab仓库备份执行 gitlab-rake gitlab:backup:create报错如下: 问题分析:存储备份的空间满 解决方法: 方法1:清理存放路径,删除不需要文件,释放空间。 方法2:创建一个根目录的挂载点&#x…

C++技术点,故事解析

语言的魅力 从人类诞生开始 ,南方古猿到现代人类经历了非常多变化; 南方古猿到能人 有什么变化? 能人会使用工具,由于会使用工具 就可以获得肉类食物,当然只能吃一些动物腐肉 直到进化成直立人的晚期,在东…

vue3组合式api <script setup> props 父子组件的写法

父组件传入子组个的变量&#xff0c; 子组件是无法直接修改的&#xff0c; 只能通过 emit的方式&#xff0c; 让父组件修改&#xff0c; 之后子组件更新 <template><div class"parent">我是父组件<son :msg"msg" :obj"obj" chan…

C++之父 人生经验和建议:引领程序员走向成功的指南针

原文链接C之父 人生经验和建议&#xff1a;引领程序员走向成功的指南针 1985 年&#xff0c;Bjarne Stroustrup 首次推出了 C编程语言。 历经 38 年的岁月沉淀&#xff0c;他在与 Honeypot.io 平台的一次简短采访中分享了自己的一些人生观点&#xff0c;并幽默地表示&#xff0…

在Visual Studio 2017上配置并使用OpenGL

1 在Visual Studio 2017上配置并使用OpenGL 在GLUT - The OpenGL Utility Toolkit&#xff1a;GLUT - The OpenGL Utility Toolkit中点击“GLUT for Microsoft Windows 95 & NT users”&#xff0c;选择“If you want just the GLUT header file, the .LIB, and .DLL file…

推进数据要素化,数据云为何是“加速器”?

数据要素化&#xff0c;一个世界性难题。 相比于传统生产要素&#xff0c;数据要素具有获得非竞争性、使用非排他性等独有特征&#xff0c;在流通、产权、安全和使用等方面需要法规制度与基础设施的双重保障。 我国无疑是最早探索数据要素化的国家之一。从早期成立的各种大数…