如何用javascript实现面向对象编程?_原型和原型链是如何工作的?【教程】

11次阅读

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

如何用javascript实现面向对象编程?_原型和原型链是如何工作的?【教程】

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.prototypetrue
  • 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__ 都没有,彻底切断原型链。

text=ZqhQzanResources