【前端】面试八股文——原型链

server/2024/10/10 12:45:40/

【前端】面试八股文——原型链

1. 什么是原型链？

在JavaScript中，每个对象都有一个原型（prototype），而原型本身又可能是另一个对象的原型。通过这种链式关系，可以实现属性和方法的继承，这就是原型链（prototype chain）。

简单来说，原型链是当我们试图访问对象的某个属性时，JavaScript引擎会首先查找对象本身，如果没有找到，则会沿着原型链逐级向上查找，直到找到该属性或到达原型链的顶端。

2. 原型与原型链的基本概念

  • 对象：JavaScript中的一切都是对象，顶层对象是Object。
  • 构造函数：用于创建对象的函数，被称为构造函数。示例：function Person(){}
  • 原型：每个构造函数都有一个prototype属性，指向一个对象。
  • 实例：通过构造函数创建的对象实例。使用new关键字。示例：const person = new Person();
  • __proto__：每个对象都有一个__proto__属性，指向创建这个对象的构造函数的原型对象。

3. 原型链的示例

function Person(name) {this.name = name;
}Person.prototype.greet = function() {console.log(`Hello, my name is ${this.name}`);
}const alice = new Person('Alice');
alice.greet();  // 输出: Hello, my name is Aliceconsole.log(alice.__proto__ === Person.prototype);  // true
console.log(Person.prototype.__proto__ === Object.prototype);  // true
console.log(Object.prototype.__proto__ === null);  // true

在上面的例子中，我们可以看到原型链是如何形成的：

  • alice的__proto__指向Person.prototype。
  • Person.prototype的__proto__指向Object.prototype。
  • Object.prototype的__proto__是null，表示原型链的顶端。

4. 常见面试题及解答方法

问题1：解释JS中的原型链？

解答：
JavaScript中的原型链是一种对象继承机制，它使得一个对象可以访问另一个对象的属性和方法。每个对象通过__proto__指针指向其原型，形成一个链式结构，最终指向null。这种机制允许我们通过原型链实现属性和方法的继承。

问题2：构造函数与原型链的关系是什么？

解答：
构造函数用于创建对象，每个构造函数都有一个prototype属性，指向一个原型对象。通过构造函数创建的对象，其__proto__属性指向构造函数的原型对象，从而形成原型链。

问题3：原型链的终点是什么？

解答：
原型链的终点是null。Object.prototype是所有对象的终极原型，其__proto__属性指向null。

问题4：如何实现继承？

解答：
JavaScript中可以通过原型链实现继承。例如，通过一个构造函数创建子类，并将其prototype属性指向另一个构造函数的实例。

function Parent() {this.parentProperty = true;
}
Parent.prototype.greet = function() {console.log('Hello from Parent');
}function Child() {Parent.call(this);  // 继承构造函数的属性
}
Child.prototype = Object.create(Parent.prototype);  // 继承原型的属性和方法
Child.prototype.constructor = Child;const child = new Child();
child.greet();  // 输出：Hello from Parent
console.log(child.parentProperty);  // true

5. 进阶：原型链性能和优化

理解原型链性能对于高级开发者至关重要。在访问属性时，查找过程会沿着原型链逐级向上，但过长的原型链可能影响性能。因此，保持适当长度的原型链和合理的对象层次结构是必要的。

6. 实际应用

1. 创建对象的共享方法
场景：避免重复定义方法

当多个实例对象需要共享相同的方法时，我们可以将这些方法定义在原型中，而不是在构造函数中重复定义。这样可以节省内存，并提高代码的可维护性和效率。

function Car(model, color) {this.model = model;this.color = color;
}Car.prototype.startEngine = function() {console.log(`${this.model}'s engine is starting...`);
};const car1 = new Car('Toyota', 'Red');
const car2 = new Car('Honda', 'Blue');car1.startEngine();  // 输出: Toyota's engine is starting...
car2.startEngine();  // 输出: Honda's engine is starting...console.log(car1.startEngine === car2.startEngine);  // true

通过将startEngine方法定义在Car的原型上，所有通过Car构造函数创建的实例都会共享这一方法，从而避免重复定义，节省内存。

2. 扩展和定制内置对象
场景：定制内置对象的方法

有时我们需要为内置对象（如数组或字符串）添加或修改方法，这可以通过修改其原型来实现。

Array.prototype.last = function() {return this[this.length - 1];
};const numbers = [1, 2, 3, 4, 5];
console.log(numbers.last());  // 输出：5

通过为Array.prototype添加last方法，所有数组实例都可以直接调用这个方法，从而在全局范围内扩展了数组对象的功能。

3. 面向对象编程
场景：实现类和继承

原型链是实现面向对象编程和继承的重要机制。在实际开发中，我们经常使用原型链来创建类和实现继承。

function Animal(name) {this.name = name;
}Animal.prototype.speak = function() {console.log(`${this.name} makes a noise.`);
};function Dog(name) {Animal.call(this, name);  // 继承构造函数的属性
}Dog.prototype = Object.create(Animal.prototype);  // 继承原型的属性和方法
Dog.prototype.constructor = Dog;Dog.prototype.speak = function() {console.log(`${this.name} barks.`);
};const dog = new Dog('Rex');
dog.speak();  // 输出：Rex barks.

通过这种方式，我们可以使用原型链实现类的继承，并在子类中覆盖父类的方法，从而实现更复杂的面向对象编程模式。

4. 实现混入（Mixin）
场景：复用代码片段

混入是一种代码复用模式，通过将一个对象的方法“混入”另一个对象或类中，来分享功能，而不是通过直接继承。

const canFly = {fly() {console.log(`${this.name} is flying.`);}
};const canSwim = {swim() {console.log(`${this.name} is swimming.`);}
};function Bird(name) {this.name = name;
}Object.assign(Bird.prototype, canFly);const bird = new Bird('Eagle');
bird.fly();  // 输出：Eagle is flying.

通过使用Object.assign方法，我们可以将多个对象的方法混入一个对象的原型中，从而实现代码复用，而不需要通过继承链的方式。

5. 实现模块化和命名空间
场景：避免命名冲突

为了避免全局命名空间污染，我们可以使用对象和原型链将功能模块化，确保每个模块有自己的命名空间。

const MyApp = {Models: {},Views: {},Controllers: {}
};MyApp.Models.User = function(name) {this.name = name;
};MyApp.Models.User.prototype.getName = function() {return this.name;
};const user = new MyApp.Models.User('Alice');
console.log(user.getName());  // 输出：Alice

通过这种方式，我们可以清晰地组织代码，避免全局命名冲突，提高代码的可读性和可维护性。


http://www.ppmy.cn/server/43163.html

相关文章

SVM兵王问题

SVM兵王问题

1.流程 前面六个就是棋子的位置，draw就是逼和，后面的数字six就代表，白棋最少用六步就能将死对方。然后呢，可以看一下最后一个有几种情况： 2.交叉测试 leave one out： 留一个样本作测试集，其余…
阅读更多...
Linux下的调试器 ： gdb指令详解

Linux下的调试器 ： gdb指令详解

🪐🪐🪐欢迎来到程序员餐厅💫💫💫 主厨：邪王真眼 主厨的主页：Chef‘s blog 所属专栏：青果大战linux 总有光环在陨落，总有新星在闪烁 gdb是什么 gdn是linu…
阅读更多...
记录一次Netty的WSS异常

记录一次Netty的WSS异常

概述 业务场景 应用通过 WSS 客户端连接三方接口。在高并发压测时，出现了请求服务器写入失败的异常，该异常是偶发，出现的概率不到千分之一，异常如下图所示。 问题概述 注意： 因为握手是通过 http 协议进行的。所以…
阅读更多...
线程池以及日志类的实现

线程池以及日志类的实现

目录 线程池: 日志类: 可变参数以及相关函数 1.va_list 2. va_start 3. va_end 日志Log类 线程池 线程池: 是一种线程使用模式。线程过多会带来调度开销，进而影响缓存局部性和整体性能。而线程池维护着多个线程，等待着 监督管理者分配可并发执行…
阅读更多...
剖析 OceanBase 应对高并发的技术策略

剖析 OceanBase 应对高并发的技术策略

推荐一个AI网站，免费使用豆包AI模型，快去白嫖👉海鲸AI 在当今互联网时代，高并发场景下的数据库处理能力成为了许多应用的关键需求。为了满足用户对快速响应和高吞吐量的期望，数据库系统需要采用一系列技术来优化并发性…
阅读更多...
【计算机网络】初识Tcp协议

【计算机网络】初识Tcp协议

💻文章目录 📄前言Tcp基础概念Tcp 的报文格式三次握手四次挥手 Tcp的滑动窗口机制概念超时重传机制高速重传 TCP传输控制机制流量控制拥堵控制慢启动 Tcp的性能优化机制延迟应答捎带应答 📓总结 📄前言 TCP三次握手、四次挥手&…
阅读更多...
lllllllllll

lllllllllll

;llllllllllllllllllll
阅读更多...
工作学习的电脑定时关机，定时重启，定时提醒

工作学习的电脑定时关机，定时重启，定时提醒

可以直接下载工具： 定时自动关机 大家好，！ 在我们学习与工作时，经常会遇到想要在完成一个任务后，再关闭电脑或对电脑重启，但这个时间点，操作电脑的人可能不能在电脑旁边，这样就需要…
阅读更多...
最新文章

Copyright @ 2022~2023