【前端面试系列】封装 继承 多态
封装（Encapsulation）
什么是封装？
封装是面向对象编程的核心概念之一，它具有两个主要特点：
- 将数据和操作数据的方法绑定在一起，形成一个独立的单元
- 实现信息隐藏，控制对对象内部数据的访问
封装的实现方式
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: 封装是将数据和操作数据的方法捆绑在一起，并对外部隐藏实现细节的一种机制。封装的必要性：
- 提高代码的安全性，防止外部直接访问和修改对象内部数据
- 降低代码的耦合度，便于维护和修改
- 提供更好的代码重用性
Q2: JavaScript中如何实现私有属性和方法？
A: JavaScript中实现私有成员主要有以下几种方式：
- 闭包：利用函数作用域创建私有变量和方法
- Symbol：使用Symbol作为属性键，实现伪私有属性
- 命名约定：使用下划线前缀（_）表示私有成员（约定俗成）
- 私有类字段：使用#前缀声明真正的私有字段（新特性）
继承（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: 主要区别：
- 语法：class继承更清晰简洁，原型链继承较为复杂
- 构造函数：class必须先调用super()，原型链中使用Parent.call(this)
- 继承链：class继承会同时继承静态和实例属性方法，原型链继承只能继承实例属性方法
- 性能：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中实现多态主要通过以下方式：
- 方法重写：子类重写父类的方法
- 接口模拟：虽然JS没有接口，但可以通过约定来模拟接口
- 鸭子类型：关注对象的行为而不是类型
Q2: 什么是鸭子类型？
A: 鸭子类型是一种动态类型的概念，如果一个对象具有特定的方法和属性，我们就认为它是某种类型，而不关心它实际上是什么类型。例如：
function makeObjectSpeak(obj) {
if (typeof obj.speak === 'function') {
obj.speak(); // 只要对象有speak方法就可以调用
}
}
总之，JavaScript中可以通过对象、构造函数和类来实现封装、继承和多态这些面向对象编程的核心概念。不同的语法和机制可以用来达到相同的目标，你可以根据项目需求和个人偏好来选择适合你的方式。
写在最后
感谢您花时间阅读这篇文章! 🙏
如果您觉得文章对您有帮助,欢迎:
- 关注我的技术博客：徐白知识星球 📚
- 关注微信公众号：徐白知识星球
我会持续输出高质量的前端技术文章,分享实战经验和技术心得。
共同成长
- 欢迎在评论区留言交流
- 有问题随时后台私信
- 定期举办技术分享会
- 更多精彩内容持续更新中…
让我们一起在技术的道路上携手前行! 💪
原文地址：https://blog.csdn.net/qq_35732986/article/details/143715696
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！