讲师中心 微信公众号
AI工具推荐 视频效率加速

为什么Javascript的面向对象与基于原型存在争议?

夏杰君_7623

夏杰君_7623

发布时间:2026-01-08 19:24:08

|

358人浏览过

|

来源于php中文网

原创

JavaScript是基于原型的,且天然支持面向对象编程;class只是原型机制的语法糖,所有继承和方法查找仍依赖[[Prototype]]链,this绑定取决于调用位置而非定义位置。

为什么javascript的面向对象与基于原型存在争议?

这个问题本身存在预设偏差:JavaScript 没有“面向对象与基于原型的争议”,它**就是基于原型的,且这种机制天然支持面向对象编程**。所谓“争议”,其实是初学者或从类语言(如 Java、C++)转来的开发者,对 class 语法糖和底层原型链关系理解不清晰导致的认知冲突。 下面直接说清楚几个关键点:

class 不是新范式,只是 prototype 的语法糖

ES6 引入的 class 关键字没有改变 JavaScript 的运行时模型——所有继承、方法查找、this 绑定依然依赖 [[Prototype]] 链。写一个 class Person,本质仍是操作 Person.prototype。

常见误解:以为 class 声明后就生成了“类对象”,其实它只是函数:

class Person {}
console.log(typeof Person); // "function"
console.log(Person.prototype.constructor === Person); // true
  • class 内部方法默认不可枚举,但仍在 prototype 上
  • extends 实际调用的是 Object.setPrototypeOf(Sub.prototype, Super.prototype)
  • super() 在构造函数中,本质是调用父级 [[Construct]] 并绑定 this

new 与 Object.create() 的行为差异容易被忽略

两者都创建对象并设置原型,但初始化逻辑不同:

  • new Foo():执行 Foo 构造函数,this 指向新对象,返回该对象(除非显式返回非空对象)
  • Object.create(Foo.prototype):只设置 [[Prototype]],不执行任何初始化逻辑

错误做法:用 Object.create(Foo.prototype) 替代 new Foo() 后,忘记手动调用 Foo.call(newObj, ...),导致实例缺少属性。

Browser Js
Browser Js

轻量级CDP浏览器控制,适用于AI代理。相较于内置浏览器工具,token消耗降低3‑10倍,仅在浏览时使用。

下载

立即学习“Java免费学习笔记(深入)”;

原型污染(Prototype Pollution)是真实风险,不是理论争议

因为所有对象共享原型链,恶意输入若被用于遍历赋值(如深拷贝、merge 工具),可能污染 Object.prototype:

const obj = {};
obj.__proto__.polluted = "yes";
console.log({}.polluted); // "yes"
  • 常见触发点:lodash.merge、JSON.parse 后未校验 key、for...in 遍历时未用 hasOwnProperty
  • Node.js 中已多次出现因原型污染导致的 RCE(如 node-serialize)
  • 修复方式:禁用 __proto__ / constructor 键;使用 Object.assign({}, input) 替代浅合并到目标对象

this 绑定混乱的本质是函数复用 + 原型链查找

方法从原型上被调用时,this 取决于调用位置,而非定义位置:

const obj = {
  name: "a",
  say() { console.log(this.name); }
};
const fn = obj.say;
fn(); // undefined —— this 指向 global / undefined(严格模式)
obj.say(); // "a"
  • 这不是 bug,是原型机制的自然结果:函数是独立值,obj.say 只是取值表达式
  • 解决方式不是“改成 class 就好了”,而是明确绑定:bind、箭头函数、或调用时用 call/apply
  • Class 字段中的箭头函数(method = () => {})能避免问题,是因为它把函数绑定到了实例,绕过了原型查找
真正需要警惕的,不是“该不该用 class”,而是是否意识到:你写的每一行 class、new、super,背后都在读写 prototype 和 [[Prototype]]。混淆语法表象和运行时本质,才是多数问题的源头。

热门AI工具

更多
墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2035

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3002

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1016

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3399

2025.09.10

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

265

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

386

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

355

2025.12.24

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

5895

2025.09.05

FrankenPHP集成Laravel详细教程
FrankenPHP集成Laravel详细教程

本专题提供FrankenPHP集成Laravel的详细配置指南,全面解析运行原理、开发环境搭建、Caddyfile配置、Octane工作模式、数据库连接、队列任务、定时任务和生产环境优化,解决部署过程中常见的报错与兼容性问题。

40

2026.10.08

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn