Is it possible to assign a value to an object to trigger an action/method?

Question

Example:

location = "http://www.mozilla.org";

You assign a string to a Location object to navigate to a new page.

Can it also be done with ordinary Javascript object?

The first method that comes to mind is setter, but it requires specifying the property name as Object.property.

The second method may be assignment overload, but it seems no such thing in Javascript.

kingshuk basak · Answer 1 · 2016-07-26T07:30:20.157

Well you can use Object.watch() property.
But as it is not supported in all browsers u need a Polyfill to be added to your file.
Apart from these readymade functions you can write your own function using setTimeout() or window.requestAnimationFrame() where you can check the specific property of the function in consecutive threads.

Example :

    var threadCheck = requestAnimationFrame ||
    webkitRequestAnimationFrame ||
    mozRequestAnimationFrame ||
    oRequestAnimationFrame ||
    msRequestAnimationFrame ||
    function(callback) {
        setTimeout(callback, 16);
    },

    oldProperty = {},

    watchFunction = function (obj, objProp) {
    var len = objProp.length,
        prop,
        i;
    for (i= 0; i < len; i++) {
        prop = objProp[i];
        oldProperty[prop] = obj[prop];
    }
    checkFunction();
},

checkFunction = function () {
    var prop;
    for (prop in oldProperty) {
        if (oldProperty[prop] !== obj[prop]) {
            executeFunction();
            oldProperty[prop] = obj[prop];
        }
    }
    threadCheck(checkFunction);
},

executeFunction = function () {
    console.log('changed')
},

obj = {
    propertyA : function() {},
    propertyB : 'check',
    propertyC : {
        dummy : 'xyz'
    },
    propertyD : 999
};

watchFunction(obj, ['propertyA', 'propertyB', 'propertyC', 'propertyD']);

Result(running the given code in the console of chrome browser, it's just a prototype, there are many scopes of improvements. Also unwatch() function has to be implemented):

obj.propertyA = function(){}
(){}
VM1016:35 changed
obj.propertyB = 'check'
"check"
obj.propertyB = 'check1'
"check1"
VM1016:35 changed
obj.propertyB = 'check1'
"check1"
obj.propertyB = 'check2'
"check2"
VM1016:35 changed
obj.propertyA = 'check2'
"check2"
VM1016:35 changed
obj.propertyA = function(){}
(){}
VM1016:35 changed
obj.propertyD = 999
999
obj.propertyD = 99
99
VM1016:35 changed
obj.propertyD = 991
991
VM1016:35 changed

score 1 · Answer 2 · edited May 23 '17 at 12:14

Yes by defining a property.

var test = function (msg) {
    alert(msg);
};

var d = Date.prototype;
Object.defineProperty(d, "year", {
    get: function () { return this.getFullYear() },
    set: function (y) { test(y); }
});

d.year = 2016;

→

Object.defineProperty(Window.prototype, "foo", {
    get: function () { return 'hi' },
    set: function (y) { alert('hi' + y); }
});

foo = 2016;

Stackoverflow - Javascript getters and setters for dummies?

Mozilla - Working with objects

Mozilla - Object.defineProperty()

Deepak Bhatia · Answer 3 · 2016-07-26T05:22:37.407

0

No, it is not possible to assign something to an object and automatically trigger an action method in JavaScript. "location" is actually a property of window object. The getter of the location property returns an object "Location" that has "href" and some other properties and methods. The setter of the location property takes a string and set it internally to "href" property of "Location" object. You can implement something like this using JavaScript getter and setter yourself. See this for reference: http://javascriptplayground.com/blog/2013/12/es5-getters-setters/. Hope this make sense.

edited Jul 26 '16 at 05:22

answered Jul 26 '16 at 05:05

Deepak Bhatia

1,090
1
8
13

It is always possible though not advisable. – kingshuk basak Jul 26 '16 at 05:14
@kingshuk bask: If you assign something to an object variable it will overwrite the original object variable, how would that trigger an action method? – Deepak Bhatia Jul 26 '16 at 05:18
You need to have helper functions that will check at successive threads whether the current and previous value of the property of an object are same or different. @deepak bhatia – kingshuk basak Jul 26 '16 at 05:30
@kingshukbasak `successive threads whether the current and previous value of the property of an object are same or different.` This sounds interesting. Any example? – J.Joe Jul 26 '16 at 05:32
@J.Joe - I have given an implementation example without using any advanced JS features. – kingshuk basak Jul 26 '16 at 07:31

score 0 · Answer 4 · answered Jul 26 '16 at 06:05

Yes. ES5 introduced the concept of setters and getters to close the gap between APIs like window.location and element.innerHTML and what you can do in javascript.

Setters and getters can be defined directly in an object literal:

var myobj = {
  set foo (str) {
    // execute a function
  },
  get foo () {
    // execute a function
  }
}

Notice the syntax - there's no : after the keywords set and get to differentiate them from regular keys "set" and "get".

With the declaration above, doing either:

myobj.foo = somevalue;

or somevar = myobj.foo;

will trigger the respective set and get functions.

Alternatively, if you already have an object, you may add a property with a setter and getter using Object. defineProperty():

Object.defineProperty(myobj, "bar", {
    get: function () {
      // execute a function
    },
    set: function (y) {
      // execute a function
    }
});

Now doing myobj.bar = x will call the setter function for bar.

See the following for more info:

https://developer.mozilla.org/my/docs/Web/JavaScript/Reference/Functions/set

https://developer.mozilla.org/my/docs/Web/JavaScript/Reference/Functions/get

Is it possible to assign a value to an object to trigger an action/method?

4 Answers4