为什么javascript在多个赋值属性中连接函数名称？ [英] Why does javascript concatenate function names in multiple assignment to properties?

问题描述

这是一个边缘案例，可能是坏习惯，但它让我对一些js内部好奇。任何人都可以解释为什么chrome开发工具告诉我，我在这里创建了一个名为a.a.b.b的函数吗？

请注意，除非您正在分配属性，否则不会发生这种情况。否则，a和b似乎都会引用一个名为'b'的函数对象：

顺便说一下，我最初遇到这个这里当试图回答我自己的问题关于dat.gui.js。

这与语言规范没有任何关系。

这是DevTools对调试方便程度的增强，它

请记住我们曾经做过的事情吗？

函数F（）{} 
 //注意它是一个NAMED函数表达式
 F.prototype.asdf = function _asdf（）{debugger; }; 
 
 var f = new F（）; 
 f.asdf（）; 
  

然后在断点调试中，我们可以通过名称 _asdf 来自函数调用堆栈。否则，在（匿名函数）列表中做这件事会很麻烦。 b
$ b

匿名

分配

strong>功能作为对象属性，将附加一个别名。

  var a = {}，b = {} ; 
 a.a = b.b = function（）{debugger; }; 
 a.b = b.a = function _abba（）{debugger; }; 
  

请记住，这只是DevTools增强功能，方法仍然是匿名：

  aaname; //
 a.b.name; //_abba
  

但它在断点调试中非常有用：

  aa（）; 
 a.b（）; 
  

$ b

---

编辑：

p>我不太确定为什么别名是以 aabb 的形式生成的，它看起来很容易，但很傻......。然而，在实践中，我们很少做 a.a = b.b = func ... 事物（幸运的）。相反，我们在一个地方定义了一个方法，并在必要时执行 inheritence ，而不是直接复制引用。

所以在一个好的编程实践中，该别名应该并且准确地反映您定义该方法的位置。例如，在源代码中，断点中的别名 Dog.bark 清楚地映射到 Dog.prototype.bark ，即使它是调用一个 Puppy 实例，而且我们不必做老式命名的函数表达式。

 函数Dog（）{} 
 Dog.prototype.bark = function（）{alert（Woof！）}; //匿名函数表达式
函数Puppy（）{} 
 Puppy.prototype = new Dog（）; 
 
（新的Puppy（））。bark（）; //断点别名 - > Dog.bark 
  

还有一件事，当我发现这个功能时，我无法停止思考它 - 这是否意味着Chrome将很快实施ES6 级？多令人兴奋！

This is an edge case and probably bad practice, but it made me curious about some js internals. Can anyone explain why chrome dev tools tells me that I have created a function named a.a.b.b here?

Note that this does not happen unless you are assigning to a property. Otherwise both a and b appear to refer to a function object named 'b':

By the way, I originally encountered this here when trying to answer my own question about dat.gui.js .

解决方案

This has nothing to do with the language spec.
It's a DevTools enhancement for debugging convenience, which is ported recently in Chrome.

Remember what we used to do?

function F() {}
// notice it's a NAMED function expression
F.prototype.asdf = function _asdf() { debugger; }; 

var f = new F();
f.asdf();

Then in breakpoint debugging, we can find the method by its name _asdf from function call stack. Otherwise it's the pain in the ass to do that from a list of (anonymous function).

In latest Chrome, when you assign an anonymous function as an object property, an alias will be attached to it.

var a = {}, b = {};
a.a = b.b = function() { debugger; };
a.b = b.a = function _abba() { debugger; };

Remember, it's just a DevTools enhancement, the method remains anonymous:

a.a.name; // ""
a.b.name; // "_abba"

But it's very helpful in breakpoint debugging:

a.a();
a.b();

---

EDIT:

I'm not very sure why the alias is generated as a.a.b.b, it looks very easy but kind of... stupid. However, in practice we seldom do a.a = b.b = func... thing (lucky). Instead, we define a method in one place, and do inheritence when necessary, rather than copy reference directly.

So in a good programming practice, the alias should and would exactly reflect where you define the method. For example, alias Dog.bark in breakpoint clearly maps to Dog.prototype.bark in source code, even if it's called on a Puppy instance, and we don't have to do old school named function expression.

function Dog() {}
Dog.prototype.bark = function() { alert("Woof!") }; // anonymous function expression here
function Puppy() {}
Puppy.prototype = new Dog();

(new Puppy()).bark(); // break point alias -> Dog.bark

One more thing, when I discovered this feature, I can't stop thinking of it - does it imply that Chrome will implement ES6 class very soon? How exciting!

这篇关于为什么javascript在多个赋值属性中连接函数名称？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！