1

How can I rewrite a function that is in the form:

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

into a form such that arg1 becomes the receiver, to be used like the following?

arg1.foo(arg2);

Edit I found out that with jQuery, I can do this.

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

What is the way to do this with Javascript not using jQuery?

4

5 に答える 5

2

jQuery が返すオブジェクトは、DOM オブジェクトではなく、jQuery オブジェクトです。これらには 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();
    }

}
于 2012-10-25T19:26:29.947 に答える
2

解決策 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");​
于 2012-10-18T20:41:54.570 に答える
1

Something like this?

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

arg1.foo(arg2)

Update

You should just be able to add the function onto the object:

var test = document.getElementById('test');

test.foo = function(arg) {
    alert(this.innerHTML + " : " + arg);
};

test.foo("Hello");

http://jsfiddle.net/sJSDS/

于 2012-02-24T16:17:24.530 に答える
0

使用する関数を定義します。

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/

于 2012-10-25T17:13:22.347 に答える
-3

次の方法で解決できます。

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

次の方法で簡単にテストできます。

foo(alert,'hello world');
于 2012-02-24T16:25:02.693 に答える