This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 1 year ago.
I have a Javascript object that stores a bunch of methods, and also stores some variables. In the normal case when the methods are trying to access each other or the variable it works fine, but if the methods are called from out of scope (say, via another callback) they are no longer able to access the variable.
Example JSFiddle here: http://jsfiddle.net/3Lkuz2Lk/2/
Below is the sample code to illustrate the issue:
var obj = {
x: null,
func1: function() {
console.log('func1, x is ' + this.x);
},
func2: function() {
console.log("func2");
this.func1();
var func1 = this.func1;
func3(function() {
func1();
});
}
};
function func3(callback) {
console.log("func3");
return callback();
}
obj.func2();
The output from the above code is:
func2
func1, x is null
func3
func1, x is undefined
What's not clear to me is why the second time func1 is called x is undefined?
If I need to accomplish this (i.e., be able to access the methods and variables within the object no matter which context they're called from), how can I accomplish that? I find the above approach to be unclean since I need to store the func1 reference in order to be make it available to the call to func3, and I'm hoping there's a cleaner/simpler approach.
var obj = {
x: null,
func1: function() {
console.log('func1, x is ' + this);
},
func2: function() {
console.log("func2");
this.func1();
var func1 = this.func1;
func3(func1);
}
};
function func3(callback) {
console.log("func3");
return callback();
}
obj.func2();
This is because this is different in both cases, in the first case this points to the Object while in the next one this refers to the global object/ window. you would have to do
var obj = {
x: null,
func1: function() {
console.log('func1, x is ' + this.x);
},
func2: function() {
console.log("func2");
this.func1();
var func1 = this.func1.bind(this);
func3(func1);
}
};
function func3(callback) {
console.log("func3");
return callback();
}
obj.func2();
You have to use bind(this), read more about it here:
var func1 = this.func1.bind(this);
I've simplified the code. The problem is the reference. You call upon func3, which is in its own scope and not part of the scope chain of obj. So this refers to the scope of the func3. If you bind the this from obj to the callback it works.
var obj = {
x: null,
func1: function() {
console.log('func1, x is ' + this.x);
},
func2: function() {
console.log("func2");
this.func1();
func3(this.func1.bind(this));
}
};
function func3(callback) {
console.log("func3");
return callback();
}
obj.func2();
Another solution using call is in this fiddle http://jsfiddle.net/3Lkuz2Lk/3/
Related
I have an anonymous function inside a variable GLOBAL.
var GLOBAL = function (){
var func1 = function(){
console.log("function 1 go!")
}
var func2 = function(){
console.log("function 2 go!")
}
return {
init: function(){
func1();
}
}
}()
In my init function return func1, calling it so GLOBAL.init();.
My question is: how I can call functions directly for example GLOBAL.func1() or GLOBAL.func2().
You have to return the function references,
var GLOBAL = function (){
var func1 = function(){
console.log("function 1 go!");
}
var func2 = function(){
console.log("function 2 go!")
}
return { func1,func2 };
}();
Now you can access it like GLOBAL.func1() and GLOBAL.func2(). And do not confuse with the syntax { func1,func2 };. That is quite similar to { func1 : func1,func2 : func2 }; I just used the shorthand introduced in ES6.
You can't. They are locally scoped variables. Being inaccessible outside the function is a large part of the point.
If you want them to be accessible, then you need to make them so explicitly (as you have done for the anonymous function you assign to init).
You should explicit add those functions in the returned object. In this code you can still continue executing init() as a object initialization.
var GLOBAL = function (){
var func1 = function(){
console.log("function 1 go!")
};
var func2 = function(){
console.log("function 2 go!")
}
return {
init: function(){
this.func1();
},
func1,
func2
}
}();
GLOBAL.func1();
GLOBAL.func2();
I hope that helps :D
You can follow modular approach if it can help:
var GLOBAL = {
func1: function(){
console.log("function 1 go!")
},
func2: function(){
console.log("function 2 go!")
}
}
GLOBAL.func1();
GLOBAL.func2();
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Explanation asked about the value of 'this' in Javascript [duplicate]
(2 answers)
Closed 8 years ago.
Simple question. Why do we have set that = this? If we dont, we are in the global scope...but why?
var myObj = {
specialFunction: function () {
},
anotherSpecialFunction: function () {
},
getAsyncData: function (cb) {
cb();
},
render: function () {
var that = this;
this.getAsyncData(function () {
// this now refers to global scope....why?
that.specialFunction();
that.anotherSpecialFunction();
});
}
};
myObj.render();
Writing that = this doesn't change the scope. The way the anonymous function is called will always end up with this being global object,* because that's exactly what the spec says should happen. Using that = this is just a workaround.
You could make this always point to myObj by using Function.call:
var myObj = {
specialFunction: function () {
},
getAsyncData: function (cb) {
cb.apply(this);
},
render: function () {
this.getAsyncData(function () {
this.specialFunction();
});
}
};
and/or using Function.bind:
var myObj = {
specialFunction: function () {
},
getAsyncData: function (cb) {
cb();
},
render: function () {
function callback() {
this.specialFunction();
}
this.getAsyncData(callback.bind(this));
}
};
* Unless you're in strict mode, in which case this is undefined.
take a look at the this keyword in JavaScript and how it works. I’m sure we’ve all come across this issue:
$("myLink").on("click", function() {
console.log(this); //points to myLink (as expected)
$.ajax({
//ajax set up
success: function() {
console.log(this); //points to the global object. Huh?
}
});
});
this is a variable that is automatically set for you when a function is invoked. The value it’s given depends on how a function is invoked. In JavaScript we have a few main ways of invoking functions. I wont talk about them all today, but just the three ways most people use them; either when a function is called as a method, or on it’s own, or as an event handler. Depending on how a function is invoked, this is set differently:
function foo() {
console.log(this); //global object
};
myapp = {};
myapp.foo = function() {
console.log(this); //points to myapp object
}
var link = document.getElementById("myId");
link.addEventListener("click", function() {
console.log(this); //points to link
}, false);
Doing $("myLink").on("click", function() {}) means that when the element is clicked, the function is fired. But this function is bound as an event handler, so this is set to the reference to the DOM element myLink. The success method you define within the Ajax request is just a regular function, and as such when it’s invoked, this is set to the global object, as it is when any function that’s not an event handler or an object method is.
$("myLink").on("click", function() {
console.log(this); //points to myLink (as expected)
var _this = this; //store reference
$.ajax({
//ajax set up
success: function() {
console.log(this); //points to the global object. Huh?
console.log(_this); //better!
}
});
});
Source: http://tinyurl.com/melbl92
EDIT: in JavaScript the "this" context depends on how your function is called, example:
function helloWorld()
{
console.log(this);
}
And here two ways to call this function:
new helloWorld(); note that if you call your function in this
way, the context of this will be the context of the function +
prototype, so your console will show this: helloWorld {}
helloWorld(); if you call your function without of the "new",
the context of "this" will be global(Window), so your console will show
this: Window about:home
Ok, with this little explanation i will try to explain now why you
have sometimes to use self/that...
Imagine that you want to use this.name inside this.hello function. Like I said before, the context of "this" depends on how your function is called, so if you want to ensure that this.name inside of this.hello function refer to this.name outside is recommended that you use self/that to avoid what happens bellow
function helloWorld(){
var self = this;//or that = this
this.name = "YourName"
this.hello = function(){
console.log(this); //the context of "this" here will be: "hello {}"
return this.name; //undefined, because you don't have name attribute inside hello function
}
new this.hello(); //note how hello is called here...
}
var test = new helloWorld();
And here a good explanation about context x scope:
http://ryanmorr.com/understanding-scope-and-context-in-javascript/
Basically I want to do this:
someFunction() // do something
someFunction.somePropertyFunction()
someFunction() // Now someFunction is modified; it should now exhibit a different behaviour
Is this possible?
EDIT:
I'm not looking for what #Kolink was suggesting. Basically I want to augment a function's functionality by calling one of it's property function.
Specifically, I need to: 1. have access to the original function inside my property function (which is entirely doable using this), and 2. bind a new function to the original function's name (which I'm not sure if it's possible).
Just to be clear, I don't have access to the internal definition of the function that I want to augment. I want to attach a function to Function.prototype (so that it will be available as a property of the function that I want to augment), and then I will call func.augmentThis(), and then func should be augmented. But I'm not sure how, hence the question :P
Easily. Here's an example:
var derp = 123;
someFunction = function() {alert(derp);};
someFunction.somePropertyFunction = function() {derp = 456;};
someFunction(); // alerts 123
someFunction.somePropertyFunction();
someFunction(); // alerts 456
Okay, that's an oversimplified example, but yeah, it's entirely possible.
If your question is whether a function attached as a property to another function has a way to access the function to which it is attached, the answer is no. After all, the same function could be attached to any number of functions of objects.
So one alternative is to explicitly refer to the "mother" function within the function that is attached to it and intended to change its behavior:
function f (n) { alert (n + f.offset); }
f.offset = 0;
f.change_offset = function (i) { f.offset = i; };
f (1); //1
f.change_offset (100);
f (1); //101
Here, f is hard-wired into the definition of change_offset. If this bothers you, or you want something slightly more general, write a little routine to set a function as a property on another function, while binding its this to the function being attached to:
function set_func_as_func_prop ( propname, func_to_set, func_to_set_on ) {
func_to_set_on[propname] = func_to_set.bind(func_to_set_on);
}
Now you can write the function more generally
function change_offset (i) {
this.offset = i;
}
and set it on f or any other function.
set_func_as_func_prop ("change_offset", change_offset, f);
set_func_as_func_prop ("change_offset", change_offset, g);
Sort of:
function someFunction() {
return realFunction.apply(this, arguments);
}
function someFunctionA(name) {
return 'Hello, ' + name + '!';
}
function someFunctionB(name) {
return 'Goodbye, ' + name + '...';
}
var realFunction = someFunctionA;
someFunction.somePropertyFunction = function () {
realFunction = someFunctionB;
};
Sure it's possible. It's not recommended, but it's possible. For example:
function a() {
alert("a");
}
function b() {
alert("b");
}
function c() {
return c.f.apply(this, arguments);
}
c.f = a;
c.toggle = function () {
c.f = c.f === a ? b : a;
};
Now let's test it:
c(); // alerts "a"
c.toggle();
c(); // alerts "b"
See the demo: http://jsfiddle.net/LwKM3/
I want to attach a function to Function.prototype. Then I need to bind a new function to the original function's name (which I'm not sure if it's possible).
That indeed is impossible, you don't know what refers to the function. And you cannot change the internal representation of a function, which is immutable.
The only thing you can do is to create a new function and return that, to let the caller of your method use it somehow - specifically assigning it to the original variable:
somefunction = somefunction.augmentSomehow();
Your method for that will look like this:
Function.prototype.augmentSomehow = function() {
var origFn = this;
return function() {
// in here, do something special
// which might include invoking origFn() in a different way
};
};
Not sure if this helps, but I would implement described problem in following way:
// defined by somebody else - unknown to developer
var someFunction = function() {
alert("this is initial behavior");
}
someFunction(); // returns "this is initial behavior"
// defines parent object on which someFunction() is called
var parentObject = this; // returns window object (as called direclty in the
// browser)
// if you are calling someFunction from some object (object.someFunction())
// it would be:
// var parentObject = object;
// augumentThis definition
someFunction.augumentThis = function() {
var newFunction = function() {
alert("this is changed behavior");
};
parentObject.someFunction.somePropertyFunction = function() {
parentObject.someFunction = newFunction;
parentObject.someFunction();
};
};
someFunction.augumentThis(); // change function behavior
someFunction(); // "this is initial behavior"
someFunction.somePropertyFunction(); // "this is changed behavior"
someFunction(); // "this is changed behavior"
I'm getting undefined function when I try to do the following (simplified for readability)
function object() {
this.bar = function() { };
this.foo = function() {
this.bar();
};
this.z = setInterval(this.foo, 1000);
}
This code gives 'undefined function this.bar()' when executed from within the interval, but not when this.foo is called outside of the interval.
How can I achieve this?
That is correct - you can't do it that way. The this pointer will not be set correctly when called from setInterval() (it is probably set to point to the global window object). You can change your code like this to solve the problem:
function object() {
this.bar = function() { };
this.foo = function() {
this.bar();
};
var self = this; // save reference to local object in variable other than 'this'
this.z = setInterval(function() {
self.foo(); // call method on local object
}, 1000);
}
How to do this?
var obj = {
func1 : function(){
// Do stuff
},
func2 : function(){
func1(); // does not work
this.func1(); // does not work
}
}
Edit: missed a semicolon
var obj = {
func1 : function(){
// Do stuff
},
func2 : function(){
obj.func1(); // It works fine
}
}
if you want to use the 'this' keyword, you should do something like
function obj() {
this.param = whatever;
}
obj.prototype.method1 = function(){
...
}
obj.prototype.method2 = function(){
this.method1();
}
you could declare the methods in the obj function, but it is better to use prototype, because it is more efficient -- no matter how many obj instances you create, the functions only exist once. If you put the functions in the obj constructor, each instance of obj has its own copy of the function. javascript does some magic to associate the method call with the object instance on which it is called, to make sure 'this' means the right thing in context
I don't know why the person asking the original question thought that wouldn't work. Their example does work.
var obj = {
func1 : function(){
console.log("doing stuff");
},
func2 : function(){
this.func1(); // works fine!
}
}
You can paste that into the console and call obj.func2() and it works just fine. You don't need to name the object in this situation.
But be careful. This solution wouldn't work if you define another anonymous function inside of func2, and then try to use "this" inside of that function (such as if you're defining a callback). You'll get a "Uncaught TypeError: this.func1 is not a function" error. The problem in that situation is that "this" no longer refers to the outer object, it now refers to the context of that new inner function. For example:
var obj = {
func1 : function(){
console.log("doing stuff");
},
func2 : function(){
var func3 = function () {
this.func1(); // doesn't work ("this" is no longer obj)
}
func3();
}
}
To fix that issue, you could save a local copy of "this". Example:
var obj = {
func1 : function(){
console.log("doing stuff");
},
func2 : function(){
var ourThis = this;
var func3 = function () {
ourThis.func1(); // works fine!
}
func3();
}
}
Another way is to create your object through a factory function. That way, you can initialize your functions and use them inside the others.
const objFactory = () => {
const func1 = () => {
// Do stuff
}
const func2 = () => {
func1(); // This will work
}
return { func1, func2 }
}
const obj = objFactory();
obj.func1();
obj.func2();