Question

这是我的代码：

function makeCounter(x) {
    x = x || 0;
    var obj = {
        value: x,
        increment: function(){
            x = x + 1;
            return x;
        },
        decrement: function() {
            x = x - 1;
            return x;
        }
    }
    return obj;
} 
var counter = makeCounter();

console.log(counter.increment()); // output is 1
console.log(counter.value); // output is 0

现在，我想知道如何编辑代码，以便在counter.increment（）之后该值将为1。

Answer 1

您需要在增加或减少之后更新值，并使用this.value代替x变量。

function makeCounter(value = 0) {
    return {
        value,
        increment () {
            return ++this.value;
        },
        decrement () {
            return --this.value;
        }
    };
} 

let counter = makeCounter();

console.log(counter.increment()); // output is 1
console.log(counter.value); // output is 1

Answer 2

使用value更新this.value并为其分配x值

function makeCounter(x) {
  x = x || 0;
  var obj = {
    value: x,
    increment: function() {
      x = x + 1;
      this.value = x
      return x;
    },
    decrement: function() {
      x = x - 1;
      this.value = x
      return x;
    }
  }
  return obj;
}
var counter = makeCounter();

console.log(counter.increment()); // output is 1
console.log(counter.value); // output is 1

Answer 3

您需要在增加或减少之后更新value，并使用this.value而不是x变量。

您可以看到我的代码：

function makeCounter(x) {
    x = x || 0;
    return  {
        value: x,
        increment: function(){
            this.value = this.value + 1;
            return this.value;
        },
        decrement: function() {
            this.value = this.value - 1;
            return this.value;
        }
    }
}
var counter = makeCounter();

console.log(counter.increment()); // output is 1
console.log(counter.value); // output is 1
console.log(counter.increment())//output is 2
console.log(counter.value); // output is 2

Answer 4

function makeCounter(x) {
    return {
        value: x || 0,
        increment () {
           // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment_() 
            return ++this.value;
        },
        decrement () {
           // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement_(--) 
            return --this.value;
        }
    };
} 

let counter = makeCounter();

console.log(counter.increment()); // output is 1
console.log(counter.value);

Answer 5

在嵌套的情况下，您有时可能无法使用它，可以使用对象的名称。只要您在函数中调用它

function makeCounter(x) {
    x = x || 0;
    var obj = {
        value: x,
        increment: function(){
            obj.value = obj.value + 1;
            return obj.value;
        },
        decrement: function() {
            obj.value = obj.value - 1;
            return obj.value;
        }
    }
    return obj;
} 
var counter = makeCounter();

console.log(counter.increment()); // output is 1
console.log(counter.value); // output is 1

Answer 6

您可以在要返回的对象上使用getter。在执行counter.value时，您可以控制自己执行任何喜欢的业务逻辑。

您可以像这样更改代码

function makeCounter(x) {
  x = x || 0;
  var obj = {
    get value() { return x; }, // Only change required
    increment: function() {
      x = x + 1;
      return x;
    },
    decrement: function() {
      x = x - 1;
      return x;
    }
  }
  return obj;
}
var counter = makeCounter();

console.log(counter.increment()); // output is 1
console.log(counter.value); // output is 1

JavaScript如何在函数内部更改参数？

6 个答案: