如何为DOM元素实现无需括号调用的parentWidget自定义属性

你需要通过Object.defineProperty()为Element.prototype定义getter访问器属性，即可实现无需加括号直接访问的效果，和原生parentNode等属性的行为完全一致。

正确实现代码 #

Object.defineProperty(Element.prototype, 'parentWidget', {
  get: function () {
    // 访问属性时自动执行这段逻辑，返回最近的widget父容器
    return this.closest('.widget');
  },
  configurable: true, // 支持后续删除/修改该属性，避免硬污染原型
  enumerable: false // 遍历元素属性时不展示该属性，和原生DOM属性行为对齐
});

修改后的测试逻辑 #

原来的调用需要去掉括号，调整后如下：

function test(el) {
  // 直接访问属性即可，无需加括号
  var widget = el.parentWidget;
  var result = document.getElementById("w1");
  result.firstChild.innerText = widget;
}

说明 #

• 该实现完全符合需求：基于closest()方法跨层级查找最近的.widget父容器，支持el.parentWidget.firstChild这类链式调用
• 给内置原型扩展属性属于强侵入性操作，生产环境使用时建议做好命名冲突检测，避免和其他第三方库的自定义属性冲突。

内容的提问来源于stack exchange，提问作者Nathan Green