在 document.location 上的 Object.observe

Question

当页面的hash改变时我需要执行一个js脚本，我知道有很多方法可以知道hash什么时候改变，比如使用jQuery

$(window).on('hashchange', function() {
   // do something
});

我尝试使用Object.observe，但它不起作用，我只是想知道为什么它没有，为什么在更新document.location 对象后回调没有触发。

Object.observe(document.location, function(changes) { 
    console.log(changes);
});

Answer 1

document.location 以及许多其他 DOM 对象属于宿主对象的类别，根据规范，它们的行为不必像常规的原生 JS 对象一样。虽然 Object.observe 可能适用于其中一些对象，但它的行为并不可靠，并且恰好不适用于 document.location。

另一个不起作用的例子是：

var el = document.createElement('div');
document.body.appendChild(el);
Object.observe(el, function(change) { console.log('changed ', change[0].name); })

el.id = "hello";
el.foo = "bar";

Answer 2

我相信您无法使用Object.observe() 观察document.location 的原因是因为document.location 返回类型为Location Object 的对象（这是特殊的只读接口）而不是“标准”对象。

来自 Mozilla 文档：

Document.location 只读属性返回一个 Location 对象。 Document 对象的 location 属性指的是 Location 目的。 Window.location 是一个只读的 Location 对象。

位置界面： https://developer.mozilla.org/en-US/docs/Web/API/Location

例子：

console.log(document.location.__proto__); // returns Location {}
console.log(window.location.__proto__);   // returns Location {}
window.location === document.location // always true

Object.observe() 方法用于观察对象的变化。

例子：

var o = { name: ''};
Object.observe(o, function(changes){
    changes.forEach(function(change) {
    console.log(change.type, change.name, change.oldValue);
});
});
o.name = 'foo'; // name is being observed

看看他们__proto__的区别

console.log(document.location.__proto__); // returns Location {}
console.log(window.location.__proto__);   // returns Location {}
console.log(o.__proto__);                 // returns Object {}

如果你测试一个对象的原型链中是否有你可以获得的构造函数的原型属性，那就足够有趣了：

console.log(document.location instanceof Object); // true
console.log(o instanceof Object); // true

代码示例：

var o = {
  name: ''
};
Object.observe(o, function(changes) {
  changes.forEach(function(change) {
    console.log(change.type, change.name, change.oldValue);
  });
});

o.name = 'foo';


console.log(document.location.__proto__); // returns Location {}
console.log(window.location.__proto__); // returns Location {}
console.log(o.__proto__); // returns Object {}


console.log(document.location instanceof Object); // true
console.log(o instanceof Object); // true