{"id":1187,"date":"2022-08-30T15:13:50","date_gmt":"2022-08-30T15:13:50","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/module-prototype-and-multiple-instances-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:13:50","modified_gmt":"2022-08-30T15:13:50","slug":"module-prototype-and-multiple-instances-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/module-prototype-and-multiple-instances-collection-of-common-programming-errors\/","title":{"rendered":"Module\/prototype and multiple instances-Collection of common programming errors"},"content":{"rendered":"

I’m trying to get a grip on “OOP” JavaScript techniques, and I began writing a small test application today. Basically, it’s a game loop and on each update coordinates are to be increased so that an HTML element moves.<\/p>\n

The problem is I want to be able to run more than one instance of the app, and therefore I’m trying to store the instance data in this<\/code>, but what is saved in my constructor and exec()<\/code> method is not available in the private update()<\/code> method. What seems to be the officer, problem?<\/p>\n

var Jsloth = (function () {\n    var Jsloth = function () {\n        var sloth = document.createElement('div');\n        var attr = document.createAttribute('class');\n        attr.value = 'sloth';\n        sloth.setAttributeNode(attr);\n        this.sloth = document.getElementsByTagName('body')[0].appendChild(sloth);\n    };\n\n    var exec = function () {\n        this.x = 0;\n        this.y = 0;\n        var that = this;\n        setInterval(function () {\n            that.update();\n        }, 1000\/10);\n    };\n\n    var update = function () {\n        this.x++;\n        this.y++;\n        this.sloth.style.left = this.x + 'px';\n        this.sloth.style.bottom = this.y + 'px';\n    };\n\n    Jsloth.prototype.constructor = Jsloth;\n    Jsloth.prototype.exec = exec;\n    Jsloth.prototype.update = update;\n\n    return Jsloth;\n})();\n\nvar sloth1 = new Jsloth();\nsloth1.exec();\n<\/code><\/pre>\n
Edit:<\/strong> Updated code with a working solution!<\/p>\n
    \n
  1. \n
    You’ve not added update<\/code> to the prototype. The value of this<\/code> in that method will be most likely the window<\/code> object.<\/p>\n
    Change your call from this:<\/p>\n
    update();\n<\/code><\/pre>\n
    To this:<\/p>\n
    update.call(this);\n<\/code><\/pre>\n
    Or add update<\/code> to the .prototype<\/code>:<\/p>\n
    Jsloth.prototype.update = update;\n<\/code><\/pre>\n
    and use:<\/p>\n
    this.update();\n<\/code><\/pre>\n
    But if you’re going to call update()<\/code> from the setInterval()<\/code>, you’ll need to ensure the proper this<\/code> value.<\/p>\n
    To do that, you can pass an anonymous function, and keep a reference to the outer this<\/code> value in a variable.<\/p>\n
    var exec = function () {\n    this.x = 0;\n    this.y = 0;\n    var that = this;\n    setInterval(function() {\n        that.update();\n      \/\/update.call(that); \/\/ if you didn't add update() to the .prototype\n    }, 1000\/10);\n};\n<\/code><\/pre>\n<\/li>\n
  2. \n
    In JavaScript, this<\/code> is (almost) entirely decided by how<\/em> you call a function, not where\/how it’s defined.<\/p>\n
    The way you’re calling update<\/code>:<\/p>\n
    update();\n<\/code><\/pre>\n
    …this<\/code> will be the global object (window<\/code> on browsers), or undefined<\/code> if you use \"use strict\"<\/code>.<\/p>\n
    To set this<\/code> within update<\/code>, use call<\/code> or apply<\/code>:<\/p>\n
    update.call(this);\n\/\/ or\nupdate.apply(this);\n<\/code><\/pre>\n
    More (on my blog)<\/em>:<\/p>\n
      \n
    • Mythical methods<\/em><\/li>\n
    • You must remember this<\/code><\/em><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
      Originally posted 2013-11-09 23:38:21. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
      I’m trying to get a grip on “OOP” JavaScript techniques, and I began writing a small test application today. Basically, it’s a game loop and on each update coordinates are to be increased so that an HTML element moves. The problem is I want to be able to run more than one instance of the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1187","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1187"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1187\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}