Object.observe on document.location

Question

当页面的散列发生变化时，我需要执行js脚本，我知道有许多方法可以知道哈希何时发生变化，比如使用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

我认为，您不能使用document.location来观察Object.observe()的原因是，document.location返回一个Location Object类型的对象(这是特殊的只读接口)，而不是“标准”对象。

来自Mozilla文档：

Document.location只读属性返回一个Location对象.Document对象的location属性引用Location对象。Window.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 {}

如果您测试一个对象的prototype链中是否包含构造函数的prototype属性，那么非常有趣：

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

​