如何设置接收器

Question

如何重写以下形式的函数：

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

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

arg1.foo(arg2);

<小时/> 的修改 我发现使用jQuery，我可以做到这一点。

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

使用Javascript不使用jQuery的方法是什么？

Answer 1

解决方案1 ​​

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

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

今天

jsFiddle的慢所以这里是JS Bin mirror

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

Answer 2

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();
    }

}

Answer 3

这样的东西？

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/

Answer 4

定义您要使用的功能：

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/

Answer 5

你可以这样解决：

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

您可以使用以下方法轻松测试：

foo(alert,'hello world');