如何设置接收器

How to set the receiver

本文关键字：接收器 设置 何设置      更新时间：2023-09-26

如何重写形式为的函数

 foo = function(arg1,arg2){....};

转换为arg1成为接收器的形式，如下所示使用？

arg1.foo(arg2);

编辑我发现使用jQuery，我可以做到这一点。

jQuery.fn.foo = function(arg){
  ...
}

不使用jQuery的Javascript有什么方法可以做到这一点？

jQuery返回的对象是jQuery对象，而不是DOM对象。它们包含DOM对象的集合，但jQuery根本不直接向DOM对象添加任何方法。jQuery.fn只是对jQuery返回的对象原型的引用，允许您直接向该原型添加方法。

既然您对重现jQuery的行为感兴趣，那么您也可以这样做：将本机DOM对象封装在自己的类中，向该封装类添加您想要的任何方法。请注意，不能在jQuery实例上只调用任何DOM对象方法；jQuery定义了一些用于调用实际DOM方法的实用方法，但为了调用许多其他DOM方法，您需要访问封装在jQuery实例中的真实DOM对象。您的自定义包装器类也有同样的限制——您需要在包装器上实现将调用转发到底层DOM对象的方法。

示例：

function DOMWrapper(domObject) {
    this.domObject = domObject;
}
DOMWrapper.prototype = {
    constructor: DOMWrapper,
    foo: function(arg1, arg2, arg3) {
        // this.domObject refers to the wrapped object here
        this.domObject.nativeMethod();
        // you could do things like this here:
        return this.bar.call(this.domObject, arg1, arg2, arg3);
    },
    bar: function(arg1, arg2, arg3) {
        // now, even though "bar" is defined as a method of
        // the DOMWrapper prototype, it has been invoked by "foo"
        // in the context of the wrapped DOM object, so
        // "this" refers directly to the DOM object in this method
        // this goes to the actual DOM nativeMethod:
        return this.nativeMethod();
    },
    domMethodWrapper: function() {
        return this.domObject.nativeMethod();
    }
}

解决方案1

直接为每个元素附加一个函数。（更兼容）

演示：http://jsfiddle.net/SO_AMK/tE6gf/

jsFiddle的今天很慢，所以这里有一个JS Bin镜像

JavaScript:

var elm = document.getElementById("elm");
elm.foo = function(arg) {
    alert(arg.arg1); // What I thought you might've meant :D
};
elm.foo({
    arg1: "Arg 1 Value",
    arg2: "Arg 2 Value",
    arg3: "Arg 3 Value",
    arg4: "Arg 5 Value"
});
var arg1 = document.getElementById("div2");
// To match your example
arg1.foo = function(arg1, arg2){ alert(arg1); };
var arg2 = "This is a random string";
arg1.foo(arg2);

解决方案2

扩展Element.prototype。（仅向后兼容IE 7）

演示：http://jsfiddle.net/SO_AMK/8W2Nx/

JavaScript:

Element.prototype.foo = function(arg1, arg2) {
    alert(arg1);
};
document.getElementById("test").foo("String 1");​

类似的东西？

var arg1 = { 
    foo: function(arg2) { } 
};
arg1.foo(arg2)

更新

您应该能够将函数添加到对象上：

var test = document.getElementById('test');
test.foo = function(arg) {
    alert(this.innerHTML + " : " + arg);
};
test.foo("Hello");

http://jsfiddle.net/sJSDS/

定义要使用的函数：

function original_foo(color) {
    this.style.backgroundColor = color;
}

然后遍历所有dom节点，并将函数附加为方法：

var all_nodes = document.querySelectorAll("*");
for (var i in all_nodes) {
    var node = all_nodes[i];
    node.foo = original_foo;
}

现在调用方法：

var d = document.getElementById("d2");
d.foo("red");
document.getElementById("d1").foo("green");

请参阅以下jsfiddle：http://jsfiddle.net/bjelline/G9e9C/

您可以通过以下方式解决：

function foo(arg1, arg2) {
   if (typeof arg1 == 'function')
      arg1(arg2); // or 'return arg1(arg2)' if necessary
   else
      return false;
}

您可以使用轻松测试

foo(alert,'hello world');
相关文章：