Given the following how do i enable this to work correct?
return {
methodA: function() {
return methodB();
},
methodB: function() {
alert("hi");
}
}
You need to reference the context, via this.
var foo = {
methodA: function() {
return this.methodB(); //context
},
methodB: function() {
alert("hi");
}
}
foo.methodA(); //alerts "hi"
It seems you are returning from a module like function. The safe way is not to use this, it is to keep a reference to the object so that it won't matter how the function is called.
function getObj() {
var obj = {
methodA: function() {
return obj.methodB();
},
methodB: function() {
alert("hi");
}
};
return obj;
}
var myObj = getObj();
// Works
myObj.methodA();
// Works but would not work if you were using `this` as suggested by Utkanos.
someDomElement.addEventListener('click', myObj.methodA);
Related
var obj = {
someFunc : function() {
console.log("Hello");
console.log(this);
var obj1 = {
someFunc1 : function() {
console.log("Hi");
}
};
}
};
obj.someFunc();
obj.obj1.someFunc1();
I have just created an object. And inside an object, a method, and then a new object and obj1. I am just trying to check 'this' keyword. But, it seem to me it's grammatical error in js. That is not possible. Right? But, why?
var obj = {
someFunc : function() {
console.log("Hello");
console.log(this);
return {
someFunc1 : function() {
console.log("Hi");
}
};
}
};
obj.someFunc().someFunc1();
I have the following object:
var object = {
attr1 : "hello",
myFunc : function() {
alert(this.attr1); //This should alert "hello"
},
initialize : function() {
document.getElementById("myElem").addEventListener("click", function() {
// How do I access attr1 from here?
myFunc(); // Says myFunc is not defined.
});
}
}
object.initialize();
How do I access myFunc or attr1 from inside of the anonymous function passed to addEventListener?
One way I can think of is this:
var object = {
attr1 : "hello",
myFunc : function() {
alert(this.attr1); //This should alert "hello"
},
initialize : function() {
myObject = this;
document.getElementById("myElem").addEventListener("click", function() {
// How do I access attr1 from here?
alert(myObject.attr1);
// calling myFunc
myObject.myFunc();
});
}
}
object.initialize();
But is this a good solution?
Also, If I do this:
var object = {
attr1 : "hello",
myFunc : function() {
alert(this.attr1); //This should alert "hello"
},
initialize : function() {
myFunction = this.myFunc;
document.getElementById("myElem").addEventListener("click", function() {
// How do I access attr1 from here?
alert(myObject.attr1);
// calling myFunc
myFunction();
});
}
}
object.initialize();
Then it alerts with "undefined". Which means this.attr1 is undefined.
Why so?
Inside your event handler function, this will always refer to the DOM element on which the event has been attached.
To access the object properties, you need to use the alternatives such as self/that.
initialize : function() {
var that = this;
document.getElementById("myElem").addEventListener("click", function() {
alert(that.attr1);
that.myFunc();
});
}
In your solution, you have declared myObject globally as var is missing.
var object = {
attr1 : "hello",
myFunc : function() {
alert("Instance of window ? "+(this instanceof Window));
alert(this.attr1); //This should alert "hello"
},
initialize : function() {
myFunction = this.myFunc;
document.getElementById("myElem").addEventListener("click", function() {
// How do I access attr1 from here?
alert(object.attr1);
// calling myFunc
myFunction();
});
}
}
object.initialize();
<div id="myElem">Click me</div>
Now as you can see in the alert, this refers to the window object. Because when you copy the function, its by value and not by reference. So only the function is copied and not underlying object. So now this will refer to the window object.
The solution you provided is exactly how I go about solving this issue, declare a variable and set its value to this, then use that to call other functions within your object.
otherFunc: function() {
console.log('test');
},
myFunc: function() {
var self = this;
// do stuff
// call other function
self.otherFunc();
}
Just make it like this - >
You do not need extra variables to make your code so obscure. :)
var object = {
attr1: "hello",
myFunc: function () {
alert(this.attr1); //This should alert "hello"
},
initialize: function () {
document.getElementById("myElem").addEventListener("click", function () {
// How do I access attr1 from here?
object.myFunc();
});
}
}
object.initialize();
I've an object looks like this:
var obj ={
property : '',
myfunction1 : function(parameter){
//do stuff here
}
}
I need to set some private properties and functions, which can not be accessed/seen from outside of the object. It is not working with
var property:, or var myFunction1
Next question is, if I call a function within or outside the object, I always have to do this with obj.myfunction(). I would like to asign "this" to a variable. Like self : this. and call inside the object my functions and variables with self.property and self.myfunction.
How? :)
There are many ways to do this. In short: If dou define a function inside another function, your inner function will be private, as long as you will not provide any reference to if.
(function obj(){
var privateMethod = function() {};
var publicMethod = function() {
privateMethod();
...
};
return {
pubMethod: publicMethod
}
}());
var obj = (function() {
var privateProperty;
var privateFunction = function(value) {
if (value === void 0) {
return privateProperty;
} else {
privateProperty = value;
}
};
var publicMethod = function(value) {
return privateFunction(value);
}
return {
getPrivateProperty: function() {
return privateFunction();
},
setPrivateProperty: function(value) {
privateFunction(value);
}
}
})();
obj.setPrivateProperty(3);
console.log(obj.getPrivateProperty());
// => 3
console.log(obj.privateProperty);
// => undefined
obj.privateFunction();
// => TypeError: undefined is not a function
Use closures. JavaScript has function scope, so you have to use a function.
var obj = function () {
var privateVariable = "test";
function privateFunction() {
return privateVariable;
}
return {
publicFunction: function() { return privateFunction(); }
};
}();
I've got an enclosed function in JavaScript like so:
var myFunction = function (options) {
function blah() {
var blahString = options.blahString;
//more blah
}
function blah2() {
//blah2
}
return {
blah : function { return blah(); },
blah2 : function { return blah2(); }
}
};
When I'm in my HTML, I'm trying to call myFunction.blah() and it's telling me the object has no method 'blah'.
How do I access the returned functions in the global scope?
Thanks!
This just explains why it doesn't work and how to make it work. For learning things this would be enough. Actually you should explain what you are trying to achieve so that others can guide you in the right direction.
// A scope of a function is activated ONLY when it is invoked
// Let us define a function
var myFunction = function (options) {
function blah() {
alert("I am blah");
}
function blah2() {
//blah2
}
alert("I am active now and I am returning an object");
return {
blah: function () {
return blah();
},
blah2: function () {
return blah2();
}
};
};
myFunction.blah3 = function () {
alert("I am blah3");
};
// myFunction is not invoked, but justed used as an identifier.
// It doesn't have a method blah and gives error
myFunction.blah();
// blah3 is a static method of myFunction and can be accessed direclty using myFunction
myFunction.blah3();
// myFunction is invoked, which returns an object
// it contains the function blah
myFunction().blah();
// or
var myObject = myFunction();
myObject.blah();
myObject.blah2();
var myFunction = (function (options) {
function blah() {
return options.a;
}
function blah2() {
//blah2
}
return {
blah: function() { return blah(); },
blah2: function() { return blah2(); }
};
});
alert(myFunction({a:1, b:2}).blah());
This works fine. Note blah: function <-- needs ()
see http://jsfiddle.net/kw6fJ/1
Here is a simplified version of my JS:
var myObject = function() {
return {
functionOne: function() {
//some other logic here
},
functionTwo: function() {
var self = this;
//some logic here
//then call functionOne
self.functionOne();
}
};
}
Then I have this in the body of my html:
click me
Why do I get the error Uncaught TypeError: Object [some url] has no method 'functionOne', when I click the link?
The error that you're seeing doesn't reflect the example code you've shown.
That said, in the way that you're using the code, you should be able to reduce it to simply:
var myObject = {
functionOne: function() {
},
functionTwo: function() {
this.functionOne();
}
}
Your myObject is a function that needs to be called in order to get that object
click me
Why not just define myObject as an object:
var myObject = {
functionOne: function() {
//some other logic here
},
functionTwo: function() {
var self = this;
//some logic here
//then call functionOne
self.functionOne();
}
};
What you need is for your function to be executed immediately. Further to that your declarion of the self variable leads me to think that you are trying to create a closure so that you can access functionOne from functionTwo. If that is the case then I think the following is what you were after:
var myObject = (function() {
function func1( ) {
}
function func2( ) {
func1();
}
return {
functionOne: func1,
functionTwo: func2
};
}());