简体   繁体   中英

JavaScript object property returns undefined

I've looked through many threads already, googled a lot and tried to fix this problem on my own, but I can't. I'm trying to break down my problem.

I'm receiving a String stored in the local Storage.

var c = localStorage.getItem('item');

Then I'm passing this value into a constructor to assign this value to an object's property. This is the class and the constructor.

class dataSet {
    constructor ( item ) {
      this.item = item;
    }

    get item() {
      return this._item;
    }

With the help of a button, I call the following function on click:

function buildSet() {
    var currentSet = new dataSet( c );
    document.write(currentSet.item);
    document.write(c);
}

The document.write(c) is just a test to see if there is any value stored, and yes, my 'test' string is stored. As a result, I get:

undefinedTest

I'm very new to JavaScript, I know that somehow the dataSet object did not get the value and didn't assign it, but I have no idea left, how to fix it. I literally read every existing thread for this topic on stackoverflow but could not come up with a solution. Thank you for you time.

Your error is within the constructor!

You are missing a _

It should be this._item = item; instead of this.item = item;

Thus your getter, ie:

get item() {
  return this._item;
}

returns undefined as there is no _item property...

As someone has commented to you before, the problem here is because you are missing a _ in the constructor. But if this doesn't solve your problem, maybe the problem is related to the value of the item in localStorage. Here you have an example of your code working with a simple String:

 var c = 'hello world'; class dataSet { constructor (item) { this._item = item; } get item () { return this._item; } } function buildSet() { var currentSet = new dataSet(c); alert(currentSet.item); alert(c); } 
 <!DOCTYPE html> <html> <body> <button onclick="buildSet()">click me</button> </body> </html> 

lets do some checks and see the behaviour of your code, because it works as expected, the only thing is that you are missing some checks and some characters.

 //make sure that C has a value, maybe it is undefined from here. var c = "fakeItem"; // also lets do a test with an undefined value. var d; class dataSet { constructor(item) { this._item = item; } get item() { //you were missing a _ here. return this._item; } } function buildSet() { var currentSet = new dataSet(c); //this works because C is defined var dSet = new dataSet(d); //this does not work because D is not defined // it works as expected! console.log(currentSet.item); document.write("currentSet.item: " + currentSet.item); document.write("\\n<br>"); document.write("c: " + c); document.write("\\n<br>"); // also works as expected, it will show undefined console.log(dSet.item); document.write("dSet.item: " + dSet.item); document.write("\\n<br>"); document.write("d: " + d); } 
 <button onclick="buildSet()">SET TEST</button> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM