Geek Answers Handbook

Maintain scope with javascript

How do I save an area with this?

Original

var Base = new function() { var canvas; var context; this.init = function() { console.log("Canvas: " + $("canvas")[0]) this.canvas = $("canvas")[0]; console.log("Context: " + this.canvas.getContext('2d')) this.context = this.canvas.getContext('2d'); $(window).resize(handleWindowResize); handleWindowResize(); }; function handleWindowResize() { console.log("Resize Canvas [" + this.canvas + "] to {width: " + $(window).width() + "," + $(window).width() + "}"); this.canvas.width = $(window).width(); this.canvas.height = $(window).height(); } } $(window).load(function() { new Base.init() });

Ouput:

 Canvas: [object HTMLCanvasElement] Context: [object CanvasRenderingContext2D] Resize Canvas [undefined] to {width: 1680,1680} Resize Canvas [undefined] to {width: 1680,1680}

Corrected version

 var Base = function() { this.canvas; this.context; } Base.prototype = { init: function() { console.log("init :: " + this); this.canvas = $('canvas')[0]; this.context = this.canvas.getContext('2d') $(window).resize(this.handleWindowResize); this.handleWindowResize(null); }, handleWindowResize: function() { console.log($(window) + " resized set canvas (" + this.canvas + ")" + " width,height = " + $(window).width() + "," + $(window).height()); }, toString: function() { return "[Base]"; } } $(window).load(function() { var c = new Base(); c.init(); });

Output: (init)

 init :: [Base] [object Object] resized set canvas ([object HTMLCanvasElement]) width,height = 1659,630

Exit: (when resizing the window)

 [object Object] resized set canvas (undefined) width,height = 1658,630
+6
javascript jquery html
source share
5 answers

Here is an example Module pattern :

 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> var Base = function() { //Private Variables var canvas; var context; //Private Function function handleWindowResize() { console.log("Resize Canvas [" + canvas + "] to {width: " + $(window).width() + "," + $(window).width() + "}"); canvas.width = $(window).width(); canvas.height = $(window).height(); } //Public Functions return { init: function() { console.log("Canvas: " + $("canvas")[0]) canvas = $("canvas")[0]; console.log("Context: " + canvas.getContext('2d')) context = canvas.getContext('2d'); $(window).resize(handleWindowResize); handleWindowResize(); } }; }(); $(window).load(function() { Base.init() }); </script> </head> <body> <canvas></canvas> </body> </html>
+4
source share

jQuery changes which "this" object refers to its callback method. What you should do is keep a reference to the original "this" objects at the beginning:

 var Base = new function() { var self = this; var canvas; var context;

And then when you want to access the base object, use self.

+3
source share

Usage: handleWindowResize.call (this) Instead: handleWindowResize ()

This will change the scope.

+1
source share

It sounds like you come from a different language and should get a clear idea of ​​how constructors work in JS.

You have this.name=function(){} for one function and a function declaration for another. Is there a reason why you are using the new function for the base object? Running new Base.init() also not entirely correct. The constructor creates a new object, but do you discard it and use only the constructor to execute the imperative code? You are not executing Base, so it may just be an object literal.

I really suggest checking out Doug Crockford's articles on inheritance and objects in JS. This SO question discusses some other methods of creating objects. Try to find Crockford The Good Parts. What happens in Crockford's object creation technique?

I discarded the contents of the canvas since I did not work with the canvas. This will run without errors.

 <html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> var Base = { canvas:null, context:null, init:function() { console.log("Canvas: " + $("#canvas")[0]); this.canvas = $("#canvas")[0]; console.log("Context: " + this.canvas) //this.context = this.canvas.getContext('2d'); this.handleWindowResize=function(){ console.log("Resize Canvas [" + this.canvas + "] to {width: " + $(window).width() + "," + $(window).width() + "}"); this.canvas.style.width = $(window).width(); this.canvas.style.height = $(window).height(); } } }; $(window).load(function() { var c= new Base.init(); c.handleWindowResize()}); </script> </head> <body> <div id='canvas' style='width:400px;background-color:red;height:30px;'>a div called Canvas</div> </body> </html>
+1
source share

There are several syntax errors in your code. If handleWindowResize is a method inside your base object, you should declare it like this.init and call it like this.handleWindowResize .

0
source share

More articles:


All Articles