你能说这是 Javascript Closure 的一个正确的例子吗？我们需要考虑避免闭包的地方在哪里？

Question

问题与原因

我的一位队友最终陷入了在 javascript 中实现函数挂钩的混乱局面。这是实际的代码

 function ActualMethod(){   
       this.doSomething = function() {
              this.testMethod();
        };

       this.testMethod = function(){
            alert("testMethod");
        };
   }


 function ClosureTest(){
       var objActual= new ActualMethod();   
    var closeHandler = objActual.doSomething;   
    closeHandler();     
    closeHandler.apply(objActual,arguments); //the fix i have added
    this.ActualTest = function() {
        alert("ActualTest");
        };
  }

在上面的代码中，var closeHandler 是在 ClosureTest() 的上下文中创建的，但它保存了 ActualMethod.doSomething 的处理程序。每当调用 closeHandler() 时都会出现“对象不支持此方法”错误。

这是因为 doSomething() 函数调用了另一个名为 this.testMethod(); 的方法。这里 this 指的是调用者的上下文而不是被调用者。所以我假设 closeHandler 绑定到实际创建的环境（ClosureTest）。即使它将处理程序保存到另一个上下文，它也只是暴露了其自身上下文的属性。

解决方案

为了避免这种情况，我建议使用apply来指定它需要执行的上下文。

closeHandler.apply(objActual,参数);

问题

是关闭的完美场景吗？？

你在 javascript 中遇到过哪些有趣的地方的闭包？

更新

是的，它很简单，我可以直接调用该方法。但问题是，在特定场景中，我需要拦截对实际方法的调用并在此之前运行一些代码，最后执行实际方法。

举个例子，我正在使用第 3 方 aspx 网格库，并且所有mouseclick 事件被它们的控件捕获。特别是通过鼠标单击进行分组，我需要拦截对其 ilbrary 方法的调用，并挂钩我的方法来执行，并将调用重定向到实际的库方法

希望这会有所帮助

Answer 1

更新：因为您可能在代码中遗漏了一些细节，所以很难在不遗漏实际代码要点的情况下将其调整为可行的内容。我确实认为我理解您所描述的根本问题。我希望以下内容有所帮助。

假设下面这个简单的例子：

// Constructor function.
function Example() {
    // Method:
    this.method = function() {
        alert("original method");
    }
}

// You would use it like this:
var obj = new Example();
obj.method(); // Calls original method.

要拦截这样的方法调用，你可以这样做：

function wrap(obj) {
    var originalMethod = obj.method;
    obj.method = function() {
        alert("intercepted call");
        originalMethod.apply(this, arguments);
    }
    return obj;
}

var obj = wrap(new Example());
obj.method(); // Calls wrapped method.

不幸的是，因为 method() 是在构造函数中定义的，而不是在原型上，所以你需要有一个对象实例来包裹物体。

---

原始问题的答案： doSomething() 函数用作使用 ActualMethod() 创建的对象的方法。您应该将其用作方法，而不是将其分离并在不同的上下文中将其用作函数。为什么不直接调用方法呢？

function ClosureTest(){
    var objActual = new ActualMethod();
    // Call method directly, avoid messy apply() calls.
    objActual.doSomething();
    this.ActualTest = function() {
        alert("ActualTest");
    };
}

如果您将一个方法（某个对象上的函数）分配给 Javascript 中的局部变量并调用它，上下文将会不同（this 的值会发生变化）。如果你不想让它发生，就不要这样做。

Answer 2

当我想要挂钩一个函数时，我使用以下 Function 方法，这也是闭包演示的一个很好的部分：

Function.prototype.wrap = function (wrapper) {
 var __method = this;
 return function() {
  var __obj = this;
  var args = [ __method.bind(__obj) ];
  for(var i=0; i<arguments.length; i++) args.push(arguments[i]);
  return wrapper.apply(__obj, args);
 }
};

然后执行类似以下操作：

ActualMethod = ActualMethod.wrap(function (proceed, option) {
  // ... handle option
  proceed(); // calls the wrapped function
});

proceed 绑定到其初始对象，因此您可以安全地调用它。