获取在Chrome控制台中打印的功能名称 [英] Get a function name like printed in Chrome console

问题描述

考虑此代码：

var o = {};
o.f = function(){};
new o.f;

Chrome打印 的{} 进入控制台。你知道如何调用 o.f 部分吗？更重要的是，有没有办法在不使用控制台的情况下获得此结果？我想从函数本身中提取方法的名称，也就是说，没有任何其他信息。

Chrome prints o.f {} into the console. Do you know how this o.f part is called? More importantly, is there any way to get this result without using the console? I'd like to extract the name of a method from the function itself, that is to say, without any additional information.

我已经知道如何获取名称这种情况：

I already know how to get the name in this case :

function f(){}
f+'' // "function f(){}"

但在上述情况下它的行为方式不同。

But it does not behave the same way in the situation described above.

以下内容主要来自评论。

我想知道是否有技术这个词来讨论这个的模式，比如说namespace，identifier或function path。然后，我想知道是否有办法从网页中加载的脚本中检索此信息。以下问题可以帮助您理解我的目标，即第一个代码块与我的想法非常接近的段落： Chrome保留每个对象的构造函数？。

I wanted to know if there is a "technical" word to talk about this o.f pattern, let's say for example "namespace", "identifier", or "function path". Then, I was wondering if there was a way to retrieve this information from a loaded script in a webpage. The following question may help you in understanding my goal, the paragraph which is right after the first code block is quite close to my idea : Does Chrome retain each object's constructor?.

也许我应该提到我的最初目标是在运行时生成文档：/像反射API这样的东西会有在这种情况下有所帮助。更确切地说，我正在寻找一种方法，将方法的名称包含在函数的分解形式中。看：

Maybe I should have mentioned that my original goal was to generate a documentation at runtime :/ Something like a reflection API would have been helpful in this case. More precisely, I was looking for a way to include the name of a method into the decompilated form of the function. Look :

function Class(){}
Class.prototype.method = function(){};

Class.prototype.method +''给出 function（）{} 。我想注入方法的名称来获得这个结果： function method（）{} 。

Class.prototype.method + '' gives function(){}. I'd like to inject the method's name to get this result : function method(){}.

问题是我没有任何关于我当前正在序列化的功能的信息，因为当用户点击链接时会发生操作。我知道我可以轻松地将名称存储在某处，例如将数据绑定到锚元素，这对我来说很明显，我只是想知道是否有办法以与Chrome相同的方式检索此数据。

The problem is that I don't have any information about which function I'm currently serializing since the operation occurs when the user clicks a link. I know I could easily store the name somewhere, binding the data to the anchor element for example, that's obvious to me, I was just curious to know if there was a way to retrieve this data the same way as Chrome.

推荐答案

嗯，这似乎是一个简单的问题，就所有这些结构的命名而言：

Well, this seems a simple enough question, as far as the naming of all these constructs goes:

o.f = function(){};

是一个常见语句，由更常见的表达式组成。 o.f 只是访问对象属性的两种方法之一，通常称为点符号。虽然我相信JS，dot（。）并不真正被视为运算符，但我将其称为运营商的成员。

接下来我们有着名的 assignment-operator ，它将右侧操作数分配给左侧（对象的成员 o ，称为 f ）。

右手表达式（需要计算为单数值）是一个函数定义，它不是单独使用一个语句，而是用作表达式。鉴于这一事实，我们将函数的这种用法称为函数表达式。

is a common statement, consisting of even more common expressions. o.f is simply one of 2 ways to access an objects' properties, commonly referred to as the dot-notation. Though I believe in JS the dot (.) isn't really seen as an operator, I'll be referring to it as the member-of operator henceforth.
Next we have the well-known assignment-operator, which assigns the right-hand operand to the left (member of the object o, called f).
The right-hand expression (needs to be evaluated to a singular value) is a function definition that, instead of a statement on its own, is used as an expression. Given that fact, we refer to this usage of functions as function expressions.

在这种特殊情况下，函数没有名称，它是一个匿名功能。在内部，大多数 - 如果不是所有引擎 - 都会给它一个名字，但这不是JS应该知道或确实关心的东西。就JS而言，此函数没有名称，只能通过 o.f 访问。如果你像这样调用这个函数： of（），它的上下文将是对象 o 的上下文，有效地制作这个函数表现为方法。

所以基本上你的语句如下所示：分配，并在需要时创建 o 名为 f ，一个匿名函数。函数本身没有名字。

In this particular case, the function has no name, it's an anonymous function. Internally, most -if not all engines- will give it a name, but that's not something JS should know or indeed care about. As far as JS is concerned, this function has no name, and is only accessible through o.f. If you call this function like so: o.f(), its context will be that of the object o, effectively making this function behave as a method.
So basically your statement reads like this: "Assign, and create if required, to the member of o called f, an anonymous function." The function itself has no name.

考虑一下：

var o = {f: function(){console.log('I am a function');}};
var foobar = o.f;
foobar();//logs I am a function

所以说 函数的名称 f 并不总是适用。其他变量或属性可以引用相同的函数。这是因为函数是 第一类对象 ，它们可以被返回，传递给任何东西，并由它们分配。

So saying the name of the function o.f is f doesn't always apply. Other variables or properties can reference the same function. That's because functions are first class objects, they can be returned, passed to and assigned to, from and by anything.

然后，答案是使用以下两种方法中的任何一种：

The answer, then, is to use either one of these 2 approaches:

您可以通过添加名称来更改函数表达式，将其转换为命名函数表达式：

You can change the function expression by adding a name, to turn it into a named function expression:

f.o = function newName(){};

newName 名称，除了旧版IE的版本，在函数范围之外不可用。这是ECMA规范所要求的查看详细信息这里。无论如何，现在我们可以检查：

The newName name is, apart from older versions of IE, not available outside of the functions' scope. This is required by the ECMA specifications see the details here. Anyway, now we can check for that:

var func = function func(){console.log(func);};
//same name:
func();//logs function func(){}
var foobar = func;
foobar();//logs function func(){}
func = 123;//<-- no longer function
foobar();//still function func(){}//func is still accessible
var hidden = (function()
{
    return function named()
    {
        console.log(named);//access name
    };
}());
hidden();//logs function named(){}
console.log(named);//undefined -> not visible outside the function itself

函数的名称仅限于其自己的范围。

The name of the function is restricted to its own scope.

使用一个有点hacky的正则表达式，并且不会引用引用相同函数对象的两个变量/属性：

Use a regex, which is slightly hacky, and doesn't pick up on two variables/properties referencing the same function object:

o = {f: function(){console.log('I am a function');}};
for (var pName in o)
{//probably add o.hasOwnProperty(pName) check to be safe
    if (o[pName] instanceof Function)
    {
        console.log(o.f.toString().replace(
            /^function\s*\(/,
            'function o.'+pName+'(')
        );
    }
}

这将函数字符串化（给出 function（）{/ * body * /} ）并替换函数（与函数< propertyName>（。如果函数已经有自己的名称，则不替换该名称。

This stringifies the function (giving function (){/*body*/}) and replaces function ( with function <propertyName>(. If the function already had a name of its own, that name is not replaced.

这篇关于获取在Chrome控制台中打印的功能名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！