Object.observe 在 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

我相信您无法使用 Object.observe() 观察到 document.location 的原因是因为 document.location returns 类型为 Location Object 的对象（这是特殊的只读接口）而不是 "Standard" Object.

来自 Mozilla 文档：

The Document.location read-only property returns a Location object. The location property of the Document object refers to the Location object. Window.location is a read-only Location object.

定位界面： 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

Answer 2

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";

Object.observe 在 document.location

Object.observe on document.location

javascript

object.observe