什么是javascript原型链_如何实现继承？_网络技术

什么是javascript原型链_如何实现继承？

发布时间 - 2026-01-07 00:00:00 点击率：次

JavaScript原型链是对象查找属性时实际遵循的隐式[[Prototype]]引用路径，从对象开始逐级向上直至null；class继承和ES5手动继承均依赖此机制实现方法共享与实例属性继承。

JavaScript 原型链的本质是什么？

原型链不是语法糖，而是 JavaScript 对象查找属性和方法时实际走的路径：每个对象内部都有一个隐式引用 [[Prototype]]（可通过 Object.getPrototypeOf(obj) 读取），它指向另一个对象；当访问一个属性时，如果当前对象没有，引擎就顺着这个引用一路向上查找，直到找到或抵达 null（即 Object.prototype.__proto__ === null）。

关键点在于：function 的 prototype 属性只在用 new 调用时才参与对象创建——它会被赋给新对象的 [[Prototype]]，而普通对象没有 prototype 属性，只有 __proto__（或 Object.getPrototypeOf()）。

用 `class` 实现继承时原型链怎么连？

class 是语法糖，底层仍靠原型链。使用 extends 后，子类构造函数的 prototype 会自动链接到父类的 prototype，同时子类自身也通过 __proto__ 链接到父类构造函数（实现静态方法继承）。

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  bark() { return `${this.name} barks`; }
}

const dog = new Dog('Buddy', 'Golden');
// dog.__proto__ === Dog.prototype
// Dog.prototype.__proto__ === Animal.prototype
// Animal.prototype.__proto__ === Object.prototype
// Object.prototype.__proto__ === null

必须在子类 constructor 中调用 super()，否则 this 不可用
Dog.prototype 上的方法（如 bark）不会出现在 Animal.prototype 上，但可通过原型链访问 speak
若手动修改 Dog.prototype，需确保 constructor 指回 Dog，否则 dog.constructor === Animal

手动设置原型链实现继承（ES5 风格）

核心是两步：让子类实例能访问父类原型上的方法（改 Child.prototype 的 [[Prototype]]），同时让子类构造函数能调用父类初始化逻辑（在 Child 内部用 Parent.call(this, ...)）。

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return `${this.name} makes a sound`;
};

function Dog(name, breed) {
  Animal.call(this, name); // 继承实例属性
  this.breed = breed;
}

// 关键：重设 Dog.prototype 的原型为 Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复 constructor

Dog.prototype.bark = function() {
  return `${this.name} barks`;
};

Object.create(Animal.prototype) 创建一个空对象，其 [[Prototype]] 指向 Animal.prototype，比直接赋值 { __proto__: Animal.prototype } 更规范
漏掉 Dog.prototype.constructor = Dog 会导致 new Dog().__proto__.constructor === Animal，影响 instanceof 和调试识别
不能用 Dog.prototype = Animal.prototype，否则修改 Dog.prototype 会污染 Animal.prototype

为什么 `instanceof` 和 `isPrototypeOf()` 有时行为不一致？

instanceof 检查的是「右侧构造函数的 prototype 是否在左侧对象的原型链上」；isPrototypeOf() 检查的是「左侧对象是否在右侧对象的原型链上」。两者方向相反，且 instanceof 依赖构造函数的 prototype 属性值，而非运行时对象的实际 [[Prototype]]。

常见陷阱：

如果重写了 Child.prototype 但忘了恢复 constructor，instanceof 仍正常，但 obj.constructor 指向错误
动态替换原型后（如 obj.__proto__ = NewProto），instanceof 不会更新，因为它只看初始构造关系
Array.isArray() 比 arr instanceof Array 更可靠，因为后者在跨 iframe 场景下会失效（不同全局环境的 Array 构造函数不同）

原型链不是黑盒，它是可观察、可调试的路径；真正容易出错的，往往不是“怎么连”，而是“什么时候被意外断开”或者“谁在中间悄悄改了 __proto__”。

# javascript # java # go # 为什么 # speak

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

上一篇：centos7无法进入图形界面怎么解决

下一篇：centos7无法安装图形界面

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：centos7无法进入图形界面怎么解决

下一篇：centos7无法安装图形界面