JavaScript方括号函数调用

Question

当我遇到这一行时浏览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首先声明可以减轻重复.

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