Question

我想尽可能简单地向函数表达式添加方法。就我而言，我使用函数表达式，但是函数声明也可以。由于函数是对象，所以我认为这是可能的。 但是如何？

详细信息：

我想尽可能简单和直接地添加方法，所以我既不想使用构造函数也不希望继承。

以下代码将方法（setListener）添加到函数（secondsEvent）中，该方法没有构造函数和继承，但不在匿名函数表达式中，我希望以某种方式实现该方法（请参见注释）：

function listener1 (date) {
    console.log("listener1: " + date);
}

function listener2 (date) {
    console.log("listener2: " + date);
}

var secondsEvent = function () {
    //The following causes "listener is not defined" in firefox console                                                      
    //listener: listener1,                                                                                                   

    //The following causes "function statement requires a name" in firefox console,                                          
    //and if I give the function a name, I get "secondsEvent.setListener is not a function".                                  
    //Thus I add the property after this function expression.                                                                   
    //setListener: function (newListener) {                                                                                  
    //    listener = newListener;                                                                                            
    //},                                                                                                                     
    secondsEvent.listener(new Date());
    var timeout = setTimeout(secondsEvent, 1000);
}

// Thus the following 5 lines are needed.                                                                                    
secondsEvent.listener = listener1;
secondsEvent.setListener = function (newListener) {
    secondsEvent.listener = newListener;
    console.log("listener now " + secondsEvent.listener.name);
}

secondsEvent();
secondsEvent.setListener(listener2);

代码产生以下输出：

listener1: Fri Dec 28 2018 21:55:05 GMT+0100 (Central European Standard Time) 
listener now listener2 
listener2: Fri Dec 28 2018 21:55:06 GMT+0100 (Central European Standard Time) 
listener2: Fri Dec 28 2018 21:55:07 GMT+0100 (Central European Standard Time) 
.....

更新：

最初，我使用道格拉斯·克罗克福德（Douglas Crockford）的术语“函数文字”代替了函数表达式，但现在更新了标题和问题。

为响应Teemu的建议，我尝试了以下代码：

function listener1 (date) {
    console.log("listener1: "+date + "<br>");
}

function listener2 (date) {
    console.log("listener2: "+date + "<br>");
}

var secondsEvent = function () {
    secondsEvent.listener = listener1;
    secondsEvent.setListener = function (newListener) {
        secondsEvent.listener = newListener;
        console.log("listener now " + secondsEvent.listener.name);
    }
    clearTimeout(secondsEvent.timeout);
    secondsEvent.listener(new Date());
    secondsEvent.timeout = setTimeout(secondsEvent, 1000);
};

secondsEvent();
secondsEvent.setListener(listener2);

但是，其输出如下：

listener1: Sat Dec 29 2018 10:47:48 GMT+0100 (Central European Standard Time)<br> test.js:2:5
listener now listener2 test.js:27:2
listener1: Sat Dec 29 2018 10:47:49 GMT+0100 (Central European Standard Time)<br> test.js:2:5
listener1: Sat Dec 29 2018 10:47:50 GMT+0100 (Central European Standard Time)<br>

为避免每次调用secondsEvent.listener时都设置属性secondsEvent.setListener和secondsEvent，我使用以下内容：

secondsEvent.listener = secondsEvent.listener || listener1;
secondsEvent.setListener = secondsEvent.setListener || function (newListener) {
    secondsEvent.listener = newListener;
    console.log("listener now " + secondsEvent.listener.name);
}

是否存在仅将属性设置一次的更好的解决方案？也许一些js初始化器成语？（我知道将其从函数中拉出来是另一种解决方案，但这导致了我要避免的第一个解决方案，因为在函数表达式（或函数声明，无论使用哪种方式）中都包括属性定义会更好。），然后再使用它们。

Answer 1

您说的是“函数文字”，但是JavaScript中没有这样的东西。不过，我们确实提到了function expression。

您可以考虑使用Object.assign来使对象（以文字形式提供）合并为（函数）对象：

function listener1 (date) {
    console.log("listener1: "+date);
}

function listener2 (date) {
    console.log("listener2: "+date);
}

var secondsEvent = Object.assign(function () {
    clearTimeout(secondsEvent.timeout);
    secondsEvent.listener(new Date());
    secondsEvent.timeout = setTimeout(secondsEvent, 1000);
}, {
    listener: listener1,
    setListener(newListener) {
        this.listener = newListener;
        console.log("listener now " + this.listener.name);
    }
});

secondsEvent();
secondsEvent.setListener(listener2);

传统选择

以下不是您的要求，但是我还是提供了它作为比较。

将行为和数据结合起来的更传统的方法是从一个对象开始。在这里，我们不扩展具有额外属性的函数；该函数成为具有以下属性的对象的方法：

function listener1 (date) {
    console.log("listener1: "+date);
}

function listener2 (date) {
    console.log("listener2: "+date);
}

var secondsEvent = {
    listener: listener1,
    start() {
        clearTimeout(this.timeout);
        this.listener(new Date());
        this.timeout = setTimeout(() => this.start(), 1000);
    },
    setListener(newListener) {
        this.listener = newListener;
        console.log("listener now " + this.listener.name);
    }
};

secondsEvent.start(); // secondsEvent is not a function. We call a method
secondsEvent.setListener(listener2);

尽管在这里您需要使用.start()来调用该函数，但它具有与其他大多数对象一样的外观和工作方式：该API的用户不会感到惊讶。

Answer 2

您使用的语法看起来像对象或更适合于类语法。从您的问题还不清楚，您是否正在尝试避免上课。尽管您提到要避免使用构造函数，但我假设您是不想使用类。

您可以在函数中使用方法

function methodFunction () {
   return {
       myMethod (argument) {
           if (argument) console.log(argument)
           return new Date()
       }
   }
}

methodFunction().myMethod('heres something i want to pass my function method')
// will console.log heres something i want to pass my function method
console.log(methodFunction().myMethod())
// will console.log the date as it is returned from the function method

这是我们第一次调用函数时，我们传入字符串“这是我想通过函数方法传递的内容”，我们从函数方法中注销，并以参数“自变量”的形式出现

第二次我们不传递字符串，因此没有任何控制台记录该函数的副作用，而是将返回的新Date（）记录为该函数的返回值

Answer 3

我只回答问题的第一部分，而忽略了“用例”。有一个古老而破旧的短语：“ JS中的一切都是对象。”是的，除了基本元素外，其他所有内容都会更正确。

但是函数，它们实际上是对象，可调用对象。这意味着这些函数对象可以具有值或方法形式的属性。最初的问题是：“ [如何]向函数[object] 添加方法”。

答案很简单，获得对该函数的引用，并向所引用的函数添加属性（方法也是属性），就像将属性添加到常规中一样对象，仅此而已。还是？有几种情况需要将属性分配给函数，而该函数可能已经以不同的方式分配给了内存。现在，问题可以归结为“如何在需要的时候获取对函数的引用？”

定义函数的主要方法有三种：

声明的函数（声明的函数始终具有名称）[fn1]
命名函数表达式（可以分配给变量或在其他地方使用）[fn2]
匿名函数表达式（可以分配给变量或在其他地方使用）[fn3]

＃1 是最简单的情况，您可以使用其名称（包括函数主体本身）在当前作用域中的任何地方引用已声明的函数。因此，您可以通过在fn1.method = function () {...}体内或在函数外部使用相同的符号进行fn1来为此函数创建方法。

＃2 ，您只能在函数正文中使用给定的名称。如果需要在此函数之外分配方法，请使用变量的名称，或者在函数作为参数传递给另一个函数的情况下，请使用参数名引用fn2。

＃3 在函数主体内部未提供对函数本身的任何引用。但是，如果将此函数分配给变量，则变量名称可用于在函数体内引用函数本身，前提是该函数未作为IIFE执行。在函数主体之外，变量的名称可在初始化后立即用于引用该函数。

函数方法中this的值是什么，您不能相信它引用了“方法拥有”函数。如果您需要在方法中引用this，则最好使用实际对象而不是函数。

请注意，在JS中，使用函数对象的属性不是常规用例。通常使用真实对象代替。充分利用功能对象的属性的一个一般示例是jQuery的$，它实际上是一个函数，但也具有一些方法和属性。

在函数表达式（或函数声明）中添加方法

3 个答案:

传统选择