JavaScript方括号函数调用

在我遇到这一行时浏览了jQuery源代码：

jQuery(this)[ state ? "show" : "hide" ](); 

有什么优势吗？

 state ? jQuery(this).show() : jQuery(this).hide(); 

？

独立示例：

 var object = { foo: function() { alert('foo'); }, bar: function() { alert('bar'); } }; object[true ? 'foo' : 'bar'](); object[false ? 'foo' : 'bar'](); 

Answer 1

性能没有优势。 但是如果你的函数中有很多参数，那么代码长度（如果你认为它是一个优势）和DRY原则（不要重复代码）是有优势的。

考虑以下：

 obj[ cond ? "foo" : "bar" ]("param1", "param2", "param3"); 

与：

 cond ? obj.foo("param1", "param2", "param3") : obj.bar("param1", "param2", "param3"); 

如您所见，您以第二种方式重复“大量”代码

希望这可以帮助。 干杯

Answer 2

在您的示例中，两者之间没有区别

 jQuery(this)[ state ? "show" : "hide" ](); 

和

 state ? jQuery(this).show() : jQuery(this).hide(); 

但是，正方形可用于调用函数而不使用它的名称：

 var myFunctionName = 'show'; jQuery(this)[ myFunctionName ](); 

为什么这有用？ 在上面的例子中，它完全没用。 但我们可以找到一些可能很好的情况：

 // list of available methods var effects = [ 'hide', 'slideUp', 'fadeOut' ]; // get a random index between 0 and effects.length-1 (2 in this case) var randomIndex = Math.floor(Math.random() * (effects.length)); // get the method name var methodToCall = effects[ randomIndex ]; jQuery(this)[ methodToCall ](); 

此代码段将选择一个随机方法并在jQuery对象上调用该方法。 不是很好吗？ 🙂

Answer 3

有什么好处吗？

不，除了略短的代码，而不是重复jQuery(this).

然而，通过首先声明例如$this可以减轻重复。

我没有发现这种模式特别容易阅读，所以我自己唯一一次使用它是因为参数列表是非平凡的，并且不依赖于调用哪个方法。

Answer 4

jQuery方式更简洁，并遵循DRY原则。 我认为这是第二个例子的主要优势。

Answer 5

顺序，我排名：

1. 代码可靠地按预期工作（没有解决方案需要错误）
2. 代码易读且易于维护（缺乏可读性或可维护性会导致错误并降低开发速度）
3. 代码是DRY（重复对可读性，可维护性和有时性能不利）
4. 代码很短（如果它实现了以上所有的东西，通常会更短）

我的问题是jQuery(this)[ state ? "show" : "hide" ](); jQuery(this)[ state ? "show" : "hide" ](); 这是不是很多人习惯于阅读和习惯阅读的常见设计模式。 因此，它不具有超级可读性，并且很容易混淆未来试图维护此代码的人（导致错误）。 正如我上面的优先事项所示，如果两者存在分歧，我更倾向于对DRY的可读性。

在这种情况下，我可能会写：

 var $this = jQuery(this); state ? $this.show(): $this.hide(); 

在我看来，不是很短，但更具可读性。