Question

我需要为几种DOM访问器方法设置简写，即-getElementsByClassName（qCls），getElementById（qId），querySelector（{{ 1}}），q（querySelectorAll）-使其可用：

在全局范围内：我应该能够在整个代码中（在任何范围或上下文中）将Q写为q(selector)的简写。
作为DOM元素的属性：我应该能够写document.querySelector(selector)作为paragraph.q(selector)的简写。

我知道执行此操作的手动方法是：

paragraph.querySelector(selector)

window.Q = function(sel){
    console.dir(document.querySelectorAll(sel));
};

Node.prototype.Q = function(sel){
    console.dir(this.querySelectorAll(sel));
};


// TEST
var p = document.querySelector("p");

Q("a"); // should have two elements
p.Q("a"); // should have one element

但这具有重复性-再次重复完全相同的功能，只是稍有不同（<a>1</a> <p><a>2</a></p>与document）-所以我打算消除这种重复性。¹

现在，我认为可以实现这一目标的模式是：

this

其中window.Q = helperFunc(someFlag); Node.prototype.Q = helperFunc(someOtherFlag);根据标志处理返回值的逻辑。基于此，我写了以下内容：

helperFunc

但是，这样做的明显缺点是function outputQFunc(context) { return function(selector) { console.dir(context.querySelectorAll("a")); }; } window.Q = outputQFunc(document); Node.prototype.Q = outputQFunc(this);的{{1}}上下文永久指向全局范围，而不是调用此函数的节点。相反，我可以消除this：

Node.prototype.Q

但是如果context，function outputQFunc() { return function(selector) { console.dir(this.querySelectorAll("a")); }; }不会指向this。

所以，我的问题是，如何实现这一目标？

注意：

虽然这种重复听起来很琐碎（只有一行！），但实际上我已经缩短了MVCE的代码。我的实际代码必须先document，然后window.Q将一些filter和一些东西应用于doc.qsAll的结果。在这种情况下，重复性会放大。

查询解决后，如果有人对我到达的最终代码this is it感兴趣，我个人觉得这很干燥且可扩展：

return

Answer 1

在辅助函数上使用bind为this指定自定义window.Q上下文（否则使用默认的this，否则将在指向正确的调用上下文时指向在节点上调用）：

function qSA(sel) {
  console.dir(this.querySelectorAll(sel));
}


window.Q = qSA.bind(document);
Node.prototype.Q = qSA;

// TEST
var p = document.querySelector("p");

Q("a"); // should have two elements
p.Q("a"); // should have one element

<a>1</a>
<p><a>2</a></p>

如何扩展对象的原型并在全局范围内也具有相同的功能？

1 个答案: