登录
首页 >  文章 >  前端

JavaScript原型是什么?原型链如何运作?

时间:2026-02-19 11:03:46 455浏览 收藏

JavaScript原型链是语言对象模型的底层核心机制,它通过prototype(函数专属)和__proto__(对象内部链接)构建起一条自动向上查找属性与方法的路径,从实例自身开始逐级回溯至Object.prototype直至null;理解它不仅能解释instanceof、for...in、继承甚至ES6 class的真实运作原理,还能避免undefined is not a function等常见陷阱,并合理利用Object.create(null)等特性实现安全的数据结构——忽略原型链,就等于在JavaScript中蒙眼开车。

javascript的原型是什么_原型链如何工作【教程】

JavaScript 的原型(prototype)是对象的“共享模板”,原型链是 JavaScript 查找属性和方法时自动向上追溯的路径——它不是语法糖,而是语言底层运行机制。

什么是 __proto__prototype?别混用

这是最常踩坑的地方:prototype 是**函数对象才有的属性**,指向该函数作为构造器时,其实例对象的默认原型;而 __proto__ 是**每个对象都有的内部链接**(已标准化为 Object.getPrototypeOf()),指向它的原型对象。

  • Person.prototype 是你手动定义的、供所有 new Person() 实例共享的方法存放处
  • person.__proto__ 就等于 Person.prototype(前提是 person = new Person()
  • Person.__proto__ 不是 Person.prototype,而是 Function.prototype —— 因为 Person 本身是个函数,函数是 Function 的实例

属性查找怎么走原型链?从 obj.prop 开始的真实过程

当你写 obj.sayHello(),JS 引擎不会直接报错或跳转,而是按固定顺序逐层查找:

  • 先查 obj 自身有没有 sayHelloobj.hasOwnProperty('sayHello')true 才算)
  • 没有?就查 Object.getPrototypeOf(obj)(即 obj.__proto__)上有没有
  • 还没有?继续查 Object.getPrototypeOf(Object.getPrototypeOf(obj)),也就是 obj.__proto__.__proto__
  • 最终到 Object.prototype,它的 __proto__null,链断开,返回 undefined

这个过程完全自动,不触发 getter,也不执行任何代码——只是纯粹的“读取时查找”。

为什么 Object.create(null) 没有 toString

因为 Object.create(null) 创建的对象,其 __proto__ 直接为 null,跳过了整个标准原型链起点 Object.prototype。所以它连 hasOwnPropertyisPrototypeOf 都没有。

  • 适合做纯哈希表(如缓存 map、配置字典),避免原型污染和意外继承
  • 但不能直接调用 obj.toString(),会报 TypeError: obj.toString is not a function
  • 若需基础方法,得手动挂载,或改用 Object.create(Object.prototype)

ES6 class 是语法糖,但原型链照旧工作

class Dog extends Animal 看似面向对象,背后仍是原型链:它本质是把 Dog.prototype.__proto__ 指向 Animal.prototype,并确保 Dog 构造函数能正确调用 Animal.call(this, ...)

  • 你可以用 Object.getPrototypeOf(Dog.prototype) 验证它是否等于 Animal.prototype
  • super() 在方法里实际就是访问 this.__proto__.__proto__.methodName.call(this) 的语法包装
  • 所以 class 无法绕过原型链——想真正“切断”继承?只能手动重置 Dog.prototype.__proto__(不推荐)

原型链不是可选特性,它是 JavaScript 对象模型的骨架;你写的每一行对象访问、每次 instanceof 判断、甚至 for...in 的遍历范围,都在依赖它。忽略它,迟早会在 undefined is not a function 或奇怪的属性覆盖中卡住。

好了,本文到此结束,带大家了解了《JavaScript原型是什么?原型链如何运作?》,希望本文对你有所帮助!关注golang学习网公众号,给大家分享更多文章知识!

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>