javascript - 如何设置接收器

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 镜像

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');