All geek questions in one place

Difference between setter and getter definition style in Javascript

I studied setter and getter in JavaScript:

code1:

http://jsfiddle.net/imrukhan/7j8ZS/3/

ref: http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/

<html>
    <head>
        <script>
            var Person = function(name){
                this.name = name;
                defineGetter(this, "Name", function() {
                    console.log("inside getter method");
                    return this.name;
                }); 
                defineSetter(this, "Name", function(val) {
                    console.log("inside setter method");
                    this.name = val;
                }); 
            }
            function accessorDescriptor(field, fun) {
              var desc = { enumerable: true, configurable: true };
              desc[field] = fun;
              return desc;
            }

            function defineGetter(obj, prop, get) {

                if (Object.defineProperty)
                    return Object.defineProperty(obj, prop, accessorDescriptor("get", get));
                if (Object.prototype.__defineGetter__)
                    return obj.__defineGetter__(prop, get);

                throw new Error("browser does not support getters");
            }

            function defineSetter(obj, prop, set) {

                if (Object.defineProperty)
                    return Object.defineProperty(obj, prop, accessorDescriptor("set", set));
                if (Object.prototype.__defineSetter__)
                    return obj.__defineSetter__(prop, set);

                throw new Error("browser does not support setters");
            }

            function fun(){
                var per = new Person("ABC");
                console.log(per.Name);
                per.Name = "XYZ";
                console.log(per.Name);
            }

        </script>
    </head>
    <body>
        <input type="button" value="click" onclick="fun()"/>
    </body>
</html>

Codex2:

http://jsfiddle.net/imrukhan/9H2U6/1/

ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers

<!DOCTYPE HTML>

<html>
    <head>
        <script>
            var Person = function(name) {
                this._name = name;
            };

            Object.defineProperty(Person.prototype, "name", {
                get: function() {
                    console.log("inside getter method");
                    return this._name;
                },
                set: function(val){
                    console.log("inside setter method");
                    this._name = val;
                }
            });

            function fun(){
                var per = new Person("ABC");
                console.log(per.name);
                per.name = "XYZ";
                console.log(per.name);
            }

        </script>
    </head>
    <body>
        <input type="button" value="click" onclick="fun()"/>
    </body>
</html>

My queries:
1) Is there a functional difference between CODE1 and CODE2 other than style?
2) What is the best way to define Setter and Getter in JavaScipt (CODE1 / CODE2 / Please suggest any other)?

Thanks for the help.

+4
2

:

CODE1 Person getter setter. , 10 , 20 .

CODE2 getter one setter, Person.

, -, , CODE2.

+1

CODE1 ECMA5, , .

CODE2 ECMA5.

, , ECMA5.

, .

defineGetter

defineProperty

, , 2 .

CODE1 ( , prototype)

var defineGetter,
    defineSetter;

function accessorDescriptor(field, fun) {
    var desc = {
        enumerable: true,
        configurable: true
    };

    desc[field] = fun;
    return desc;
}

if (Object.defineProperty) {
    defineGetter = function defineGetter(obj, prop, get) {
        return Object.defineProperty(obj, prop, accessorDescriptor("get", get));
    };

    defineSetter = function (obj, prop, set) {
        return Object.defineProperty(obj, prop, accessorDescriptor("set", set));
    };
} else {
    if (Object.prototype.__defineGetter__) {
        defineGetter = function (obj, prop, get) {
            return obj.__defineGetter__(prop, get);
        };
    } else {
        throw new Error("browser does not support getters");
    }

    if (Object.prototype.__defineSetter__) {
        defineSetter = function (obj, prop, set) {
            return obj.__defineSetter__(prop, set);
        };
    } else {
        throw new Error("browser does not support setters");
    }
}

function Person(name) {
    this.name = name;
};

defineGetter(Person.prototype, "Name", function () {
    console.log("inside getter method");
    return this.name;
});

defineSetter(Person.prototype, "Name", function (val) {
    console.log("inside setter method");
    this.name = val;
});

CODE2 ( defineProperty)

var Person = function (name) {
    this.name = name;
};

Person.prototype.name = {
    get: function () {
        console.log("inside getter method");
        return this.name;
    },

    set: function (val) {
        console.log("inside setter method");
        this.name = val;
    }
};
0

Source: https://habr.com/ru/post/1540830/

More articles:


All Articles