将属性添加到JavaScript函数是否可以接受？

Question

Is it acceptable to add an attribute or value to a JavaScript function?

Example:

var f = 1;

function foo (param) {
    f++;
}

var fooFunc = foo;

fooFunc.dummy = f;

console.log('fooFunc: ' + fooFunc);
console.log('fooFunc.dummy: ' + fooFunc.dummy);

The above example creates a function ( foo ), then assigns it to a new variable ( fooFunc ) and then adds a dummy attribute to fooFunc .

When run, this example prints the text of the function first, and then it prints the expected value ( 1 in this case). When printing the function, it doesn't show any indication of the dummy value:

fooFunc: function foo(param) {
    f++;
}
fooFunc.dummy: 1 

JsFiddle here - open the browser's JavaScript console to see the log messages: http://jsfiddle.net/nwinkler/BwvLf/

Why does this work? And where is the dummy attribute stored, and why isn't it printed when I log the function?

Lastly, even if this works, is it a good idea (or an acceptable practice) to use this? I don't want to start an open ended discussion on this, but rather see if there's documented uses of this, or people discouraging this in JavaScript coding guidelines.

Answer 1

Everything except primitives ( null, undefined, number, string, boolean ) in JavaScript are objects. So functions are basically objects.

Objects in JavaScript can have properties and methods, hence functions too.

all functions inherit from Function.prototype and has certain properties ( name, length ) and methods ( .call, .apply ) coming through this chain.

It is sometimes very useful to keep properties attached to the function itself, like cache information, number of invocations etc. There is nothing wrong out in using it this way.

More details : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

Answer 2

Let's have a look at ECMAScript documentation (Which is the standard JavaScript is based on). Here's the 3rd. version of it:

http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf

Go to chapter 15, Native ECMAScript Objects. 15.3 > Function objects.

There's a lot of interesting information there concerning your question, but the first thing worth noticing is that function is an object. As an object, it has attributes (predefined and that you can assign yourself). For example, try:

console.log('fooFunc.name: ' + fooFunc.name);

It should display "foo" in your case. Since it's documented quite well, you can use it as a standard way, though it is not so well-spread and may seem a bit unusual.

Hope this helps.

Answer 3

It is normal object behavior, whether "acceptable" or not.

By using the function keyword you are actually calling the native predefined Function() constructor. Like any object constructor it returns an object after building it. Like any object, the returned object can have properties, including other functions as method properties.

var adder = function(a, b){return a+b};
adder.subtracter = function(a, b){return a-b};
console.log(adder(1,2)); // 3
console.log(adder.subtracter(1,2)); // -1

TIP: if you want to see the adder object and its subtracter method, switch to DOM view from Console view after running the above code in console and then search for "adder". You'll see the object there, and then you can collapse to see what it's made from, including a subtracter object.

Of course, a function object is a special native object, which makes it possible to make calls like this: adder() and actually run some code. The fact that a function object is harder to inspect for custom attached properties, combined with its native special object treats (read built-in restrictive behavior), should give you a hint that, while it's possible, attaching custom properties is not the intended nor a good use of a function object.