Accessing outer scope from inner scope - javascript

I have a type that looks a little something like this:
var x = function(){
this.y = function(){
}
this.z = function(){
...
this.A = function(){
CALLING POINT
}
}
}
From calling point, I'm attempting to call function this.y. I don't need to pass any parameters, but when I set some stuff from this.A, I need to call this.y.
Is this possible? I'm OK with passing extra parameters to functions to make it possible.

Is this possible?
Yes, you can assign this reference to another variable and then call function y on it
this.z = function() {
var self = this;
this.A = function() {
self.y();
}
}

Version with bind, basically this adds a new method a to the object.
var X = function () {
this.y = function () {
document.write('y<br>');
}
this.z = function () {
document.write('z<br>');
this.a = function () {
document.write('a<br>');
this.y();
}
}.bind(this);
};
var x = new X;
//x.a(); // does not exist
x.z(); // z
x.a(); // a y
Working example with saved inner this.
var X = function () {
var that = this; // <--
this.y = function () {
document.write('y<br>');
}
this.Z = function () {
document.write('Z<br>');
this.a = function () {
document.write('a<br>');
that.y();
}
}
}
var x = new X,
z = new x.Z; // Z
z.a(); // a y

Instead of function() you can try modern JavaScript or Typescript ()=>. I also like .bind(this).

You cannot because this.y() is not within the scope that this.A() is in. You can if you set this.y() to a global function y:
var y = function() {};
var x = function() {
this.y = y;
this.z = function() {
...
this.A = function() {
this.y(); // will be successful in executing because this.y is set to the y function.
};
}
};

Related

Try to create object of returned function?

I was trying something different and ended up with these codes..
var f1 = function() {
this.x = 10;
this.innerf = function() { console.log(this.x); }
}
var of1 = new f1();
of1.innerf();
var f2 = function() {
return function() {
this.x = 10;
this.innerf = function() { console.log(this.x); }
}
}
var of2 = new f2();
of2.innerf();
It is throwing error ??! of2.inner is not a function
So, my anonymous function is returning same function body to my variable.
Why still i cannot able to instantiate??
The first part returns an object of which you can call the innerf method.
The second part returns a function that would return an object if you called it. But you don't.
This would work. Call the function f2(). It's return value is the anonymous function. Then, with new <return value of f2>(), you can create an instance of the object.
var f2 = function() {
return function() {
this.x = 10;
this.innerf = function() { console.log(this.x); }
}
}
var of2 = new (f2())();
of2.innerf();
// The two lines above can also be written as:
var of3constructor = f2(); // This returns the inner anonymous function.
var of3 = new of3constructor(); // This creates an instance by invoking the anonymous function.
of3.innerf();
Examples that work:
Creating it directly:
var f1 = function() {
this.x = 11;
this.innerf = function() {
console.log(this.x);
}
}
var of1 = new f1();
of1.innerf();
Returning a new object from a function:
var f2 = function() {
return new function() {
this.x = 12;
this.innerf = function() {
console.log(this.x);
}
}
}
var of2 = f2();
of2.innerf();
Returning an object:
var f3 = function() {
return {
x: 13,
innerf : function() {
console.log(this.x);
}
}
}
var of3 = f3();
of3.innerf();
Another one:
var f4 = function() {
return function() {
this.x = 10;
this.innerf = function() {
console.log(this.x);
}
}
}
var of4 = new (f2())();
of2.innerf();
Remember that when you call a function without the "new" keyword "this" points object where the functions was declared, in this case "window"
You need to return this from the inner function to the outer function. Also you need to run the inner function immediately.
jsFiddle:
http://jsfiddle.net/5dxybbb5/
var f1 = function() {
this.x = 10;
this.innerf = function() {console.log(this.x);}
}
var of1 = new f1();
of1.innerf();
var f2 = function() {
return function() {
this.x = 10;
this.innerf = function() {console.log(this.x);}
return this;
}();
}
var of2 = new f2();
of2.innerf();
Also this explains the () after a function declaration
What is the (function() { } )() construct in JavaScript?

Module pattern and this

I am using the module pattern for my JavaScript "classes". Is there any significant downside to declaring a var self outisde of the class I am returning and then setting it to this inside the class constructor so that I don't have to worry about the context switching when I don't want it to. In this small example it's probably unnecessary, this is just an example.
Example:
var Seat = (function() {
var self = null;
function Seat(startX, startY, inputSeatNumber, inputTableNumber) {
self = this;
self.radius = 10;
self.x = startX; self.y = startY;
self.seatNumber = inputSeatNumber;
self.tableNumber = inputTableNumber;
}
Seat.prototype.moveTo = function(newX, newY) {
if(newX >= 0 && newY >= 0) {
self.x = newX; self.y = newY;
}
};
return Seat;
})();
EDIT: example added
var SeatingChartView = (function() {
function SeatingChartView(canvas_id, seatingChartController, seatForm) {
this.stage = new createjs.Stage(canvas_id);
this.controller = seatingChartController;
this.seatForm = seatForm;
this.disableRightClick(canvas_id);
}
SeatingChartView.prototype.render = function() {
this.stage.update();
}
SeatingChartView.prototype.addSeat = function(newSeat) {
var newCircle = new createjs.Shape();
newCircle.graphics.beginFill("black").drawCircle(0, 0, 10);
newCircle.x = newSeat.x;
newCircle.y = newSeat.y;
newCircle.seat = newSeat;
newCircle.on('click', function(event) {
if(event.nativeEvent.button == 2) {
this.seatForm.open(event.currentTarget.seat);
}
});
newCircle.on('pressmove', this.controller.moveSeat)
this.stage.addChild(newCircle);
}
SeatingChartView.prototype.removeSeat = function(seat) {
this.stage.children.forEach(function(child) {
if(child.seat === seat) {
this.stage.removeChild(child);
}
});
}
SeatingChartView.prototype.setBackground = function(imageLocation) {
this.background = new createjs.Bitmap(imageLocation);
window.setTimeout(function() {
this.stage.canvas.width = this.background.image.width;
this.stage.canvas.height = this.background.image.height;
this.stage.addChild(this.background);
this.stage.update();
}.bind(this), 500);
}
SeatingChartView.prototype.disableRightClick = function(canvas_id) {
$(function() {
$('#' + canvas_id).bind('contextmenu', function(e) {
return false;
});
});
}
return SeatingChartView;
})();
In that case every new instance of Seat will share the newest Self object since it is set in the constructor. You should avoid doing this.
A more practical demo example might be something like this, where you want to make sure this is the instance of the class.
function Foo() {
var _this = this;
_this.someItem = {};
_this.go = function() {
doSomethingElse(function(result) {
_this.someItem.something = result; // _this and this are different
});
};
};
function doSomethingElse(callback) {
callback('asdf');
}
var foo = new Foo();
foo.go();
For your example using that pattern, you can define the _this in each method if it would be any benefit (this one wouldn't, but a more complex example might):
Seat.prototype.moveTo = function(newX, newY) {
var _this = this;
if(newX >= 0 && newY >= 0) {
_this.x = newX; _this.y = newY;
}
};
Yes, by doing it this way, all instances of Seat will have the same this, causing problems all over the place. Just remove the var self and use this in all places where you were using self. In the code you've given, there's no point where you will lose reference to this.
(#added example) Now your question makes more sense.
Instead of trying to handle this for all methods at once, you'll have to handle it at each point where you're using a function that has a different this (any function that isn't on the prototype or instance).
If you don't need this inside the callback, I would just use .bind to make the instance this available inside. Note however that .bind isn't supported in some (very)old versions of IE, so you'll either need a polyfil to work for those, or store this in a var.
SeatingChartView.prototype.addSeat = function(newSeat) {
var newCircle = new createjs.Shape();
newCircle.graphics.beginFill("black").drawCircle(0, 0, 10);
newCircle.x = newSeat.x;
newCircle.y = newSeat.y;
newCircle.seat = newSeat;
newCircle.on('click', function(event) {
if(event.nativeEvent.button == 2) {
this.seatForm.open(event.currentTarget.seat);
}
}.bind(this)); // modified here, added `.bind(this)`
newCircle.on('pressmove', this.controller.moveSeat)
this.stage.addChild(newCircle);
}
This would totally negate the purpose of "classing". But in JS it's called prototyping.
Principally you want the base prototype to be "copied" when creating new instances. The base prototype should be shielded from changes when extended.
Suppose you have done what you did, all instances of Seat will have the same properties. Even worst, when creating new "copies" of Seat, all other previously created copies will have their values changed.
Since you want this to maintain reference to Seat, I would recommend using the following pattern:
var Base = {
init: function(arg) {
this.name = arg;
},
getName: function() {
return this.name;
}
}
Base.init('foo');
Base.getName(); // returns 'foo'
Your transformed code:
var Seat = {
init: function(startX, startY, inputSeatNumber, inputTableNumber) {
this.radius = 10;
this.x = startX;
this.y = startY;
this.seatNumber = inputSeatNumber;
this.tableNumber = inputTableNumber;
},
moveTo: function(newX, newY) {
if (newX >= 0 && newY >= 0) {
this.x = newX; this.y = newY;
}
},
setBackground: function(imageLocation) {
var self = this;
this.background = new createjs.Bitmap(imageLocation);
setTimeout(function() {
self.stage.canvas.width = self.background.image.width;
self.stage.canvas.height = self.background.image.height;
self.stage.addChild(self.background);
self.stage.update();
}, 500);
}
}
Extend the prototype:
var vipSeat = Object.create(Seat);
vipSeat.init( //your init values )
You can also not create an init method and simply use Object.create's second argument to assignment initial values to the prototype: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Example:_Using_propertiesObject_argument_with_Object.create

How to partially apply member functions in JavaScript?

I currently have a partial-application function which looks like this:
Function.prototype.curry = function()
{
var args = [];
for(var i = 0; i < arguments.length; ++i)
args.push(arguments[i]);
return function()
{
for(var i = 0; i < arguments.length; ++i)
args.push(arguments[i]);
this.apply(window, args);
}.bind(this);
}
The problem is that it only works for non-member functions, for instance:
function foo(x, y)
{
alert(x + y);
}
var bar = foo.curry(1);
bar(2); // alerts "3"
How can I rephrase the curry function to be applied to member functions, as in:
function Foo()
{
this.z = 0;
this.out = function(x, y)
{
alert(x + y + this.z);
}
}
var bar = new Foo;
bar.z = 3;
var foobar = bar.out.curry(1);
foobar(2); // should alert 6;
Instead of your curry function just use the bind like:
function Foo()
{
this.z = 0;
this.out = function(x, y)
{
alert(x + y + this.z);
}
}
var bar = new Foo;
bar.z = 3;
//var foobar = bar.out.curry(1);
var foobar = bar.out.bind(bar, 1);
foobar(2); // should alert 6;
You're close. this.z inside of this.out references the this scoped to the function itself, not the Foo() function. If you want it to reference that, you need to store a variable to capture it.
var Foo = function() {
this.z = 0;
var self = this;
this.out = function(x, y) {
alert(x + y + self.z);
};
};
http://jsfiddle.net/hB8AK/

Javascript: Member-variable-accessing closures

I'm wondering how to deal with member variables in closures in JavaScript. The following code alerts "6".
function testy()
{
function blah()
{
this.a = 5;
this.func = function()
{
this.a = 6;
alert(this.a);
}
}
var x = new blah;
x.func();
}
but this code alerts 5.
function testy()
{
function execute(func)
{
func();
}
function blah()
{
this.a = 5;
this.func = function()
{
execute(function()
{
this.a = 6;
});
alert(this.a);
}
}
var x = new blah;
x.func();
}
How do I pass a closure which still accesses the member variables of the enclosing object?
execute(function()
{
this.a = 6;
});
function execute(func)
{
func();
}
Your calling the function as func(); and by default without specifying a context this will resolve to the global context which is window in the browser.. There are three options you can use here.
make this local
var that = this;
execute(function()
{
that.a = 6;
});
Now that points to the correct this.
bind this scope to the function
execute((function()
{
this.a = 6;
}).bind(this));
This will bind the correct / expected this scope to your function. Note that Function.prototype.bind is ES5 and will break older browsers. _.bind is a reasonable cross browser alternative.
edit execute
function execute(f, context) {
f.call(context);
}
execute(function() {
this.a = 6;
}, this);
Your passing the context as an extra parameter to execute. Then execute will call Function.prototype.call to make sure that the function is called with the desired context
Try this:
function blah()
{
this.a = 5;
this.func = function()
{
var self = this;
execute(function()
{
self.a = 6;
});
alert(this.a);
}
}

Anonymous self-invoking JavaScript function - returning multiple objects

If I have original function (as an example):
var x = function() { alert('tadaaa'); return 1; }
var y = function() { alert('tadaaa'); return 1; }
and I've gone ahead and made this into a self-invoking anonymous JS function, as such:
(function() {
var x = function() { alert('tadaaa'); return 1; }
var y = function() { alert('tadaaa'); return 1; }
})()
am I doing something paradoxical? I'd like to access x and y as global variables, but the self-invoking anonymous function is useful in other areas that I'm not going into detail right now - I just want to keep it.
Should I be doing something like:
var x= (function() {
var x = function() { alert('tadaaa'); return 1; }
var y = function() { alert('tadaaa'); return 1; }
// Should I be doing something like
return x
})()
or
var x= (function() {
var x = function() { alert('tadaaa'); return 1; }
return x
})()
var y = (function() {
var x = function() { alert('tadaaa'); return 1; }
return y
})()
seems somewhat redundant?
I'm not sure what the goal of al this is, but maybe you could return both functions in an object, like so:
var funcs = (function() {
var x = function() { alert('tadaaa'); return 1; };
var y = function() { alert('tadaaa'); return 1; };
return {x: x, y: y};
})();
funcs.x();
funcs.y();
This is basically what the Module Pattern is about (see for example http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth).
It's good! Depending on what you need, of course.
You can:
var x, y;
(function() {
x = function() { alert('tadaaa'); return 1; }
y = function() { alert('tadaaa'); return 1; }
})();

Categories