可以获取在使用函数创建的对象内部的 let 变量的值吗?

huangapple go评论74阅读模式
英文:

Can I get a value of a let inside an object created with a function?

问题

The value of the 'ans' property in each object remains associated with the initial value passed to the 'createCounter' function when the object was created. You can directly access its current value using the object's property, as demonstrated in the code. No need to worry, it's a good question, and you're in the early stages of learning JavaScript. Feel free to ask more questions if you have any! 😊

英文:

I want to understand better the mechanics of values inside objects created with funcitons.

let createCounter = function(init) {
    let ans = init
    return {
        increment(){return ++ans},
        decrement(){return --ans},
        reset(){return ans = init},
        ans,
    }
};
myob1=createCounter(3)
myob2=createCounter(10)
console.log(myob1.increment()) // 4
console.log(myob2.increment()) // 11
console.log(myob1.ans) // 3
console.log(myob2.ans) // 10

Does the value of 'ans' property stay constant after creating an object?
Can i directly get it's current value within this syntax?

As I understood the value of the let is bond with each object after creating and when I try to get it's value using object property, it simply appeals to the 'ans=init' and displays starting value?
BTW i'm in the very beggining of my JS studying, please don't be angry on me :з

答案1

得分: 5

问题在于当你返回{ans}时,这等同于写{ans: ans},其中第二个ans引用了ans的当前值。

这意味着当你稍后给ans分配不同的值时,对象{ans}仍然引用初始值。

要解决这个问题,可以使用getter。将{ans}更改为{get ans() {return ans}},像这样:

let createCounter = function(init) {
    let ans = init
    return {
        increment() { return ++ans },
        decrement() { return --ans },
        reset() { return ans = init },
        get ans() { return ans },
    }
};
myob1 = createCounter(3)
myob2 = createCounter(10)
console.log(myob1.increment()) // 4
console.log(myob2.increment()) // 11
console.log(myob1.ans) // 4
console.log(myob2.ans) // 11
英文:

The problem is that when you return {ans}, that's equivalent to writing {ans: ans}, where the second ans references the current value of ans.

This means that when you later assign a different value to ans, the object {ans} still references the initial value.

To resolve this, use a getter. Change {ans} to {get ans() {return ans}} like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let createCounter = function(init) {
    let ans = init
    return {
        increment(){return ++ans},
        decrement(){return --ans},
        reset(){return ans = init},
        get ans() {return ans},
    }
};
myob1=createCounter(3)
myob2=createCounter(10)
console.log(myob1.increment()) // 4
console.log(myob2.increment()) // 11
console.log(myob1.ans) // 4
console.log(myob2.ans) // 11

<!-- end snippet -->

答案2

得分: 1

{
        increment(){return ++ans},
        decrement(){return --ans},
        reset(){return ans = init},
        ans: 3 // if init was 3,
}

所以当你更新 ans 的值时,你不会更新传递给对象的值(因为该函数已经计算了其返回值),而只会更新函数中存在的变量 ans

要访问对象的属性 ans,你应该使用 this(就像在类中一样):

let createCounter = function(init) {
    let ans = init
    return {
        increment(){return ++this.ans},
        decrement(){return --this.ans},
        reset(){return this.ans = init},
        ans,
    }
};

Andrew Parks 的解决方案也有效。两种方法都可以使用。

英文:

What you are returning actually is this :

{
        increment(){return ++ans},
        decrement(){return --ans},
        reset(){return ans = init},
        ans: 3 // if init was 3,
}

So when you update the value of ans, you don't update the value that was passed in the object (because the function has already computed its return value) but only the variable ans present in the function

To access the attribute ans of the object, you should use this (just like if you are in a class)

let createCounter = function(init) {
    let ans = init
    return {
        increment(){return ++this.ans},
        decrement(){return --this.ans},
        reset(){return this.ans = init},
        ans,
    }
};

Andrew Parks solution works as well. Both approachs can be used

huangapple
  • 本文由 发表于 2023年7月4日 20:08:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/76612463.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定