javascript - 在 document.location 上的 Object.observe

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 是一个只读的 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