【JavaScript】手写 Object.prototype.toString()

🔧 ​​一、核心实现原理​

  1. ​内部逻辑​

    • 访问对象的 Symbol.toStringTag 属性(ES6+)或内部 [[Class]] 属性(ES5 及之前)。
    • 若属性不存在,根据对象类型推断默认标签(如 "Object""Array")。
    • 返回拼接字符串 "[object " + tag + "]"
  2. ​关键特性​

    • ​不可直接调用​ :需通过 call/apply 绑定 this 指向目标对象。
    • ​优先级​Symbol.toStringTag > 内置 [[Class]] 属性。

✨ ​​二、完整代码实现​

复制代码
Object.defineProperty(Object.prototype, 'toString', {
  value: function() {
    // 1. 处理 null 和 undefined
    if (this === null) return '[object Null]';
    if (this === undefined) return '[object Undefined]';

    // 2. 获取 Symbol.toStringTag 或内部 [[Class]]
    const tag = 
      Symbol.toStringTag in Object(this) 
        ? this[Symbol.toStringTag] 
        : Object.prototype.toString.getInternalClass(this);

    // 3. 返回格式化字符串
    return `[object ${tag}]`;
  },
  writable: true,
  configurable: true
});

// 辅助方法:模拟内部 [[Class]] 检测
Object.prototype.toString.getInternalClass = (obj) => {
  if (Array.isArray(obj)) return 'Array';
  if (obj instanceof Date) return 'Date';
  if (obj instanceof RegExp) return 'RegExp';
  // 其他内置类型判断...
  return 'Object'; // 默认值
};

🧪 ​​三、功能验证​

1. ​​基本类型检测​
复制代码
console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call(new Date())); // [object Date]
console.log(Object.prototype.toString.call(null)); // [object Null]
2. ​​自定义类型标签​
复制代码
class MyClass {
  get [Symbol.toStringTag]() { return 'MyClass'; }
}
console.log(Object.prototype.toString.call(new MyClass())); // [object MyClass]
3. ​​避免重写影响​
复制代码
const arr = [];
arr.toString = () => "Overridden!";
console.log(Object.prototype.toString.call(arr)); // 仍输出 [object Array]

⚠️ ​​四、注意事项​

  1. ​兼容性处理​

    • 旧版浏览器(如 IE)需手动实现 Symbol.toStringTagPolyfill
    • 内部 [[Class]] 在 ES5 后不再直接暴露,需通过类型推断模拟。
  2. ​性能优化​

    • 避免频繁调用:每次调用涉及原型链查找和字符串拼接,对性能敏感场景慎用。
  3. ​与重写方法的区别​

    • 直接调用 obj.toString() 可能被重写逻辑覆盖,而 Object.prototype.toString.call(obj) 始终访问原始方法。

💡 ​​五、应用场景​

  1. ​精准类型判断​

    替代 typeofinstanceof,统一处理基本类型和对象类型:

    复制代码
    function getType(obj) {
      return Object.prototype.toString.call(obj).slice(8, -1);
    }
    getType(new Map()); // "Map"
  2. ​自定义对象描述​

    通过 Symbol.toStringTag 控制调试信息输出:

    复制代码
    class NetworkError {
      get [Symbol.toStringTag]() { return 'NetworkError'; }
    }
    console.log(new NetworkError() + ""); // [object NetworkError]

相关推荐
岳哥i4 小时前
vue鼠标单机复制文本
javascript
jacGJ4 小时前
记录学习--文件读写
java·前端·学习
毕设源码-赖学姐5 小时前
【开题答辩全过程】以 基于WEB的实验室开放式管理系统的设计与实现为例,包含答辩的问题和答案
前端
幻云20105 小时前
Python深度学习:从筑基到登仙
前端·javascript·vue.js·人工智能·python
我即将远走丶或许也能高飞7 小时前
vuex 和 pinia 的学习使用
开发语言·前端·javascript
钟离墨笺7 小时前
Go语言--2go基础-->基本数据类型
开发语言·前端·后端·golang
爱吃泡芙的小白白7 小时前
Vue 3 核心原理与实战:从响应式到企业级应用
前端·javascript·vue.js
卓怡学长8 小时前
m115乐购游戏商城系统
java·前端·数据库·spring boot·spring·游戏
码上成长8 小时前
JavaScript 数组合并性能优化:扩展运算符 vs concat vs 循环 push
开发语言·javascript·ecmascript
老陈聊架构8 小时前
『AI辅助Skill』掌握三大AI设计Skill:前端独立完成产品设计全流程
前端·人工智能·claude·skill