如何通过原型动态增加实例的公共行为？-js教程-PHP中文网

直接在构造函数原型上添加方法可让所有实例立即共享该行为，原理是javascript通过原型链查找：先查实例自身，再沿__proto__访问构造函数的prototype；方法只存一份，节省内存。

如何通过原型动态增加实例的公共行为？

直接在构造函数的原型上添加方法，就能让所有已有和未来的实例立即获得这个公共行为——不需要重新创建实例，也不需要修改类定义。

原理：原型链查找机制起作用

JavaScript 访问一个对象的方法时，会先查自身属性；找不到就顺着 __proto__ 去原型（即构造函数的 prototype）上找。只要把方法挂到原型上，所有实例共享访问入口。

新增方法对已存在实例立刻生效（因为它们共用同一原型）
后续 new 出的实例也自动继承该方法
方法只存一份，节省内存，符合“公共行为”的定位

典型写法：动态检查 + 原型赋值

避免重复添加，常配合类型判断做一次初始化：

MiniMax 媒体生成

一款AI音频处理工具，主要用于MiniMax统一媒体生成技能，用于TokenPlan工作流。当用户要求生成音频、语音、TTS、旁白、图片、插图、姿势等媒体内容时使用，适合需要提升相关任务效率的用户。

下载

function Person(name) {
  this.name = name;
  // 确保 say 方法只在原型上定义一次
  if (typeof this.say !== 'function') {
    Person.prototype.say = function() {
      console.log(`${this.name} says: hello`);
    };
  }
}
const p1 = new Person('张三');
p1.say(); // ✅ 正常调用

typeof this.say !== 'function' 判断的是实例是否已有该方法（防止多次覆盖原型）
实际添加发生在 Person.prototype，不是 this
这种模式叫“动态原型模式”，兼顾封装性与运行时灵活性

Vue 2 中的等效实践

虽然 Vue 2 已淘汰，但其全局方法注入方式本质也是操作原型：

import Vue from 'vue';
import axios from 'axios';

// 把 $http 挂到 Vue 构造函数的 prototype 上
Vue.prototype.$http = axios;

// 所有组件实例 this 都能访问 this.$http
export default {
  created() {
    this.$http.get('/api/user');
  }
}