Question

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

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

我尝试使用Object.observe，但它没有用，我只是想知道它为什么没有，为什么在更新{{1后'回调并不会触发对象。

document.location

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 {}

如果您测试一个对象在其原型链中是否具有构造函数的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

document.location上的Object.observe

2 个答案: