javascript - JSON.parse 在循环对象上没有错误

Question

我正在尝试确定一个对象是否可以被字符串化。此检查在 Chrome 和 Safari 中有效，但在 FF (25.0.1) 中无效。

var good = true;
var myObj = {"param1":11, "param2": "a string", "param3": $("a")}; 
//some cyclic object, specifically I have a jQuery object I got via `$("a")` 
//which returned several anchor tags.

//try to stringify, which supposedly rejects cyclic objects 
try {
    JSON.stringify(myObj);
} catch(error){
    good = false;
}
console.log(good) //returns true.

没有抛出错误...或者我没有正确捕捉到它？我以前从未接到过使用 try...catch 的电话，所以我对它的细微差别没有任何经验。

JSON.stringify(myObj) 返回对象的字符串版本，没有许多显然无法字符串化的对象参数。它应该，根据 MDN , 错误。

谢谢!

Answer 1

您正确地捕获了错误，但是(正如您所确定的)Firefox 根本没有抛出错误。

这是因为 Fiefox 不会阻塞 DOM 对象的 JSONification，而其他浏览器会这样做:

JSON.stringify(document.getElementById("header"))

在 Chrome 和 Safari 中，此行会导致错误(因为在 WebKit/Blink 中，循环 DOM 对象(如 sibling )直接存在于每个 DOM 对象上)，而在 Firefox 中会无害地生成字符串“{}””。

这是因为 Firefox 的 DOM 对象没有任何自己的可枚举属性:

Object.keys(document.getElementById("header"))
> []

在 WebKit/Blink 浏览器中，这一行提供了一个属性名称数组作为字符串，因为 DOM 对象有自己的属性。 JSON.stringify 只捕获对象自身的属性，而不是原型(prototype)属性。

额外信息:关于 D​​OM，你想知道的更多

在 Firefox 中，DOM 对象大多没有自己的属性；相反，属性访问被委托(delegate)给原型(prototype)链上的 HTMLElement.prototype、Element.prototype 或 Node.prototype(或元素的直接原型(prototype)，例如 HTMLDivElement.prototype 或 HTMLAnchorElement.prototype)。

您可能想知道:如果访问 DOM 元素上的属性会导致原型(prototype)访问，那么 DOM 元素怎么会有不同的属性值呢？不是所有的 DOM 元素都有或多或少相同的原型(prototype)链吗？

这里的技巧是原型(prototype)属性没有值，它们是getter 函数。例如，当您请求 HTMLDivElement 的 firstChild 时，JavaScript 引擎会执行以下步骤:

1. 查找对象本身的 firstChild 属性。它不在那里。
2. 在对象的原型(prototype)上查找 firstChild 属性。
3. 继续原型(prototype)链，直到我们在 Node.prototype 上找到 firstChild。
4. Node.prototype.firstChild 由访问器属性描述符 定义，这意味着属性访问导致 get 函数的执行。
5. 执行 getter 函数期间的 this 值是您要求其 firstChild 值的特定 DOM 元素/Firefox 使用该 this对 DOM 元素的第一个子元素进行一些底层查找的值。

因此，当您这样做时:

var val = document.getElementById("header").firstChild;

你真的在做:

var elm = document.getElementById("header");
var nodeProto = elm.__proto__.__proto__.__proto__.__proto__;
var propDescriptor = Object.getOwnPropertyDescriptor(nodeProto, "firstChild");
var getterFunc = propDescriptor.get;
var val = getterFunc.call(elm);  // invoke the getter with `this` set to `elm`

或者(可读性较差):

var val = Object.getOwnPropertyDescriptor(document.getElementById("header").__proto__.__proto__.__proto__.__proto__, "firstChild").get.call(document.getElementById("header"))