登录
首页 >  文章 >  前端

JavaScript原型是什么?原型链怎么工作?

时间:2026-05-16 08:23:10 150浏览 收藏

JavaScript中的原型机制是其面向对象特性的核心,每个函数都拥有prototype属性,用于存放实例共享的方法和属性,而原型链则是对象通过__proto__(推荐使用Object.getPrototypeOf())向上逐级查找属性的动态继承路径,终点为null;关键在于new操作符才真正建立实例与构造函数prototype之间的连接,且原型链仅在读取时生效,赋值永远作用于对象自身——理解这一点,才能避开继承陷阱、写出更健壮的JS代码。

javascript原型是什么_原型链是如何工作的?

JavaScript 原型是每个函数对象自带的 prototype 属性,它是一个普通对象,用来存放将来被该函数作为构造器创建的实例所共享的属性和方法。原型链则是对象在访问属性或方法时,沿着 __proto__ 链向上逐级查找的机制。

每个函数都有 prototype,但只有「被当构造器调用」的对象才继承它

你定义一个函数:

function Person(name) { this.name = name; }
它立刻拥有 Person.prototype,这个对象默认带一个 constructor 属性指向 Person。但此时 Person.prototypePerson 本身毫无关系——直到你用 new Person()

这时发生三件事:

  • 创建一个新对象
  • 将该对象的 __proto__ 指向 Person.prototype
  • 执行 Person 函数体,this 绑定到这个新对象

所以不是“函数有原型所以能继承”,而是“new 操作符把实例的 __proto__ 指向了函数的 prototype”。

__proto__ 不是标准写法,但浏览器普遍支持;Object.getPrototypeOf() 才是正解

__proto__ 是历史遗留属性,ECMAScript 规范并未强制要求其实现(尽管所有主流引擎都支持)。直接读写它容易引发混淆,尤其在类继承或 Proxy 场景下行为不一致。

正确方式是:

  • 查原型:Object.getPrototypeOf(obj)
  • 设原型(仅限可写对象):Object.setPrototypeOf(obj, proto)
  • 创建带指定原型的新对象:Object.create(proto)

比如:

const parent = { say() { return 'hi'; } };<br>const child = Object.create(parent);<br>console.log(Object.getPrototypeOf(child) === parent); // true

原型链终点是 Object.prototype,再往上是 null

所有普通对象最终都继承自 Object.prototype,而它的 __proto__null。这就是查找终止条件。

你可以验证:

console.log(Object.getPrototypeOf({}) === Object.prototype); // true<br>console.log(Object.getPrototypeOf(Object.prototype) === null); // true

注意几个常见陷阱:

  • Array.prototypeFunction.prototype 都是 Object.prototype 的直接子对象,不是平级关系
  • typeof null 返回 "object",但它没有原型(Object.getPrototypeOf(null) 报错)
  • 箭头函数没有 prototype 属性,不能用 new 调用

真正容易被忽略的是:原型链只在「读取属性」时触发,赋值操作永远作用于对象自身。哪怕 obj.x = 1x 原本在原型上,这次赋值也会在 obj 上新建一个同名自有属性——原型上的那个不会被修改,也不会被屏蔽以外的方式绕过。

文中关于的知识介绍,希望对你的学习有所帮助!若是受益匪浅,那就动动鼠标收藏这篇《JavaScript原型是什么?原型链怎么工作?》文章吧,也可关注golang学习网公众号了解相关技术文章。

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