一种声明JavaScript Options-Object的正确方法？

i wanted to access an API which responses with some JSON. Therefore I want to configure an 'options' object, which stores all the data which are needed to access the api (url, tokens, id, etc.).

我想访问一个响应一些JSON的API。因此，我想配置一个'options'对象，它存储访问api所需的所有数据（url，tokens，id等）。

The following version works:

以下版本有效：

var Options = function (token, id) {
  this.token = token;
  this.id = id;
  this.host = 'http://super-cool-api.com/';
  this.path = 'api/fetch/id/';
  this.url = '' + this.host + this.path + this.id + '?token=' + this.token
};
var options = new Options('abc', 3);

// options.url = "http://super-cool-api.com/api/fetch/id/3?token=abc"

Basically 'options.url' is all I want. But I've tried to declare a more comprehensive form for the 'options' object, like this:

基本上'options.url'就是我想要的。但我试图为'options'对象声明一个更全面的表单，如下所示：

var options = {
  token : 'abc',
  id : 3,
  host : 'http://super-cool-api.com/',
  path : 'api/fetch/id/',
  url : '' + this.host + this.path + this.id + '?token=' + this.token
};

// options.url = "undefinedundefinedundefined?token=undefined"

Okay, I understood that I have to access the values in options.url somehow else. But how? Is this even common practice?

好的，我明白我必须以其他方式访问options.url中的值。但是怎么样？这甚至是常见做法吗？

What about my first solution? Is it recommended to do it this way?

我的第一个解决方案呢？建议这样做吗？

Regards, Christoph

此致，Christoph

2 个解决方案

#1

Unfortunately this in your second example points to the object that contains the code, i.e. NOT options, that is why the variables are undefined. The first solution is fine, as would be:

不幸的是，在第二个示例中，这指向包含代码的对象，即NOT选项，这就是变量未定义的原因。第一个解决方案很好，因为：

function makeOptions(token, id) {
    var host = 'http://super-cool-api.com/',
        path : 'api/fetch/id/';
    return {
        token: token,
        id: id,
        host: host,
        path: path,
        url: '' + host + path + id + '?token=' + token
    };
}

Choose what suits you best.

选择最适合你的。

#2

Both ways you show are OK ways of doing this, as for the most accepted / standard way of doing it, I wouldn't really know.

你展示的两种方式都可以做到这一点，对于最常见/标准的做法，我真的不知道。

Here is an example of how to get the Second Option you showed to work correctly :

以下是如何使您显示的第二个选项正常工作的示例：

Set the url of options to be a function that builds the URL and returns it.

将选项的url设置为构建URL并返回它的函数。

var options = {
    token : 'abc',
    id : 3,
    host : 'http://super-cool-api.com/',
    path : 'api/fetch/id/',
    url : function() {
        return '' + this.host + this.path + this.id + '?token=' + this.token;
    }
};

And then you can retrieve the value using the following : var testUrl = options.url();

然后，您可以使用以下命令检索值：var testUrl = options.url（）;

Here is an example JSFiddle for both of your examples, plus my example (Option 3)

以下是两个示例的JSFiddle示例，以及我的示例（选项3）

#1