JavaScript对象与原型链深度解析

文章不知道大家是否熟悉？今天我将给大家介绍《JavaScript面向对象编程与原型链详解》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

JavaScript面向对象基于原型链，函数有prototype属性，对象有__proto__属性；prototype定义实例方法，__proto__指向构造函数的prototype；ES6 class是语法糖，底层仍依赖原型机制。

JavaScript 的面向对象编程不是“模拟”，而是基于原型的原生机制——你写的每个函数都自带 prototype，每个对象都有隐式 __proto__，这两者连起来就是原型链。

构造函数 + prototype 是最直接的类式写法

用 function Person(name) { this.name = name; } 定义构造函数后，所有实例共享的方法应挂到 Person.prototype 上，而不是在构造函数里重复创建：

• ✅ 正确：Person.prototype.say = function() { return 'Hi, ' + this.name; }; —— 方法只存一份，节省内存
• ❌ 错误：function Person(name) { this.say = function() { ... }; } —— 每个实例都新建一个函数，浪费空间
• 注意：prototype 只对函数有效；普通对象（如 {}）没有 prototype 属性，但有 __proto__

__proto__ 和 prototype 不是同一个东西

__proto__ 是对象的内部属性，指向它“从哪来”；prototype 是函数的属性，定义“它能造出什么对象”。两者通过 new 关联：

• const p = new Person('Alice'); → p.__proto__ === Person.prototype 为 true
• Person.prototype.__proto__ === Object.prototype，因为 Person.prototype 本身是个普通对象
• Object.prototype.__proto__ === null，这是原型链终点
• 别手动改 __proto__，用 Object.setPrototypeOf(obj, proto) 更安全

ES6 class 只是语法糖，底层仍是原型链

class 看起来像 Java，但编译后还是靠 prototype 和 __proto__ 运行：

class Animal {
  constructor(name) { this.name = name; }
  speak() { return this.name + ' makes a noise.'; }
}
// 等价于：
// Animal.prototype.speak = function() { ... };
// new Animal().__proto__ === Animal.prototype

• 静态方法（static method()）会挂在 Animal 函数本身，不进原型链
• extends 实际设置子类的 __proto__ 指向父类（用于继承静态方法），同时子类 prototype.__proto__ 指向父类 prototype（用于继承实例方法）
• 箭头函数不能用作构造函数，也没有 prototype 属性

原型链查找失败时不会报错，而是返回 undefined

访问对象上不存在的属性时，JS 引擎会顺着 __proto__ 一层层向上找，直到 null。这带来两个常见陷阱：

• 误判属性存在：obj.toString 总是有值（来自 Object.prototype），不能用 obj.prop !== undefined 判断是否自有属性
• 正确方式：obj.hasOwnProperty('prop') 或 Object.prototype.hasOwnProperty.call(obj, 'prop')
• 性能隐患：深层原型链（比如多次 Object.create(null) 套娃）会让属性访问变慢，尤其在高频循环中

真正容易被忽略的，是 prototype 和 __proto__ 的不对称性：前者只属于函数，后者属于所有对象；而 Object.create(null) 创建的对象连 __proto__ 都没有，彻底切断原型链。

今天关于《JavaScript对象与原型链深度解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！