Javascript Debugging in Chrome - object name?

Question

Not knowing what "the thing circled in the image below" is called makes my question hard to find an answer to.

What is the name of the thing I've circled in the picture below? What is actually is (myObject.myFunction) is irrelevant. I want to be able to write that out to the console. I've tried the following:

console.log(sp);  // -- outputs the text that is the actual function (e.g. 'function(config){ ... }'
console.log(sp.constructor); // -- outputs 'function Function(){ [native code] }'
console.log(sp.constructor.name); // -- outputs 'Function'

Thanks,
Dave.

What am I!

Edit - to try and clarify the question, I've removed the old image (where the object is something to do with ExtJS), and replaced with the above.

I don't want to log down what te function is, or what "properties" it contains (if we're using it like a class) - I just want the text I've circled red.

The this keyword is called "context" or "this binding" or "thisArg". — Bergi
– Bergi, Commented Jul 10, 2014 at 22:37
I don't think you can access that name programmatically. It seems to be a mere feature of a clever debugger. — Bergi
– Bergi, Commented Jul 10, 2014 at 22:38
Thanks Bergi. (I've badly worded my question - I know what "this" is, I just don't know what the thing I've circled red should be referred to as!). But, yes, I think you're right - I don't think Chrome makes this accessible in code. Shame! — Dave Salomon
– Dave Salomon, Commented Jul 10, 2014 at 22:56

Retsam · Accepted Answer · 2014-08-07 04:44:36Z

3

myObject.myFunction is just the name that Chrome has assigned to that function. It's not actually the name of that function; by definition, an anonymous function has no name:

console.log(fooFunc.name) //"fooFunc"
console.log(foo.name); //""
console.log(myObject.myFunction.name) //""

But, it's helpful for functions to have human-readable names, even if the function is anonymous, so, when an anonymous function is created, Google Chrome keeps track of the property that function is assigned to and stores that as the name of that function.

You'll also see that name show up in stack traces. If you were to throw an error within myObject.myFunction, and look at the stack trace, it would look something like:

Error
    at myObject.myFunction (<anonymous>:2:41)
    at <anonymous>:2:6
    at Object.InjectedScript._evaluateOn (<anonymous>:704:39)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:643:52)
    at Object.InjectedScript.evaluate (<anonymous>:557:21)

The key is, this really isn't a feature of javascript itself, but rather a feature of how Chrome implements javascript. (Though I'd be surprised if other browsers don't do something similar)

answered Aug 7, 2014 at 4:44

Retsam

33.8k11 gold badges73 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dave Salomon Over a year ago

And as such (if I'm reading this correctly) - you can't write that ('internal') property out to the console. I guess it is inplementation-dependant. (Firebug doesn't store it at all, IE11 stores it as [object (myObject.myFunction)] on the prototype object.. etc. Thanks!

Collectives™ on Stack Overflow

Javascript Debugging in Chrome - object name?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related