javascript对象如何创建_理解和运用原型链【教程】

发布时间 - 2026-01-27 00:00:00    点击率:
对象字面量和new Object()创建的对象原型均为Object.prototype,无自定义构造函数;Object.create(null)不继承任何原型;prototype仅属函数,决定new实例的__proto__指向;应优先使用Object.getPrototypeOf()等标准API操作原型链。

对象字面量和 new Object() 本质一样,但别混用构造逻辑

{}new Object() 创建的对象,其 [[Prototype]] 都指向 Object.prototype,没有自定义构造函数参与。这时候强行在后面加 .constructor 或试图修改原型链,容易误以为它“属于某个类”。

  • 避免写 const obj = new Object(); obj.constructor = MyConstructor; —— 这只改了属性,没动原型链
  • 如果需要明确类型归属,直接用构造函数或 class,而不是事后打补丁
  • Object.create(null) 是特例:它不继承 Object.prototype,所以没有 toStringhasOwnProperty 等方法

prototype 只存在于函数上,且仅影响 new 出来的实例

prototype 是函数对象才有的属性,普通对象没有。它定义的是“将来通过 new Fn() 创建的实例”的隐式原型(即 __proto__)所指向的目标。

  • function Person() {} 定义后,Person.prototype 默认是一个带 constructor 属性的对象
  • const p = new Person()p.__proto__ === Person.prototypetrue
  • Person.prototype 添加方法(如 Person.prototype.say = function() {}),所有 p 实例都能访问,但不会污染 Object.prototype
  • 直接赋值 Person.prototype = {...} 会切断默认 constructor 指向,需手动修复:Person.prototype.constructor = Person

__proto__ 不是标准 API,优先用 Object.getPrototypeOf()Object.setPrototypeOf()

__proto__ 虽然广泛支持,但属于遗留属性,ECMAScript 明确推荐使用标准方法操作原型链。

  • 读取原型:用 Object.getPrototypeOf(obj),而不是 obj.__proto__
  • 设置原型(慎用):用 Object.setPrototypeOf(obj, proto);直接赋值 obj.__proto__ = proto 在某些引擎中会

    触发性能降级
  • 创建带指定原型的对象:优先用 Object.create(proto, descriptors),比先创建再设原型更清晰
  • 检查原型关系:用 obj instanceof Constructorproto.isPrototypeOf(obj),别靠遍历 __proto__

原型链查找中断点:属性存在性 ≠ 可枚举性 ≠ 可访问性

当访问 obj.prop 时,JS 沿原型链向上查找,但遇到 undefinedget 报错、或属性被 Object.defineProperty 设为不可访问时,行为可能出人意料。

  • in 操作符查的是“是否在自身或原型链上存在”,而 obj.hasOwnProperty('prop') 只查自身
  • Object.getOwnPropertyNames()Object.getOwnPropertyDescriptors() 才能看到不可枚举属性(比如 constructor
  • 如果某层原型上有 get prop() 且抛错,整个访问就失败,不会继续往上找——这和普通数据属性不同
  • 箭头函数没有 prototype,也不能用 new,别把它当构造器用
原型链本身不复杂,难的是判断当前访问路径落在哪一层、谁控制着那个 get、以及是否意外屏蔽了上游属性。调试时多用 Object.getPrototypeOf() 逐层打印,比猜更可靠。


# javascript  # java  # js  # ecmascript  # Object  # NULL  # 构造函数  # const  # 继承  # class 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何打造高效商业网站?建站目的决定转化率  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  详解MySQL数据库的安装与密码配置  网站制作免费,什么网站能看正片电影?  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  消息称 OpenAI 正研发的神秘硬件设备或为智能笔,富士康代工  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  Laravel如何与Pusher实现实时通信?(WebSocket示例)  Laravel怎么连接多个数据库_Laravel多数据库连接配置  如何在阿里云虚拟机上搭建网站?步骤解析与避坑指南  Laravel如何自定义分页视图?(Pagination示例)  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  如何快速搭建高效香港服务器网站?  实例解析Array和String方法  Laravel如何使用Eloquent进行子查询  浅谈redis在项目中的应用  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  Laravel如何使用软删除(Soft Deletes)功能_Eloquent软删除与数据恢复方法  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  如何快速搭建虚拟主机网站?新手必看指南  Laravel如何实现数据库事务?(DB Facade示例)  javascript基于原型链的继承及call和apply函数用法分析  如何在阿里云通过域名搭建网站?  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  车管所网站制作流程,交警当场开简易程序处罚决定书,在交警网站查询不到怎么办?  javascript中的try catch异常捕获机制用法分析  详解阿里云nginx服务器多站点的配置  网站制作大概要多少钱一个,做一个平台网站大概多少钱?  🚀拖拽式CMS建站能否实现高效与个性化并存?  Laravel事件监听器怎么写_Laravel Event和Listener使用教程  Laravel如何集成第三方登录_Laravel Socialite实现微信QQ微博登录  在Oracle关闭情况下如何修改spfile的参数  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  如何实现javascript表单验证_正则表达式有哪些实用技巧  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  Laravel如何配置和使用缓存?(Redis代码示例)  Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  Laravel中间件如何使用_Laravel自定义中间件实现权限控制  利用 Google AI 进行 YouTube 视频 SEO 描述优化  Laravel如何实现全文搜索_Laravel Scout集成Algolia或Meilisearch教程  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  Python文件操作最佳实践_稳定性说明【指导】  Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】  Laravel如何处理异常和错误?(Handler示例)  JavaScript模板引擎Template.js使用详解