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__ 运行:
立即学习“Java免费学习笔记(深入)”;
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__ 都没有,彻底切断原型链。