I am writing a simple javascript object that have getter and setter methods. Plus I put some additional code in to setter method, so it is executed each time I change property value. So here is my idea

listOfFileToLoad[name] = {
    _loaded : xhr.loaded,
    get loaded(){ return this._loaded; },
    set loaded( value ) {
        this._loaded = value;
        //on update
        updateLoadingList();
    },
    _total : xhr.total,
    get total(){
        return this._total;
    },
    set total( value ){
        updateLoadingList();
        this._total = value ;
    }
};

I found this code in one thread here on stackoverflow. I am wondering if it's correct using this as I used it, I mean java script is still function language.

The problem arrise when I try to do the following

listOfFileToLoad[name].loaded( 0 )

or

listOfFileToLoad[name].loaded()

Thanks you.

I am writing a simple javascript object that have getter and setter methods. Plus I put some additional code in to setter method, so it is executed each time I change property value. So here is my idea

listOfFileToLoad[name] = {
    _loaded : xhr.loaded,
    get loaded(){ return this._loaded; },
    set loaded( value ) {
        this._loaded = value;
        //on update
        updateLoadingList();
    },
    _total : xhr.total,
    get total(){
        return this._total;
    },
    set total( value ){
        updateLoadingList();
        this._total = value ;
    }
};

I found this code in one thread here on stackoverflow. I am wondering if it's correct using this as I used it, I mean java script is still function language.

The problem arrise when I try to do the following

listOfFileToLoad[name].loaded( 0 )

or

listOfFileToLoad[name].loaded()

Thanks you.

• javascript

• 1 The whole point of using getter and setters is that you use them as properties, not as function calls. Use listOfFileToLoad[name].loaded with no brackets – edc65 Commented Jan 12, 2017 at 15:15

4 Answers 4

You've created the object with loaded as a gettable/settable property, so to set it you'd use

listOfFileToLoad[name].loaded = 0;

To get the value, just reference it:

console.log("Loaded value:" + listOfFileToLoad[name].loaded);

That code snippet is fine, but your way of accessing the data isn't.

In JavaScript, using the get and set keywords to create getters and setters makes them function more like attributes than functions.

var obj = {
    _subject: 'world',

    sayHello: function () {
        console.log('Hello ' + this._subject);
    },

    get subject() {
        return this._subject;
    },

    set subject(newSubject) {
        this._hello = newSubject;
        this.sayHello();
    }
}

Given that structure, the following two statements would result in an error:

// incorrect usage
obj.subject();            // TypeError: obj.subject is not a function
obj.subject('Internet');  // TypeError: obj.subject is not a function

The following is the correct usage:

// correct usage
obj.subject;               // returns 'world'
obj.subject = 'Internet';  // prints 'Hello Internet'

Getters and setters define properties that cause a function to run when their value is read or assigned.

You can't call them as functions directly.

The syntax listOfFileToLoad[name].loaded( 0 ) means: Get the value of the loaded property, which is the return value of calling the loaded getter function, and call that value as a function.

That value is this._loaded which is initially xhr.loaded.

If this._loaded is a function, then you can call it as one with the syntax you are using. If it is something else, you can't.

If you wanted to call the setter function, then you use a regular assignment: listOfFileToLoad[name].loaded = "some value".

Code looks okay, this approach is proper.

Why your code is failing is cause get and set are set on properties, not functions, so you need to use them this way:

listOfFileToLoad['name'].loaded;
listOfFileToLoad['name'].loaded = 2;