9

Just experimenting with different inheritance techniques in JS, and came across something mildly discomfiting about Crockford's Prototypal Inheritance pattern:

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

var C,
    P = {
         foo:'bar',
         baz: function(){ alert("bang"); }
         }

C = object(P);

It's all good - except when you log to console - the object appears as F. I've seen classical emulation in which you can repoint the constructor - is there a similar method to coerce the objects (console) reference?

Kevin Brown-Silva
  • 40,873
  • 40
  • 203
  • 237
sunwukung
  • 2,815
  • 3
  • 41
  • 56

2 Answers2

14

The issue is that it's referring to the name of the constructor function. This quickly becomes a discussion about function expressions and statements and the name property. Turns out is is completely impossible to create a new named function at runtime without using eval. Names can only be specified using a function statement function fnName(){} and it's not possible to construct that chunk of code dynamically aside from evaling it. var fnExpression = function(){} results in an anonymous function assigned to a variable. The name property of functions is immutable so it's a done deal. Using Function("arg1", "arg2", "return 'fn body';") also only can produce an anonymous function despite being similar to eval.

It's basically just an oversight in the JS spec (Brendan Eich stated he regrets defining the display name the way he did 10 or so years ago) and a solution is being discussed for ES6. This would introduce more semantics for deriving a function's display name for debug tools or perhaps an explicit way to set and adjust it.

For now you have one route: eval, or some other form of late execution of configurable code. (eval by any other name...)

function displayName(name, o){
  var F = eval("1&&function "+name+"(){}");
  F.prototype = o; 
  return new F;
}

The function statement alone won't return from eval, but doing 1 && fnStatement coerces the thing into an expression which is returnable.

(Harmony Proxies also allow setting up functions that report names which you can configure without eval but that's not usable except in Node.js and Firefox currently).

I'll make a note here that all those "evil" functions that have been shat upon by Crockford and many others ALL have their place. eval, with, extending natives all enable specific techniques which are otherwise completely impossible and it's not wrong to use them when the occasion is right. It's just likely that most people aren't qualified to make the judgement of when that time is right. In my opinion using eval harmlessly to make up for poor language semantics and tools while waiting for a solution is perfectly acceptable and won't cause you any harm as long as you're not funneling arbitrary code into that eval statement.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
  • 2
    ah, gutted - that's kind of a big gotcha... thanks for the detailed explanation – sunwukung Nov 10 '11 at 09:04
  • First, it's *function declaration* rather than *function statement*. That may seem pedantic but there is a distinction: *function statement* is the name given by Mozilla to its non-standard implementation of what looks like a function declaration within a block (e.g. `if (true) { function f() {} }`). See http://kangax.github.com/nfe/. – Tim Down May 10 '12 at 15:08
  • Second, putting `1&&` in front of what would otherwise be function declaration turns it (as you said) into a function expression, so there is a mistake earlier on where you say *"Names can only be specified using a function statement"*: in fact, you've shown that a function name can also be specified via a named function expression. – Tim Down May 10 '12 at 15:13
0

If I log the object I can see: Object { foo="bar", baz=function()}, so I don't understand your problem...

Anyway, can use Object.create() instead of Crockford's function:

var P = {
         foo:'bar',
         baz: function(){ alert("bang"); }
         }

var C = Object.create (P);

console.log (C):

Object { foo="bar", baz=function()}

Gabriel Llamas
  • 18,244
  • 26
  • 87
  • 112