在没有“this”的情况下访问JavaScript中对象中的变量

Question

function Peon(number) {
  this.number = number;

  this.inc = function() {
    number = number + 1;
  };

  return true;
}
var p = new Peon(10);

function returnNumber() {
  p.inc();
  alert(p.number);
}

<input id="b00" type="button" value="Click" onclick="returnNumber()">

该代码无法按预期工作。有没有一种方法可以让它工作而不必写

this.number=this.number+1;

Here 这是一个微不足道的选择，但在更大的代码中没有 this.* 会让它更具可读性。是否可以？

Answer 1

我能看到的唯一可读的方式是：

this.inc = function() {
   this.number++;
};

否则，在你的“更大的代码”假设中，你可以这样做：

this.inc = function() {
   var number = this.number; // obviously simple here.  Imagine more complexity
   number++;
};

Answer 2

是的，您不需要在 JavaScript 中使用“this”。您可以通过闭包而不是“this”访问变量

function createPeon(number) {

  function inc() {
    number = number + 1;
  };

  function getNumber() {
    return number;
  }

  return {
    inc,
    getNumber
  };
}
var p = createPeon(10);

function returnNumber() {
  p.inc();
  alert(p.getNumber());
}

<input id="b00" type="button" value="Click" onclick="returnNumber()">

Answer 3

您可以将 number 设置为“私有”，但是您需要一个 getter：

function Peon(number) {
  var number = number;

  // increment
  this.inc = function() {
    number++;
  };

  // a simple getter
  this.getNumber = function() {
    return number;
  }
}

var p = new Peon(10);

function returnNumber() {
  p.inc();
  alert(p.getNumber());
}

<input id="b00" type="button" value="Click" onclick="returnNumber()">

您应该阅读 Douglas Crockfords 的“The Good Parts”，了解有关如何使用此模式的更多信息，在 Google 图书。

另外，您不需要从构造函数返回某些内容，您的 return true 是多余的。

Answer 4

不可以，您必须使用 this 来引用 this 对象上的属性。请注意，JavaScript 中的 this 与其他一些语言（例如 C 或 Java）中的 this 非常不同。更多此处和此处。

您的代码所做的是访问传递给 Peon 构造函数的 number 参数，而不是您在中创建的 this.number 属性构造函数。这就是为什么它不能按预期工作，但也不会失败。

没有理由在 Peon 构造函数中定义 inc 操作，顺便说一句，并且有一些很好的理由不这样做（通过 < code>Peon 将获得该函数的自己的副本）。因此，您可以这样定义它：

function Peon(number) {
    this.number = number;
  
    // Don't return values out of constructor functions, it's
    // an advanced thing to do. In your case, you were returning
    // `true` which was being completely ignored by the JavaScript
    // engine because it's not an object. If you had returned an
    // object, the `this` object created for the `new Peon()` call
    // would have been thrown away and the object you returned
    // used instead.
}

Peon.prototype.inc = function() {
    ++this.number;
};

var p = new Peon(10);

function returnNumber() {
    p.inc();
    console.log(p.number); // shows 11, then 12, etc.
}

<input id="b00" type="button" value="Click" onclick="returnNumber()">

或者使用现代 JavaScript 功能 (ES2015+)：

class Peon {
    constructor(number) {
        this.number = number;
    }
    
    inc() {
        ++this.number;
    }
}

const p = new Peon(10);

function returnNumber() {
    p.inc();
    console.log(p.number); // shows 11, then 12, etc.
}

<input id="b00" type="button" value="Click" onclick="returnNumber()">

Answer 5

不是真的，但这更简洁

this.number++

实际上，作为旁注，您最好在 Peon 的构造函数之外声明 .inc。你可以用原型来做到这一点。这样，每次创建 Peon 类型的对象时，就不会重建 inc 函数。

Peon.prototype.inc = function(){
    this.number++;
}

或者，您可以使用 p.number++，而不是使用 p.inc()。这是我能想到避免使用 this 关键字的唯一方法。