揭秘JS原型链：5个让开发者崩溃的对象怪异行为-优快云博客

揭秘JS原型链：5个让开发者崩溃的对象怪异行为

【免费下载链接】wtfjs 🤪 A list of funny and tricky JavaScript examples 项目地址: https://gitcode.com/gh_mirrors/wt/wtfjs

你是否曾在调试JavaScript代码时遇到过对象行为异常诡异的情况？明明定义了某个属性，访问时却返回undefined；看似相同的对象比较结果却为false；继承关系混乱不堪？本文将深入探讨JavaScript原型链中最令人抓狂的5个怪异行为，帮你彻底理解这些"wtf时刻"背后的原理。

读完本文你将学到：

为什么[] instanceof Object返回true但null instanceof Object却返回false
如何避免修改原型链导致的全局污染问题
箭头函数不能作为构造函数的真正原因
__proto__与prototype的区别与联系
如何安全地扩展原生对象原型

1. 数组是对象，但对象不是数组

JavaScript中最基础也最令人困惑的概念之一就是对象与数组的关系。看看下面的代码：

[] instanceof Object; // -> true
{} instanceof Array; // -> false
Array.isArray([]); // -> true
Array.isArray({}); // -> false

原型链视角分析

每个JavaScript对象都有一个内部链接指向另一个对象，这个对象就是它的原型。当我们访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript会沿着原型链向上查找，直到找到该属性或到达原型链的末端（null）。

数组的原型链结构如下： mermaid

这解释了为什么数组是对象的实例，因为数组的原型链最终指向了Object.prototype。

相关源码参考：README.md中的"Accessing prototypes with __proto__"章节

2. 构造函数的constructor属性并不总是指向自身

你可能认为对象的constructor属性会指向创建它的构造函数，但实际情况并非总是如此：

function Foo() {}
const foo = new Foo();
console.log(foo.constructor === Foo); // -> true

Foo.prototype = {};
const bar = new Foo();
console.log(bar.constructor === Foo); // -> false
console.log(bar.constructor === Object); // -> true

背后原因

当我们创建一个函数时，JavaScript会自动为其创建prototype对象，该对象包含一个constructor属性，指向该函数本身。但是，当我们完全替换函数的prototype时，新对象默认没有constructor属性，因此会沿着原型链向上查找，最终找到Object.prototype.constructor，它指向Object构造函数。

正确的做法是在替换原型时显式设置constructor属性：

function Foo() {}
Foo.prototype = {
  constructor: Foo, // 显式设置constructor
  // 其他方法...
};
const bar = new Foo();
console.log(bar.constructor === Foo); // -> true

相关源码参考：README-zh-cn.md中的"constructor 属性"章节

3. 修改内置原型的危险游戏

有时开发者会尝试扩展原生对象的原型以添加新功能：

Array.prototype.sum = function() {
  return this.reduce((a, b) => a + b, 0);
};

[1, 2, 3].sum(); // -> 6

看起来很方便，但这可能会导致严重的问题：

for (const i in [1, 2, 3]) {
  console.log(i); // -> 0, 1, 2, sum
}

为什么会这样

当你修改内置对象（如Array、Object、String等）的原型时，这些新方法会出现在所有该类型对象的属性枚举中。这可能会破坏依赖于对象属性枚举的代码，尤其是第三方库。

更安全的做法是创建工具函数而非修改原型：

const ArrayUtils = {
  sum(arr) {
    return arr.reduce((a, b) => a + b, 0);
  }
};

ArrayUtils.sum([1, 2, 3]); // -> 6

相关源码参考：README.md中的"Patching numbers"章节

4. 箭头函数不能作为构造函数

ES6引入的箭头函数带来了更简洁的语法和词法作用域的this绑定，但它们不能用作构造函数：

const Foo = () => {};
new Foo(); // -> TypeError: Foo is not a constructor

根本原因

箭头函数与普通函数有几个关键区别：

箭头函数没有自己的this，它继承自外围作用域
箭头函数没有prototype属性
箭头函数不能用作构造函数，因为它们没有[[Construct]]内部方法

const Foo = () => {};
console.log(Foo.prototype); // -> undefined

function Bar() {}
console.log(Bar.prototype); // -> {constructor: Bar}

相关源码参考：README-zh-cn.md中的"箭头函数不能作为构造函数"章节

5. null的类型判断陷阱

JavaScript中最著名的bug之一就是typeof null返回"object"：

typeof null === "object"; // -> true
null instanceof Object; // -> false
Object.prototype.toString.call(null); // -> "[object Null]"

历史原因与解决方案

这个行为源于JavaScript最初的实现bug，并且为了向后兼容而一直保留至今。要正确判断null值，应该使用：

function isNull(value) {
  return value === null;
}

// 或者更通用的类型检查函数
function getType(value) {
  return Object.prototype.toString.call(value).slice(8, -1);
}

console.log(getType(null)); // -> "Null"
console.log(getType([])); // -> "Array"
console.log(getType({})); // -> "Object"

相关源码参考：README.md中的"null is falsy, but not false"章节

如何安全地使用原型链

了解了这些怪异行为后，我们应该如何安全地使用JavaScript原型链呢？

避免修改内置对象原型：这是导致全局污染和兼容性问题的常见原因
使用Object.create()创建对象：可以显式指定原型，使代码更清晰
使用Object.hasOwnProperty()检查属性：避免原型链上的属性干扰
优先使用class语法：ES6的class语法提供了更清晰的继承模型
理解原型链结构：使用Object.getPrototypeOf()和Object.prototype.toString()等方法调试原型链问题

总结

JavaScript的原型链机制虽然强大，但也充满了陷阱。理解这些怪异行为不仅能帮助你写出更健壮的代码，还能在调试时快速定位问题根源。记住，这些行为并非语言设计缺陷，而是有其历史原因和特定用途的。

掌握原型链知识是成为JavaScript高级开发者的必经之路。希望本文能帮助你更深入地理解JavaScript的这一核心概念，避免在开发中遇到这些"wtf时刻"。

如果你觉得这篇文章有帮助，请点赞收藏，并关注我们获取更多JavaScript深入解析内容。下一期我们将探讨JavaScript中的闭包与作用域陷阱，敬请期待！