Question

你能看一下这个：

(function ($) { 
    $.fn.extend({
        grid: function (settings) {
            var defaults = {
                data: [
                    ['Code','Name','Email','Other'],
                    [1,'John','john@domain.com','Johny'],
                    [2,'Bob','bob@domain.com','Bobby'],
                    [3,'Jenny','jenny@domain.com','Jen'],
                    [4,'Mary','mary@domain.com','Maryann']
                ],
                test: this.data.length
            };

            var config = $.extend(defaults, settings);

            return this.each(function(){
                this.innerHTML = config.data.length;
                this.innerHTML += "<br />" + config.test;
            });

        }
    });
}(jQuery));

$('.content').grid();

http://jsfiddle.net/w8PG6/

解释为什么两个结果不同？

同样如何达到预期效果？

Answer 1

查看this.data时this.data.length的内容。它是根据this匿名函数grid中jQuery.fn的值进行评估的。{{1}}。所以它是jQuery.fn.data。 Function.length是函数的arity（参数个数），它是2（key，value）。

Answer 2

问题在于，当你调用this.data.length时，它实际上是在计算jQuery data函数的长度，而不是defaults的长度。此外，在defaults.data被分配之前，您无法计算{{1}}的长度。

看一下这个工作示例：http://jsfiddle.net/w8PG6/1/

Answer 3

this不是指正在构建的对象，而是指当前上下文中的this。在您的情况下this碰巧有一个名为data的属性。与：比较：

var foo = {
    bar  : "bar",
    test : this.bar
}

这根本行不通。 foo.test为undefined，除非在同一上下文中有var bar。我认为不可能在同一语句中分配这两个值，因为在完成赋值语句之前，数组不会被分配给任何可以访问的内容。你能做的最好的是：

var defaults = { data : [ ... ] };
defaults.test = defaults.data.length;

谁能解释为什么array.length会在这里返回两个不同的结果？

3 个答案: