Question

好的，这是一个非常简单的JS对象。三个属性是字符串，第四个是函数。

var myStringBuilder = {
  protocol: "http://",
  host: "www.mysite.com",
  fullPath: this.protocol + this.host + "/just/for/fun/",
  getFullString: function() {
    return this.fullPath;
  }
}

console.log(myStringBuilder.getFullString());  // Returns "NaN/just/for/fun"

在fullPath中，this.protocol和this.host都未定义。为什么会这样？

jsfiddle

Answer 1

内部JavaScript对象基于散列算法构建。因此，它们的键可能不会按照我们定义它们的顺序逻辑出现。在这种情况下，首先定义fullPath，并在分配值时，它取决于partOne和partTwo尚未定义的位置。这就是定义undefined时fullPath {。}}的原因。

如果你必须像这样构造一个Object，我会推荐一个构造函数，比如这个

function MyStringBuilder() {
    this.protocol = "http://";
    this.host = "www.mysite.com";
    this.fullPath = this.protocol + this.host + "/just/for/fun/";
}

MyStringBuilder.prototype.getFullString = function() {
    return this.fullPath;
}

myStringBuilder();

此方法的优点是，您可以动态自定义对象创建。例如，您可以传递protocol或host这样的值

function MyStringBuilder(protocol, host) {
    this.protocol = protocol || "http://";
    this.host     = host     || "www.mysite.com";
    this.fullPath = this.protocol + this.host + "/just/for/fun/";
}

通过此更改，您应该能够在运行时决定protocol和host。

Answer 2

要解决部分未定义的哈希，可以使用函数而不是计算值。这将推迟评估。

var myStringBuilder = {
  partOne: "http://",
  partTwo: "www.mysite.com",
  fullPath: function(){ return this.partOne + this.partTwo + "/just/for/fun/" }
}

Answer 3

如果我同意之前答案中的所有有价值的信息，为了回答问题中的精确点，fullPath属性未正确定义，因为它未在函数上下文中初始化，因此{{1不引用对象myStringBuilder。

使用`this`的JS对象给出了一个未定义的结果

3 个答案: