什么是原型链_javascript中如何利用它?

原型链是JavaScript实现继承和属性查找的核心机制,对象通过[[Prototype]]沿链向上查找属性直至null;由构造函数prototype、Object.create()或class extends构建;需用hasOwnProperty()、in操作符等区分自有与继承属性。

原型链是 JavaScript 中实现对象继承和属性查找的核心机制。简单说,每个对象都有一个内部属性 [[Prototype]](可通过 __proto__ 访问,或更推荐用 Object.getPrototypeOf()),它指向另一个对象——这个被指向的对象就是它的“原型”。当访问一个对象的属性时,如果该对象自身没有这个属性,JS 引擎会沿着这条 [[Prototype]] 链向上查找,直到找到该属性,或到达链的末端(即 null)为止。

原型链是怎么形成的?

大多数对象的原型链起始于构造函数的 prototype 属性:

  • new Foo() 创建实例时,实例的 [[Prototype]] 自动指向 Foo.prototype
  • Foo.prototype 默认是一个普通对象,它的 [[Prototype]] 指向 Object.prototype
  • Object.prototype[[Prototype]]null,链在此终止。

例如:const arr = [1, 2];arr.__proto__ === Array.prototypeArray.prototype.__proto__ === Object.prototypeObject.prototype.__proto__ === null

如何手动设置或利用原型链?

常见方式有三种:

  • 构造函数 + prototype:在 Constructor.prototype 上添加方法,让所有实例共享;
  • Object.create():直接以指定对象为原型创建新对象,比如 const child = Object.create(parent)
  • class 语法(ES6+):本质仍是基于原型链,extends 会让子类的 prototype.__proto__ 指向父类的 prototype

怎么判断属性来自哪里?

区分“自有属性”和“继承属性”很关键:

  • obj.hasOwnProperty('key') → 只检查对象自身(不查原型链);
  • 'key' in obj → 查整个原型链;
  • Object.prototype.isPrototypeOf(obj) → 判断某个对象是否在 obj 的原型链上。

例如:{}.hasOwnProperty('toString')false,但 'toString' in {}true,因为它是从 Object.prototype 继承来的。

需要注意的坑

原型链虽灵活,但也容易出错:

  • 修改内置原型(如 Array.prototype)会影响所有数组,尽量避免;
  • 给原型添加引用类型属性(如数组、对象)会导致所有实例共享,应放在构造函数内初始化;
  • 箭头函数没有自己的 thisprototype,不能用作构造函数。

基本上就这些。理解原型链不是为了死记结构,而是为了看清 JS “属性查找”和“继承”的真实路径——它不复杂,但容易忽略。