在 Javascript 中委托函数调用答案

【问题标题】：Delegating a function call in Javascript在 Javascript 中委托函数调用
【发布时间】：2015-04-12 04:44:17
【问题描述】：

在 Javascript 中有没有办法拥有像 c# 中的委托？

c#中的示例

Object.onFunctionCall = delegate (vars v) {
    Console.WriteLine("I can do something in this private delegate function");
};

我想用我的 Javascript 让我的主要对象在很长一段时间内做某事，并偶尔拍摄一个委托以进行一些更新。所有这些都无需更改我班级的代码本身以适应网页。

function mainObject() {
    this.onUpdate = function() { //Potentially the delegate function here
    }
}

var a = new mainObject();
a.onUpdate = Delegate {
      $(".myText").text("Just got a delegate update");
}

我不知道它是否足够清楚.. 还没有找到这方面的资源，所以我想没有办法这样做吗？

注意：我不是在这里查看 jquery Click 委托事件，而是像在 c# 中那样委托函数调用

告诉我

【问题讨论】：

JavaScript 中的所有函数（使用function .. 创建）是“委托”——也就是说，它们是First Class Functions。您可能还对Function.bind 感兴趣，以便保留this 上下文（这更类似于C#-delegate）。另请阅读相关问题。
您是否有一个“自动触发”自身的函数示例，就像 c# 中所述的那样？
如果将 Delegate { 替换为 function () {，则显示的 JavaScript 代码将按原样“工作”。例如，在底部：调用a.onUpdate() 将更新文本。如果谈论 C# 中的事件（它们本身不是委托），那么这是一个不同的概念。显示的示例 C# 代码不会“自动触发”.. 不确定是什么意思。
“自动开火”是什么意思？委托本身就存在并等待调用。在 JavaScript 中有一个常见的 immediately invoked functions 模式，但不清楚这是否是你要找的。span>
OP，你应该在问题中提供一个链接到这个“委托”事物的定义，这样非 C# 的人就可以更好地理解你在问什么。

标签： javascript delegates

【解决方案1】：

您正在寻找的是“观察者模式”，如所述，例如。 here.

但是由于您对 jQuery 感兴趣，所以您无需为自己编写观察者模式而烦恼。 jQuery 已经以 .on() method 的名义实现了一个观察者，可以在 jQuery 集合上调用它，以在每次分派本机或自定义事件时触发回调函数。

这是一个例子：

$(function() {
    //attach a custom event handler to the document
    $(document).on('valueChange', function (evt) {
        $(this).find("#s0").text(evt.type);
        $(this).find("#s1").text(evt.value);
        $(this).find("#s2").text(evt.change);
        $(this).find("#s3").text(evt.timestamp).toLocaleString();
    });

    //customEvent(): a utility function that returns a jQuery Event, with custom type and data properties
    //This is necessary for the dispatch an event with data
    function customEvent(type, data) {
        return $.extend($.Event(type||''), data||{});
    };

    //randomUpdate(): fetches data and broadcasts it in the form of a 'changeValue' custom event
    //(for demo purposes, the data is randomly generated)
    function randomUpdate() {
        var event = customEvent('valueChange', {
            value: (10 + Math.random() * 20).toFixed(2),
            change: (-3 + Math.random() * 6).toFixed(2),
            timestamp: new Date()
        });
        $(document).trigger(event);//broadcast the event to the document
    }
});

Here's a demo，带有“开始”和“停止”按钮，用于自定义事件的常规“间隔”调度。

注意事项

在某些情况下，将事件分别广播到四个数据跨度可能更合适。
在网络上，您会发现提到了更方便的jQuery.event.trigger({...}) 语法。不幸的是，这是 jQuery 的一个未记录的特性，在 v1.9 或更高版本中消失了。

【讨论】：

5 年后 - 才意识到 $(this).find("#s3").text(evt.timestamp).toLocaleString(); 应该是 $(this).find("#s3").text(evt.timestamp.toLocaleString());

【解决方案2】：

虽然最初的问题是通过解决根本问题（观察者 - 模式）得到解决的，但有一种方法可以在 JavaScript 中实现委托。

C# 委托模式在使用上下文绑定的原生 JavaScript 中可用。 JavaScript 中的上下文绑定是通过 .call 方法完成的。该函数将在第一个参数给出的上下文中调用。示例：

function calledFunc() {
  console.log(this.someProp);
}

var myObject = {
  someProp : 42,
  doSomething : function() {
    calledFunc.call(this);
  }
}

myObject.doSomething();
// will write 42 to console;

【讨论】：