I'm new to Javascript and I just discovered the property keyword for defining functions for objects. I tried to refactor my websocket experiment using objects, but I can't get it to work.
This works (no objects):
var ws = new WebSocket(something, somethingelse);
ws.onopen = function() {
ws.send("hello");
console.log("works");
}
But this doesn't:
function MyObject() {
this.ws = new WebSocket(something, somethingelse);
this.ws.onopen = this.onOpen;
}
MyObject.prototype.onOpen = function() {
this.ws.send("hello"); // undefined!
};
Why is ws undefined? Am I assigning the onOpen function incorrectly?
You are assigning functions correctly (there is only one way of assigning functions), your problem is that the context of the function changes.
Consider this line:
this.ws.onopen = this.onOpen;
Possibility 1:
Now I assume, inside WebSocket, somewhere this function gets called as a response to an opening connection (like an event handler), probably like
this.onopen();
What this refers to inside a function is determined by how a function is called on run time (<- read this link, it helps a lot). It is not bound at definition time. In your case, this would refer to the WebSocket instance.
So inside if called this way, inside MyObject.prototype.onOpen, this refers to this.ws, the WebSocket instance, which does not have a ws property, and not the MyObject instance.
This can be solved in two ways:
Since this already refers to this.ws, you can call send directly on this:
MyObject.prototype.onOpen = function() {
this.send("hello");
};
If you want this inside MyObject.prototype.onOpen to always refer to the MyObject instance, you have to keep an explicit reference to the instance, e.g. through a closure:
var self = this;
this.ws.onopen = function() {
self.onOpen();
};
Now inside onOpen, this refers to the MyObject instance which has a property ws, just like you set it up in the constructor.
In browsers supporting ECMAScript 5, functions already have a method for this technique, called .bind():
this.ws.onopen = this.onOpen.bind(this);
Possibility 2:
It could also be that WebSocket calls onopen in such a way:
this.onopen.call(null);
In that case, this would either refer to window or would be undefined, depending on whether the code runs in strict mode or not (it does not matter, in any case it is a problem).
This situation could only be solved with the second solution from the first possibility.
Why does the first example work?
var ws = new WebSocket(something, somethingelse);
ws.onopen = function() {
ws.send("hello");
console.log("works");
}
In this case, the function you assign to ws.onopen is a closure, closing over the variables defined in this scope, also ws. In this sense it is similar to the second way of solving the problem, but
ws.onopen = function() {
this.send("hello");
console.log("works");
}
would probably work as well.
Related
I've got 3 codes :
var control = new Control();
function Control() {
this.doSomethingElse = function() {...}
this.doSomething = function () {
control.doSomethingElse();
}
}
Or
var control = new Control();
function Control() {
var self = this;
this.doSomethingElse = function() {...}
this.doSomething = function () {
self.doSomethingElse();
}
}
Or
var control = Control();
function Control() {
var self = this;
this.doSomethingElse = function() {...}
this.doSomething = function () {
self.doSomethingElse();
}
return self;
}
Important : The function is a controller, and just declared once. Then I'm using "control" everywhere in my code...
I was wondering if the control.doSomethingElse() was slow ?
In the end, what is the right thing to do and/or the fastest code in those exemple ?
Thanks !
The first is wrong - an object should never internally use the variable name by which it is known outside. Other code could change that variable to point to something else, breaking this code.
The third is also wrong - when calling Control() without new the assignments to this.foo inside will end up getting attached to the global object (except in strict mode, where there's no implicit this on bare function calls, so the assignment to this.doSomethingElse tries to attach to undefined, causing a runtime error).
That only leaves the second as appropriate, but ultimately it's a question of correctness, not performance.
Do not define methods in constructor - that means defining them every time an instance is created. Use Control.prototype.foo = function() {} instead. Also you do not need to return this if you're using new operator - that's the whole point of new operator.
The recommended approach is this:
function MyClass(param1) {
// Here we're changing the specific instance of an object
this.property1 = param1;
}
// Prototype will be shared with all instances of the object
// any modifications to prototype WILL be shared by all instances
MyClass.prototype.printProperty1 = function() {
console.log(this.property1);
}
var instance = new MyClass("Hello world!");
instance.printProperty1(); // Prints hello world
To understand this code, you need to understand javascript's prototype-based inheritance model. When you create instance of MyClass, you get a new object that inherits any properties present in MyClass.prototype. Read more about it.
Also I wonder:
The function is a controller, and just declared once.
If you're not using this multiple times, you don't need to create something like class. You can do this instead:
var control = {doSomething:function() { ... }};
I assume you are used to Java, where everything must be a class, whether it makes sense or not. Javascript is different, you can also make single objects or functions as you need.
Hello I am having an issue with self invoking a function that belongs to an object's prototype. My goal is to create a method for a custom object that invokes a function it has upon creating an instance.
function Message(text) {
this.text = text;
}
Message.prototype.send = function() {
alert(this.text);
}();
var testMessage = new Message("Hello Goodbye");
The issue here is I receive undefined when I create an instance of the Message object. It may have to do with the way the keyword, "this" is defined as, although I am not completely sure. However if instead of adding the method to the prototype and just put it in the function, it works fine like the one below.
function Message(text) {
this.text = text;
this.send = function() {
alert(text);
}();
}
var testMessage = new Message("Hello Goodbye");
The send method runs exactly when you invoke it with () - examine your control flow.
In your first case, you define a function on Message's prototype attribute, then invoke it. It alerts undefined, because Message.prototype (this in that context) does not contain a text attribute.
In your second case you add text to this before invoking send, thus making it defined when the alert runs.
I have a difficulty in understanding, how my current JavaScript code works. I've managed to solve a problem in accessing private object method from event handler closure, but I'd like to know why does it work so.
The code utilizes the well-known module/plugin metaphor:
(function(module, $, undefined)
{
function myPrivateCode(e){ /*...*/ }
module.myPublicCode = function(e) { /*...*/ }
module.init = function()
{
var that = this;
$('.clickable').click(function(e)
{
if($(e.target).hasClass('classX'))
{
that.myPublicCode(e.target); // requires 'that' to work
}
else
{
// that.
myPrivateCode(e.target); // will fail if 'that' uncommented
}
});
}
}(window.module = window.module || {}, jQuery ));
In the code I set a click handler which invokes either public or private method. It's perfectly conceivable that we need to pass an object reference into the event handler closure, which is done by that local variable. What is strange to me is that myPrivateCode does neither require that as a refernce, nor fails due to its "privacy". This makes me think that myPrivateCode accesses not the appropriate object, and works somehow differently to expected way. Could someone explain what happens? Certainly I'm missing something.
Both that and myPrivateCode are available to your event handler through a closure. In short, what's going on is that every variable and function you declare inside of another function has access to the outer scope.
myPublicCode, on the other hand, is not available through closures, because it's being assigned to your module object specifically. So the only way to call it is by using module.myPublicCode() (or that.myPublicCode() as you did – but you don't actually need that there, since module is also available).
Your call to myPrivateCode(e.target); is running in the context of the anonymous function that you pass as a handler to the click function.
For more information, read up on closures.
For a simpler example, try out this code:
var foo = function () {
var a = 1;
return function (b) {
return a+b;
}
};
var bar = foo();
bar(1); // 2
bar(1) will always always gives 2, because a = 1 was in scope when the function was created. In your case, a is your that and your handler is the closed function.
http://jsfiddle.net/Fh8d3/
First of all, I'm attempting to use faux namespaces in my JavaScript program like so:
// Ish.Com namespace declaration
var Ish = Ish || {};
Ish.Com = Ish.Com || {};
// begin Ish.Com.View namespace
Ish.Com.View = new function() {
var privateVariable;
this.publicFunction = function() {
this.publicFunction2()
};
this.publicFunction2 = function() { ... };
};
I'm not crazy about using this to call other functions, but up to recently, it has worked. However, I've added event listeners to some elements, and they interpret this to be the target object.
I know I can use the full namespace instead of this to call functions inside of my listeners (Ish.Com.View.publicFunction2()), but the listeners often call one function, which calls another, and another. I'd need to use the entire namespace in nearly every function call.
How can I get namespaces to work nicely with Event Listeners? I'd also be interested in a better way of implementing namespaces, since using this.publicFunction2() is clunky.
I'm very interested in best-practices, and learning how to write a well architected application in JavaScript. However, frameworks are out of the question until I gain a more thorough understanding of JavaScript.
Seems like I've been answering every question this morning the same way :-)
You can use ".bind()":
var eventHandler = yourObject.someFunction.bind(yourObject);
That'll guarantee that this will refer to "yourObject" whenever the "eventHandler" is called by anything.
The "bind()" function is there on the Function.prototype object in newer browsers. The Mozilla docs include a solid implementation of "bind()" you can use to patch older browsers.
What "bind()" does is return you a new function that explicitly arranges for this to be bound as you stipulate. You can also pass arguments to be passed in, if you like. An alternative to using "bind()" is to wrap the function call in your own anonymous function:
var eventHandler = function() { yourObject.someFunction(); };
I don't know if i have understood completely your question.
Would this suit your needs ?
var obj = new function() {
var scope = this;
this.fun1 = function() {
return scope.fun2();
}
this.fun2 = function() {
//do sth
}
};
This is caused by variable context and closure. "this" always refers to the current object. The event function is an object itself and "this" refers to that object. If you need to refer to the parent object you can use bind as described previously or you set the parent "this" to a variable and use that in your event function.
// Ish.Com namespace declaration
var Ish = Ish || {};
Ish.Com = Ish.Com || {};
// begin Ish.Com.View namespace
Ish.Com.View = new function() {
var privateVariable, thisObj=this;
this.publicFunction = function() {
thisObj.publicFunction2()
};
this.publicFunction2 = function() { ... };
};
I am developing an add-on for Firefox (3.6.*). in the following code notify called from inside init works fine, but I get an error saying this.notify is not a function when it is called from within onPageLoad. Why is that?
Also when I change the call to myextobj.notify('title', 'msg'), it works. The same is true for accessing variables. So, what is the difference between this and the object name as a prefix?
var myextobj = {
init: function() {
this.notify('init', 'We are inside init');
...
var appcontent = document.getElementById("appcontent"); // browser
if(appcontent)
appcontent.addEventListener("DOMContentLoaded", this.onPageLoad, true);
},
onPageLoad: function(aEvent) {
this.notify('onPageLoad', 'We are inside onPageLoad');
...
},
notify: function (title, text) {
Components.classes['#mozilla.org/alerts-service;1'].
getService(Components.interfaces.nsIAlertsService).
showAlertNotification(null, title, text, false, '', null);
}
};
window.addEventListener("load", function() { myextobj.init(); }, false);
When you do this:
appcontent.addEventListener("DOMContentLoaded", this.onPageLoad, true);
you just add the function that is hold in onPageLoad as event handler. The connection to the object is lost and this will refer to the global object when executed.
Just create an anonymous function as you do for the load event:
var that = this; // capture reference to object
appcontent.addEventListener("DOMContentLoaded", function(event) {
that.onPageLoad(event);
// myextobj.onPageLoad(event); should also work in this case
}, true);
Remember that functions are first class objects in JavaScript, they can be passed around like any other value. Functions have no reference to an object they are defined on, because they don't belong to that object. They are just another kind of data.
To which object this refers to in a function is decided upon execution and depends on the context the function is executed in. If you call obj.func() then the context is obj, but if you assign the function to another variable before like var a = obj.func (that is wat you do with adding the event handler (in a way)) and then call a(), this will refer to the global object (which is window most of the time).
When onPageLoad is called for the event, 'this' would not be referring to your myextobj. Because it wasn't called in the context of your object myextobj.
The way I deal with this is, by having all member functions of an object using the following convention.
var myObj = {
.....
counter: 0,
.....
myFunction: function () {
var t = myObj;
t.myOtherFunc();
},
....
myOtherFunc: function() {
var t = myObj;
t.counter++;
}
};
See how, I'm aliasing myObj as t, to save on typing and making my intent of using this clear.
Now you can call your methods safely from any context without worrying about what this would be referring to. Unless you really want the standard behavior; in that case, you may like to look at the call and apply methods. This link might help: Function.apply and Function.call in JavaScript
You may also want to look at a recent addition to JavaScript (would be available in FireFox 4): the bind method: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
Another link, which directly addresses your problem: https://developer.mozilla.org/en/DOM/element.addEventListener#The_value_of_this_within_the_handler
The other way to add an event listener without losing track of this is to pass this itself as the event listener. However you are limited in that the function is always called handleEvent, so it's less useful if you have many listeners (unless they are all for different events, in which case you can switch on the event's type).