javascript - 覆盖数据集函数

Question

有人可以建议我如何覆盖数据集原型(prototype)函数吗？

这是我目前的尝试:

if (document.createElement('div').dataset === undefined) {
  console.log('IE FIX');
  HTMLElement.prototype.dataset = function() {
    console.log('Fired?');
    this.menu = 'test';
  }
}

我这样调用它:

document.querySelectorAll('[data-menu]')[0].dataset.menu

目前我在控制台中得到的是:

IE FIX

至少我应该被解雇？？

编辑2

看下面的代码，仍然没有显示console.log

document.addEventListener('DOMContentLoaded', function() {

  if (document.createElement('div').dataset !== undefined) {
    Object.defineProperty(
      HTMLElement.prototype,
      'dataset',
      {
        value: function () { console.log('dsada'); }
      }
    )
  }

  document.querySelectorAll('[data-menu]')[0].dataset;

});

控制台中的工作类型:

Command: document.createElement('div').dataset

function () { console.log('dsada'); }

它应该执行函数。

编辑3

修改了代码，使用value应该只是一个值，而不是一个函数。我将其更改为 get，它需要一个函数并执行它。

• 访问器描述符 = get + set(见上例)

  • get 必须是函数；它的返回值用于读取属性；如果未指定，则默认为未定义，其行为类似于返回未定义的函数
  • set 必须是一个函数；其参数在给属性赋值时用RHS填充；如果未指定，则默认为未定义，其行为类似于空函数

• 数据描述符 = 值 + 可写(见下例)

  • 值 默认未定义；如果可写、可配置和可枚举(见下文)为真，则该属性的行为类似于普通数据字段
  • 可写 - 默认为 false；如果不为真，则该属性为只读；写入尝试被忽略而没有错误*!

下面的代码正确显示了元素

document.addEventListener('DOMContentLoaded', function() {

  if (document.createElement('div').dataset !== undefined) {
    Object.defineProperty(HTMLElement.prototype, 'dataset', {
      get: function () {
        console.log(this);

      }
    })
  }

  document.querySelectorAll('[data-menu]')[0].dataset;

});

我现在的问题是，有没有办法处理类似这样的事情:

document.querySelectorAll('[data-menu]')[0].dataset.menu

像这样:

if (document.createElement('div').dataset !== undefined) {
  Object.defineProperty(HTMLElement.prototype, 'dataset', {
    get: function () {
      console.log(this);
      this.getAttribute('data-' + this.arg);
    }
  })
}

this.arg 的位置

document.querySelectorAll('[data-menu]')[0].dataset .menu

Answer 1

使用Object.defineProperty :

Object.defineProperty(
    HTMLElement.prototype,
    'dataset',
    {
        value: function () { /* whatever */ }
    }
)