加载笔记内容...
加载笔记内容...
构造函数（Constructor） 在 JavaScript 中具有双重身份：既是普通函数，又是对象创建模板。其核心特征体现在两个方面：
User）new 操作符调用（ES6 类语法通过 Class 强化了该约束）1function Vehicle(type) {
2 this.type = type
3 this.engineStatus = 'off'
4}
5
6const car = new Vehicle('SUV') // 正确用法
7Vehicle('Sedan') // 潜在危险操作（非严格模式下污染全局对象）在 V8 引擎底层，当使用 new 调用函数时，引擎会创建特殊的隐藏类（Hidden Class） 来优化属性访问。这种机制使得多次实例化时，相同结构的对象共享隐藏类，显著提升属性访问速度。
new 操作符的实际行为可分解为四个关键步骤：
对象创建阶段
obj = Object.create(Constructor.prototype)obj.__proto__ = Constructor.prototype（现代代码建议使用 Object.getPrototypeOf）上下文绑定阶段
Constructor.call(obj, ...args)this 绑定）属性初始化阶段
返回值处理阶段
1// 手动实现 new 操作符（生产环境不推荐，仅用于理解原理）
2function customNew(Construtor, ...args) {
3 const instance = Object.create(Construtor.prototype)
4 const result = Construtor.apply(instance, args)
5 return result instanceof Object ? result : instance
6}构造函数与原型链的关系可通过以下公式表达：
1实例对象.__proto__ === 构造函数.prototype这种关联机制形成了 JavaScript 的原型继承体系。现代 JavaScript 引擎通过原型链缓存和内联缓存（Inline Caching） 优化属性查找过程。
内存优化技巧：
1function OptimizedComponent(props) {
2 this.props = props
3 // 避免在构造函数中声明方法
4}
5
6// 正确做法：将方法挂载到原型
7OptimizedComponent.prototype.render = function() {
8 return `<div>${this.props.content}</div>`
9}1class SecureLogger {
2 constructor() {
3 if (new.target !== SecureLogger) {
4 throw new Error('必须使用 new 关键字实例化')
5 }
6 // 初始化逻辑
7 }
8}| 检测方式 | 优点 | 缺陷 |
|---|---|---|
| instanceof | 原型链检测 | 跨 frame 失效 |
| constructor | 直接访问 | 可被修改 |
| Symbol.toStringTag | 精确类型标记 | ES6+ 支持 |
1function DataFetcher() {
2 this.cache = {}
3 // 忘记解绑事件监听会导致内存泄漏
4 window.addEventListener('resize', this.handleResize)
5}
6
7// 正确做法：在原型上定义方法
8DataFetcher.prototype.cleanup = function() {
9 window.removeEventListener('resize', this.handleResize)
10}1class ModernComponent {
2 constructor(props) {
3 this.props = props
4 }
5}
6
7// 转译为 ES5 等价代码
8function ModernComponent(props) {
9 if (!new.target) throw new TypeError("Cannot call a class as a function")
10 this.props = props
11}1class SecureStore {
2 #encryptionKey
3 constructor(key) {
4 this.#encryptionKey = key
5 }
6}new 创建类组件实例问题场景：忘记使用 new 导致属性挂载到全局对象
解决方案：
1function SafeModel(data) {
2 'use strict' // 启用严格模式抛出错误
3 if (!(this instanceof SafeModel)) {
4 throw new Error('必须使用 new 关键字实例化')
5 }
6 this.data = data
7}争议观点：随着工厂函数模式的复兴，部分场景下构造函数模式可能被替代。但原型系统仍是 JavaScript 的核心特性，二者将长期共存。