在使用 jQuery 的过程中，我们会发现一些奇怪的问题。其中之一是当我们尝试扩展 Object 对象时，却发现 jQuery 报错了。这似乎很奇怪，因为我们并没有直接修改 jQuery 的代码。但实际上，这是由于 JavaScript 的原型链机制导致的。
原因
在 JavaScript 中，每个对象都有一个指向其原型的内部链接。如果我们尝试访问一个对象不存在的属性，JavaScript 就会沿着原型链查找，直到找到该属性或者到达原型链的末端为止。如果最终也无法找到该属性，JavaScript 将返回 undefined。
jQuery 的代码依赖于这种原型链机制来访问和操作 DOM 元素。简单来说，jQuery 将每个 DOM 元素包装在一个自定义对象中，然后将这个对象的原型设置为 jQuery.fn。这个自定义对象通常被称为“jQuery 对象”。
问题出现在当我们尝试扩展 Object 对象时，也就是修改它的原型时。假设我们这么做：
Object.prototype.myMethod = function() {
// do something
};这样做可能会破坏 jQuery 对象的原型链，因为 jQuery 的代码期望该原型链不变。
解决方案
解决这个问题的方法很简单：不要修改 Object 的原型。如果您需要扩展 JavaScript 内置对象，请使用其他方式，比如创建一个新对象并将其原型设置为内置对象。
const myObj = Object.create(Object.prototype);
myObj.myMethod = function() {
// do something
};这样做就不会影响到 jQuery 对象的原型链了。
总结
在 JavaScript 中，原型链机制是非常重要的。修改内置对象的原型可能会导致不可预测的行为，甚至破坏第三方库。因此，在编写 JavaScript 代码时，请务必小心谨慎。
示例代码：
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ------ ------ ------- ----------------------------------------------------------- ------- ------------------------ ------- ------ ---- ------------------- ------------ ------- -------
// app.js
Object.prototype.myMethod = function() {
console.log('This is my method!');
};
$('#example').myMethod(); // Uncaught TypeError: $(...).myMethod is not a function来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27747