JavaScript原型链：万万没想到的坑与技巧本篇博客透彻地探讨了前端高频面试知识点，为你的面试提供了全面的准备。愿你

引言

啊，JavaScript的原型链，这个让无数开发者又爱又恨的特性。它就像是一个神秘的黑洞，吸引着我们不断探索，却又时不时给我们一记重拳。今天，让我们一起深入这个"黑洞"，看看里面究竟藏着什么样的秘密和陷阱。

原型链：JavaScript的DNA

在开始我们的冒险之前，让我们先简单回顾一下什么是原型链。想象一下，如果JavaScript对象是生物，那么原型链就是它们的DNA。每个对象都有一个隐藏的__proto__属性，指向它的原型对象。这个原型对象也有自己的__proto__，于是形成了一条链，一直延伸到Object.prototype。

const animal = { eats: true };
const rabbit = { jumps: true };
rabbit.__proto__ = animal;

console.log(rabbit.eats); // true

看起来很简单，对吧？但是等等，坑这就来了。

坑1：原型污染

想象一下，如果有人告诉你，他可以修改所有JavaScript对象的行为，你会相信吗？不幸的是，这是可能的，而且比你想象的还要容易。

Object.prototype.evilFunction = function() {
  console.log("Muahahaha, I'm in every object now!");
};

const innocentObject = {};
innocentObject.evilFunction(); // "Muahahaha, I'm in every object now!"

这就是所谓的原型污染。通过修改Object.prototype，我们可以影响到所有的对象。这不仅会导致意想不到的行为，还可能成为安全漏洞的源头。所以，请记住：永远不要修改内置对象的原型！

技巧1：Object.create(null)

如果你想创建一个真正"干净"的对象，没有任何继承的属性，可以使用Object.create(null)：

const pureObject = Object.create(null);
console.log(pureObject.toString); // undefined

这个对象甚至没有toString方法。它就像是一张白纸，你可以在上面画出任何你想要的东西，而不用担心继承来的"涂鸦"。

坑2：this的迷惑行为

在原型方法中使用this时，你可能会遇到一些令人困惑的情况：

const calculator = {
  value: 0,
  add: function(x) {
    this.value += x;
  }
};

const brokenCalculator = {
  __proto__: calculator
};

brokenCalculator.add(5);
console.log(brokenCalculator.value); // undefined
console.log(calculator.value); // 5

哎呀，this居然指向了原型对象！这就是为什么我们常说，JavaScript中的this是在运行时绑定的，而不是在定义时绑定的。

技巧2：使用箭头函数

如果你想避免这种this的迷惑行为，可以考虑使用箭头函数：

const calculator = {
  value: 0,
  add: (x) => {
    calculator.value += x;
  }
};

const workingCalculator = {
  __proto__: calculator
};

workingCalculator.add(5);
console.log(workingCalculator.value); // 0
console.log(calculator.value); // 5

箭头函数不绑定自己的this，而是捕获其所在上下文的this值。这样可以避免一些意外，但也要注意，这意味着你失去了动态改变this的能力。

坑3：构造函数与原型

当使用构造函数创建对象时，很容易忘记将方法放在原型上，而是直接放在实例中：

function BadDog(name) {
  this.name = name;
  this.bark = function() {
    console.log(this.name + " says woof!");
  };
}

const fido = new BadDog("Fido");
const rover = new BadDog("Rover");

console.log(fido.bark === rover.bark); // false

这看起来没什么问题，但实际上每个BadDog实例都有自己的bark方法副本，这是对内存的浪费。

技巧3：使用原型方法

正确的做法是将方法放在原型上：

function GoodDog(name) {
  this.name = name;
}

GoodDog.prototype.bark = function() {
  console.log(this.name + " says woof!");
};

const buddy = new GoodDog("Buddy");
const max = new GoodDog("Max");

console.log(buddy.bark === max.bark); // true

这样，所有的GoodDog实例都共享同一个bark方法，节省了内存。

坑4：instanceof的陷阱

instanceof操作符看起来很靠谱，但它也有自己的小秘密：

function Rabbit() {}
const rabbit = new Rabbit();

console.log(rabbit instanceof Rabbit); // true

Rabbit.prototype = {};
console.log(rabbit instanceof Rabbit); // false

什么？我们的兔子不再是兔子了？这是因为instanceof检查的是原型链，而不是构造函数。当我们改变了Rabbit.prototype，原来的实例就失去了与新原型的联系。

技巧4：Symbol.hasInstance

ES6引入了Symbol.hasInstance，允许我们自定义instanceof的行为：

class MyArray {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

console.log([] instanceof MyArray); // true

这个技巧让我们可以更精确地控制类型检查的行为，避免一些意外情况。

结语

JavaScript的原型链就像是一把双刃剑，它给了我们强大的能力，同时也埋下了不少陷阱。但是，只要我们了解这些陷阱，并掌握相应的技巧，就可以在这片"原型沼泽"中游刃有余。

记住，在JavaScript的世界里，没有什么是理所当然的。每一个特性背后都可能隐藏着惊喜（或者惊吓）。所以，保持好奇，不断探索，也许有一天你会发现，原来这些"坑"其实是通向更深层次理解的入口。

最后，让我们以一句话结束今天的探险：在JavaScript中，原型链就像是一个充满惊喜的寻宝游戏，而我们每个人都是独一无二的寻宝者。祝你在这个游戏中玩得开心，收获满满！

海码面试小程序

包含最新面试经验分享，面试真题解析，全栈2000+题目库，前后端面试技术手册详解；无论您是校招还是社招面试还是想提升编程能力，都能从容面对~

JavaScript原型链：万万没想到的坑与技巧

引言