Question

在某些Javascript代码（具体是node.js）中，我需要使用一组未知的参数调用函数而不更改上下文。例如：

function fn() {
    var args = Array.prototype.slice.call(arguments);
    otherFn.apply(this, args);
}

上面的问题是当我调用apply时，我通过传递this作为第一个参数来改变上下文。我想将args传递给名为的函数，而不用更改被调用函数的上下文。我基本上想要这样做：

function fn() {
    var args = Array.prototype.slice.call(arguments);
    otherFn.apply(<otherFn's original context>, args);
}

修改：添加有关我的具体问题的更多详细信息。我正在创建一个Client类，其中包含一个socket（socket.io）对象以及与连接有关的其他信息。我通过客户端对象本身公开套接字的事件监听器。

class Client
  constructor: (socket) ->
    @socket    = socket
    @avatar    = socket.handshake.avatar
    @listeners = {}

  addListener: (name, handler) ->
    @listeners[name] ||= {}
    @listeners[name][handler.clientListenerId] = wrapper = =>
      # append client object as the first argument before passing to handler
      args = Array.prototype.slice.call(arguments)
      args.unshift(this)
      handler.apply(this, args)  # <---- HANDLER'S CONTEXT IS CHANGING HERE :(

    @socket.addListener(name, wrapper)

  removeListener: (name, handler) ->
    try
      obj = @listeners[name]
      @socket.removeListener(obj[handler.clientListenerId])
      delete obj[handler.clientListenerId]

请注意，clientListenerId是自定义唯一标识符属性，与the answer found here基本相同。

Answer 1

＆＃39; this＆＃39; 是对您的函数上下文的引用。这非常重要。

如果你的意思是在这样的不同对象的上下文中调用它：

otherObj.otherFn(args)

然后简单地将该对象替换为上下文：

otherObj.otherFn.apply(otherObj, args);

那应该是它。

Answer 2

如果我理解正确的话：

                          changes context
                   |    n     |      y       |
accepts array    n |  func()  | func.call()  |
of arguments     y | ???????? | func.apply() |

PHP有一个函数，call_user_func_array。不幸的是，JavaScript在这方面缺乏。您似乎使用eval()来模拟此行为。

Function.prototype.invoke = function(args) {
    var i, code = 'this(';
    for (i=0; i<args.length; i++) {
        if (i) { code += ',' }
        code += 'args[' + i + ']';
    }
    eval(code + ');');
}

是的，我知道。没有人喜欢eval()。它既缓慢又危险。但是，在这种情况下，您可能不必担心跨站点脚本，至少，因为所有变量都包含在函数中。实际上，JavaScript本身并没有本地功能，这太糟糕了，但我认为这样的情况我们有eval。

证明它有效：

function showArgs() {
    for (x in arguments) {console.log(arguments[x]);}
}

showArgs.invoke(['foo',/bar/g]);
showArgs.invoke([window,[1,2,3]]);

Firefox控制台输出：

--
[12:31:05.778] "foo"
[12:31:05.778] [object RegExp]
[12:31:05.778] [object Window]
[12:31:05.778] [object Array]

Answer 3

简单地说，只需将此分配给您想要的内容，即 otherFn ：

function fn() {
    var args = Array.prototype.slice.call(arguments);
    otherFn.apply(otherFn, args);
}

Answer 4

如果将函数绑定到对象并且在任何地方使用绑定函数，则可以调用apply with null，但仍然可以获得正确的上下文

{{1}}

Answer 5

在调用函数时，可以解决JavaScript中可能发生的上下文更改的一种方法是使用属于对象构造函数的方法，如果您需要它们能够在{{{通过有效地创建一个本地私有变量来存储原始this标识符，1}}并不意味着父对象。

我承认 - 就像大多数关于JavaScript范围的讨论一样 - 这还不完全清楚，所以这里是我如何做到这一点的一个例子：

this

Answer 6

这几天您可以使用rest parameters：

function fn(...args) {
    otherFn(...args);
}

唯一的缺点是，如果要在fn中使用某些特定的参数，则必须从args中提取它：

function fn(...args) {
    let importantParam = args[2]; //third param
    // ...
    otherFn(...args);
}

这是一个示例（ES下一版本将其简化）：

// a one-line "sum any number of arguments" function
const sum = (...args) => args.reduce((sum, value) => sum + value);

// a "proxy" function to test:
var pass = (...args) => sum(...args);
console.log(pass(1, 2, 15));

Answer 7

我不会接受这个作为答案，因为我仍然希望有更合适的东西。但到目前为止，根据对这个问题的反馈，我现在正在使用这种方法。

对于将调用Client.prototype.addListener或Client.prototype.removeListener的任何类，我确实将以下代码添加到其构造函数中：

class ExampleClass
  constructor: ->
    # ...
    for name, fn of this
      this[name] = fn.bind(this) if typeof(fn) == 'function'

   message: (recipient, body) ->
     # ...

   broadcast: (body) ->
     # ...

在上面的示例中，message和broadcast将在实例化时始终绑定到新的ExampleClass原型对象，允许我原始问题中的addListener代码工作

我相信你们当中有些人想知道我为什么不做以下事情：

example = new ExampleClass
client.addListener('message', example.bind(example))
# ...
client.removeListener('message', example.bind(example))

问题在于，每次调用.bind( )时，它都是一个新对象。这意味着以下情况属实：

example.bind(example) != example.bind(example)

因此，removeListener永远不会成功，因此我在实例化对象时绑定了一次方法。

Answer 8

由于您似乎想要使用Javascript 1.8.5中定义的bind函数，并且能够检索传递绑定函数的原始this对象，我建议重新定义Function.prototype.bind函数：

Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
        throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP = function () {},
        fBound = function () {
            return fToBind.apply(this instanceof fNOP && oThis
            ? this
            : oThis,
            aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    /** here's the additional code **/
    fBound.getContext = function() {
        return oThis;
    };
    /**/

    return fBound;
};

现在，您可以使用以下命令检索调用bind函数的原始上下文：

function A() {
    return this.foo+' '+this.bar;
}

var HelloWorld = A.bind({
    foo: 'hello',
    bar: 'world',
});

HelloWorld(); // returns "hello world";
HelloWorld.getContext(); // returns {foo:"hello", bar:"world"};

Answer 9

经过很长一段时间后，我才想起这个问题。现在回想一下，我认为我在这里真正想要实现的是类似于React库如何与其自动绑定一起工作。

基本上，每个函数都是一个被包装的绑定函数：

function SomeClass() {
};

SomeClass.prototype.whoami = function () {
  return this;
};

SomeClass.createInstance = function () {
  var obj = new SomeClass();

  for (var fn in obj) {
    if (typeof obj[fn] == 'function') {
      var original = obj[fn];

      obj[fn] = function () {
        return original.apply(obj, arguments);
      };
    }
  }

  return obj;
};

var instance = SomeClass.createInstance();
instance.whoami() == instance;            // true
instance.whoami.apply(null) == instance;  // true

Answer 10

只需将属性直接推送到函数的对象，并使用它自己的“上下文”调用它。

function otherFn() {
    console.log(this.foo+' '+this.bar); // prints: "hello world" when called from rootFn()
}

otherFn.foo = 'hello';
otherFn.bar = 'world';

function rootFn() {
    // by the way, unless you are removing or adding elements to 'arguments',
    // just pass the arguments object directly instead of casting it to Array
    otherFn.apply(otherFn, arguments);
}

是否可以在不更改上下文的情况下调用function.apply？

10 个答案: