Question

我正在创建一个jQuery插件，我称之为以下

$('#element').helpify({
    msg : 'This is my message',
    closeButton: {
        text: "Close this",
        colour: "red"
    }
});

然后在插件中我设置了一些默认值并使用extend来创建一个带有如下参数的对象：

var settings = $.extend({
    title: 'Default Title',
    msg : 'Default message',
    closeButton: {
        text: "Close",
        colour: "red",
        btnClass: "pull-right"
    }
}, options);

我知道我可以通过编写 settings.title 来访问标题，我不确定如何访问 closeButton 中的属性。

非常感谢任何帮助，谢谢！

修改

当我在上面的第一个代码块中传递一些内容时，我可以访问属性，但是在第二个代码块中设置一些默认值然后使用传入的'options'对象应该提供一些属性 - 如果我没有传递任何属性并依赖默认值，那么 closeButton 中的属性不起作用，但其他属性不起作用，即 msg

编辑2 这是一个JS小提琴，显示我的意思 - http://jsfiddle.net/U5W5G/1/

Answer 1

~~只需使用settings.closeButton.text~~

可以使用以下两种方法之一访问JavaScript属性：

点符号

访问属性的最常见和最基本的方法 - 但是非法变量名称（保留字除外 - 它们在ES5下被允许作为属性名称）将不起作用。
```
foo.bar; // OK
foo.class; // only in ES5 and up
foo.&^&%^&@&(@&&@; // SyntaxError: yeah, it doesn't work
```
方括号表示法

使用方括号表示法时，它可以采取任何操作 - 但是它将被转换为字符串（JavaScript中的所有对象属性都是字符串）：
```
// both are the same
foo['bar'];
foo["bar"];

// this is fine
foo['&^&%^&@&(@&&@'];

// this is equivalent to foo["[object Object]"]
foo[{}];
```

选择你的想象 - 但除非你需要，否则最有可能使用点符号来访问JavaScript对象属性。

编辑：关于你的jsFiddle，这就是为什么它不起作用：

var options = {
    // Passing these options in
    msg: 'This is my message',
    closeButton: {
        text: "Close this",
        colour: "red"
    }
},
    // These are the defaults if none are passed in
    settings = $.extend({
    title: 'Default Title',
    msg: 'Default message',
    closeButton: {
        text: "Close",
        colour: "red",
        btnClass: "pull-right"
    }
}, options);
console.log(settings.closeButton.text);
console.log(settings.closeButton.colour);
console.log(settings.closeButton.btnClass);
/*
    settings.closeButton.text
    settings.closeButton.colour
    settings.closeButton.btnClass
*/

当您调用$.extend()时，后面参数中的任何属性都将替换先前参数中的属性。在这种情况下，closeButton调用中的$.extend()属性将被options中的属性替换，因为参数稍后会给出。

以下是此操作的示例：

var a = { foo: 'bar' };
var b = { foo: 'baz' };
var c = $.extend(a, b);
var d = $.extend(b, a);

console.log(c.foo); // baz (b was last argument)
console.log(d.foo); // bar (a was given last)

要解决此问题，请交换参数，或者（在这种情况下可接受）执行深层复制，方法是在true前加上参数：

$.extend({ a: { b: 1, c: 2 } }, { a: { b: 3 } }).a; // { b: 3 }
$.extend(true, { a: { b: 1, c: 2 } }, { a: { b: 3 } }).a; // { b: 3, c: 2 }

访问jQuery插件属性

1 个答案: