Error using javascript getters & setters in IE

Question

I was reading John Resig's article about JavaScript Getters and Setters when I found this code:

function Field(val){
    this._value = val;
}
Field.prototype = {
    get value(){
        return this._value;
    },
    set value(val){
        this._value = val;
    }
};

I've tested and it works perfectly with all major browsers, except the damn IE, which gives me the SCRIPT1003: ':' expected error. After wondering for a while, I realized that this error happens because IE doesn't recognize JavaScript Getters and Setters, so I thinks that get value and set value are a syntax error.

Is there any way to make this code cross-browser?

Thanks in advance

EDIT:

I also tried to check if the browser supports getters&setters:

if(window.__lookupSetter){
    Field.prototype = {
        get value(){
            return this._value;
        },
        set value(val){
            this._value = val;
        }
    };
}else{
    Field.prototype = {
        value: function(val){
            if(val)
                return this._value = val;
            return this._value;
        }
    };
}

But before executing the code, IE checks for syntax errors, and it wrongly finds these errors in the get and set lines.

which version of IE? This works in IE9. Getters and setters are not supported properly in earlier versions. — Eric, Jun 30 '12 at 18:54
possible duplicate of [Javascript getters/setters in IE?](http://stackoverflow.com/questions/1077106/javascript-getters-setters-in-ie) — Eric, Jun 30 '12 at 18:56
Then your page is running in compatibility mode. Try adding a ` ` to the top of your HTML, if you don't already have one. — Eric, Jun 30 '12 at 18:57
@Eric no, it's not duplicated because I'm not working with DOM elements — Danilo Valente, Jun 30 '12 at 18:58
@Eric I know, but my problem is that even if I put an `if` statement to check if the browser is the IE, the erros persists — Danilo Valente, Jun 30 '12 at 19:03
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/13256/discussion-between-eric-and-mark-linus) — Eric, Jun 30 '12 at 19:04
This code works fine for me on IE9. If you open the console, is the document mode set to IE9? — pimvdb, Jun 30 '12 at 19:06
The problem is not only IE9, but all older browsers that think that get an set are syntax errors, even if I put then inside an if statement — Danilo Valente, Jun 30 '12 at 19:11

Eric · Accepted Answer · 2012-06-30T19:36:58.410

6

You can define properties without using new syntax with Object.defineProperty:

function Field(val){
    this.value = val;
}
Object.defineProperty(Field.prototype, 'value', {
    get: function(){
        return this._value;
    },
    set: function(val){
        this._value = val;
    }
});

That way, the code won't give a syntax error in older browsers.

WRT to your edit, your fallback code:

Field.prototype = {
    value: this._value
};

Will not work. this will point to the global object - window.

The only way to truly use getters and setters cross browser is not to use them at all:

Field.prototype = {
    getValue: function() {
        return this._value;
    },
    setValue: function(val) {
        this._value = val;
    }
};

edited Jun 30 '12 at 19:36

answered Jun 30 '12 at 19:04

Eric

95,302
53
242
374

2

+1 for suggesting the ECMA5 method - easily the best getter/setter implementation JavaScript has ever had. In case it helps the questioner, I wrote [a blog post](http://www.mitya.co.uk/blog/2012/Mar/JavaScript-getters-and-setters-varying-approaches-204) on this approach vs. older approaches which may or may not help. – Mitya Jun 30 '12 at 19:24
3

@Utkanos the link is broken. – Lasse Christiansen May 09 '14 at 09:03
as of this comment link is broken. – escape-llc Feb 14 '19 at 17:17

Error using javascript getters & setters in IE

1 Answers1