【前端面试系列】封装 继承 多态

封装(Encapsulation)

什么是封装?

封装是面向对象编程的核心概念之一,它具有两个主要特点:

  1. 将数据和操作数据的方法绑定在一起,形成一个独立的单元
  2. 实现信息隐藏,控制对对象内部数据的访问

封装的实现方式

JavaScript中实现封装主要有以下几种方式:

1. 使用闭包实现私有属性和方法
function Person(name) {// 私有属性let _name = name;// 私有方法function _validateAge(age) {return age > 0 && age < 150;}// 公共方法this.getName = function() {return _name;};this.setName = function(newName) {_name = newName;};
}const person = new Person('张三');
console.log(person.getName()); // 输出:张三
console.log(person._name); // 输出:undefined
2. 使用Symbol实现私有属性
const nameSymbol = Symbol('name');class Person {constructor(name) {this[nameSymbol] = name;}getName() {return this[nameSymbol];}
}
3. 使用私有类字段(最新提案)
class Person {#name; // 私有字段声明constructor(name) {this.#name = name;}getName() {return this.#name;}
}

相关面试题

Q1: 什么是封装?为什么需要封装?

A: 封装是将数据和操作数据的方法捆绑在一起,并对外部隐藏实现细节的一种机制。封装的必要性:

  1. 提高代码的安全性,防止外部直接访问和修改对象内部数据
  2. 降低代码的耦合度,便于维护和修改
  3. 提供更好的代码重用性

Q2: JavaScript中如何实现私有属性和方法?

A: JavaScript中实现私有成员主要有以下几种方式:

  1. 闭包:利用函数作用域创建私有变量和方法
  2. Symbol:使用Symbol作为属性键,实现伪私有属性
  3. 命名约定:使用下划线前缀(_)表示私有成员(约定俗成)
  4. 私有类字段:使用#前缀声明真正的私有字段(新特性)

继承(Inheritance)

继承的实现方式

1. 原型链继承
function Parent() {this.name = 'parent';
}Parent.prototype.getName = function() {return this.name;
};function Child() {Parent.call(this);this.type = 'child';
}// 建立继承关系
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
2. Class继承(推荐)
class Parent {constructor(name) {this.name = name;}getName() {return this.name;}
}class Child extends Parent {constructor(name, type) {super(name);this.type = type;}getType() {return this.type;}
}

相关面试题

Q1: 原型链继承和class继承有什么区别?

A: 主要区别:

  1. 语法:class继承更清晰简洁,原型链继承较为复杂
  2. 构造函数:class必须先调用super(),原型链中使用Parent.call(this)
  3. 继承链:class继承会同时继承静态和实例属性方法,原型链继承只能继承实例属性方法
  4. 性能:class继承在现代引擎中可能有更好的优化

多态(Polymorphism)

多态的实现方式

1. 方法重写
class Animal {makeSound() {return '动物发出声音';}
}class Dog extends Animal {makeSound() {return '汪汪汪';}
}class Cat extends Animal {makeSound() {return '喵喵喵';}
}// 多态的使用
function animalSound(animal) {console.log(animal.makeSound());
}const dog = new Dog();
const cat = new Cat();animalSound(dog); // 输出:汪汪汪
animalSound(cat); // 输出:喵喵喵

相关面试题

Q1: JavaScript中如何实现多态?

A: JavaScript中实现多态主要通过以下方式:

  1. 方法重写:子类重写父类的方法
  2. 接口模拟:虽然JS没有接口,但可以通过约定来模拟接口
  3. 鸭子类型:关注对象的行为而不是类型

Q2: 什么是鸭子类型?

A: 鸭子类型是一种动态类型的概念,如果一个对象具有特定的方法和属性,我们就认为它是某种类型,而不关心它实际上是什么类型。例如:

function makeObjectSpeak(obj) {if (typeof obj.speak === 'function') {obj.speak(); // 只要对象有speak方法就可以调用}
}

总之,JavaScript中可以通过对象、构造函数和类来实现封装、继承和多态这些面向对象编程的核心概念。不同的语法和机制可以用来达到相同的目标,你可以根据项目需求和个人偏好来选择适合你的方式。

写在最后

感谢您花时间阅读这篇文章! 🙏

如果您觉得文章对您有帮助,欢迎:

  • 关注我的技术博客:徐白知识星球 📚
  • 关注微信公众号:徐白知识星球

我会持续输出高质量的前端技术文章,分享实战经验和技术心得。

共同成长

  • 欢迎在评论区留言交流
  • 有问题随时后台私信
  • 定期举办技术分享会
  • 更多精彩内容持续更新中…

让我们一起在技术的道路上携手前行! 💪

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

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

相关文章

Unity学习笔记(4):人物和基本组件

文章目录 前言开发环境新增角色添加组件RigidBody 2D全局项目设置Edit 给地图添加碰撞体 总结 前言 今天不加班&#xff0c;有空闲时间。争取一天学一课&#xff0c;养成习惯 开发环境 Unity 6windows 11vs studio 2022Unity2022.2 最新教程《勇士传说》入门到进阶&#xff…

Java项目实战II基于Spring Boot的高校教师电子名片系统的设计与实现(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 在信息化教育日益普及的今天&#xff0…

数学几百年重大错误:将无穷多各异直线误为直线y=x

黄小宁 h定理&#xff1a;点集AB≌B的必要条件是A≌B。 证&#xff1a;若AB则A必可恒等变换地变为BA≌A&#xff0c;而恒等变换是保距变换。证毕。 直线Z&#xff1a;x-y0&#xff08;x的变域是x轴&#xff09;可放大&#xff08;拉伸&#xff09;变换为直线L&#xff08;不≌Z…

刷算法题(C++)

文章目录 堆栈压栈出栈序列 深度优先搜索括号生成无重复项的全排列有重复项的全排列 动态规划跳台阶打家劫舍删除并获得点数0/1 背包问题完全背包问题小红取数 贪心算法单源最短路 堆栈 压栈出栈序列 问题&#xff1a;输入两个整数序列&#xff0c;第一个序列表示栈的压入顺序…

学习threejs,使用第一视角控制器FirstPersonControls控制相机

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️第一视角控制器FirstPerson…

LabVIEW导入并显示CAD DXF文件图形 程序见附件

LabVIEW导入并显示CAD DXF文件图形 程序见附件 LabVIEW导入并显示CAD DXF文件图形 程序见附件 - 北京瀚文网星科技有限公司 LabVIEW广泛应用于自动化、数据采集、图形显示等领域。对于涉及CAD图形的应用&#xff0c;LabVIEW也提供了一些方法来导入和显示CAD DXF文件&#x…

洛谷——顺序结构(入门)

输出字符菱形 #include <iostream> using namespace std; int main() {int n;//cin >> n;n 5;int up n / 2;int down n - up;//打印上半部分for (int i 0; i < down; i) {for (int j 0; j < down-1-i; j) {cout << " ";}for (int j 0…

Anacondan安装opencv

Anacondan安装opencv Anaconda安装opencv&#xff1a; pip install opencv-python查看安装的版本&#xff1a;复制得到的版本 4.10.0.84 conda list opencv安装opencv的扩展包opencv-contrib-python&#xff0c;而且一定是同一版本才行。 pip install opencv-contrib-python…

SQL面试题——蚂蚁SQL面试题 会话分组问题

会话分组问题 这里的分组不是简单的分组,而是会话的分组。 比如说,进入一个网站以后,可以连续的点击很多个页面,后台会记录用户的行为日志; 如果T日上午连续点击几个页面后退出了网站,直到第二天的下午才再次进入网站,单单从时间线上来看,昨天退出的那条日志跟今天进…

数据结构---详解栈

一、栈的概念和结构 栈&#xff1a;⼀种特殊的线性表&#xff0c;其只允许在固定的⼀端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&a…

TCP/IP协议,TCP和UDP区别

TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff0c;传输控制协议/互联网协议&#xff09;是一组用于计算机网络中的通信协议&#xff0c;它为数据传输提供了标准框架&#xff0c;广泛用于互联网和局域网中。TCP/IP协议包括多个层次&#xff0c;每…

Python Plotly 库使用教程

Python Plotly 库使用教程 引言 数据可视化是数据分析中至关重要的一部分&#xff0c;它能够帮助我们更直观地理解数据、发现潜在的模式和趋势。Python 提供了多种数据可视化库&#xff0c;其中 Plotly 是一个功能强大且灵活的库&#xff0c;支持交互式图表的创建。与静态图表…

怎么样绑定域名到AWS(亚马逊云)服务器

1&#xff0c;拿着你买的域名去亚马逊申请一个证书。申请证书分两种&#xff0c;一种是去亚马逊后台填域名手动申请 &#xff0c;另一种是通过API来申请&#xff0c;类似如下代码&#xff1a; 2、证验证书。有两种方式&#xff1a;一种是通过邮件&#xff0c;另一种去到域名提供…

Dubbo源码解析(三)

一、Dubbo整合Spring启动流程 Dubbo的使用可以不依赖Spring&#xff0c;但是生产环境中Dubbo都是整合到Spring中一起使用&#xff0c;所以本章就解析Dubbo整合Spring的启动流程 一、传统的xml解析方式 一、Dubbo配置解析流程 在Java 中&#xff0c;一切皆对象。在JDK 中使用…

Go:文件输入输出以及json解析

文章目录 读取用户的输入文件读写读文件写文件 文件拷贝io包中接口的概念JSON 数据格式编码解码任意的数据&#xff1a; 读取用户的输入 从键盘和标准输入 os.Stdin 读取输入&#xff0c;最简单的办法是使用 fmt 包提供的 Scan… 和 Sscan… 开头的函数 看如下的程序 func t…

机器学习小补充(加深理解)

1. 分类交叉熵损失&#xff08;Categorical Crossentropy&#xff09; 定义&#xff1a;当标签以独热编码形式表示时使用。 原理&#xff1a;在多分类问题中&#xff0c;分类交叉熵损失用于计算模型预测的概率分布与实际分布之间的差异。模型输出的预测概率通常是一个向量&am…

openresty入门教程:rewrite_by_lua_block

在OpenResty中&#xff0c;rewrite_by_lua_block 是一个强大的工具&#xff0c;它允许你在Nginx的rewrite阶段执行Lua脚本。这个阶段在Nginx处理请求的早期发生&#xff0c;通常用于修改请求URI、请求参数、请求头等&#xff0c;或者根据某些条件执行重定向、返回特定响应等。 …

nuget 管理全局包、缓存和临时文件夹

查看文件夹位置 dotnet nuget locals all --list清空数据 # Clear the 3.x cache (use either command) dotnet nuget locals http-cache --clear nuget locals http-cache -clear# Clear the 2.x cache (NuGet CLI 3.5 and earlier only) nuget locals packages-cache -clea…

【ubuntu】Geogebra

Geogebra 几何作图工具 是一款跨平台的几何作图工具软件&#xff0c; 目前已经覆盖了&#xff0c; windows&#xff0c;android&#xff0c; mac, linux 等操作系统。 Ubuntu 现状 Ubuntu 自带应用市场 Ubuntu 自带应用市场目前只有 Geogebra 4.0 版本&#xff0c; 不能画立…

Qt 编写插件plugin,支持接口定义信号

https://blog.csdn.net/u014213012/article/details/122434193?spm1001.2014.3001.5506 本教程基于该链接的内容进行升级&#xff0c;在编写插件的基础上&#xff0c;支持接口类定义信号。 环境&#xff1a;Qt5.12.12 MSVC2017 一、创建项目 新建一个子项目便于程序管理【…