Develop Reference

Possible to modify but not replace a method's prototype?

Let's say I have a method Object.getNumber() and I want to make a small change to the results of that method, for example add 1 to the result, and no I can't access that method's code.
Any way to do this with its prototype? I would need to access the method within the defineProperty call I suppose.
Object.defineProperty(Object.prototype, 'getNumber',{ get: function () { ... } });

You can always replace the original method in the prototype, but keep the original somewhere in the local variable. Something like this:
Object.prototype.getNumber = (function() {
let originalFn = Object.prototype.getNumber;
return function() {
let originalResult = originalFn.apply(this, arguments);
return originalResult + 1;
};
})();

A method is just a function that you can pass around so you can simply apply that function after another:
const getNumber = Object.prototype.getNumber;
Object.prototype.getNumber = function() {
const result = getNumber();
return result + 1;
};
But modifying a native prototype is not good practice, especially Object.prototype as that affects too many things.

Assign object to "this"

Say I have a class and some static helper methods like this:
function MyClass (myVar) {
this.myVar = myVar;
this.replaceMe = function (value) {
// this will fail
this = MyClass.staticHelper( value );
return this;
}
this.revealVar = function () {
alert( this.myVar );
}
}
MyClass.staticHelper = function (instance, value) {
return new MyClass( instance.myVar + value );
}
What I want to do is something like this:
var instance = new MyClass( 2 );
instance.revealVar(); // alerts 2
instance.replaceMe( 40 ).revealVar(); // alerts 42
The reason is that my class has a slightly more complicated structure and I don't want to assign all internal variables manually everytime, but rather replace the entire object. Is there a simple way to do so?

instance.replaceMe( 40 ).revealVar(); alerts 42
OK, for that return MyClass.staticHelper(this, value); would suffice. The question is only whether the next call to instance.revealVar() should now alert 2 or 42 - if you want instance to be changed to 42 it gets more complicated:
this = MyClass.staticHelper( value ); // this will fail
…because this is not a common variable, but a keyword and evaluates to the value of the ThisBinding of the current execution context which is set depending on how the function is entered - you cannot assign to it, you can only set it when invoking the function.
I don't want to assign all internal variables manually everytime, but rather replace the entire object.
Unfortunately you have to do so, without changing the properties of instance object (and the closure-hidden variables) you won't change the instance and revealVar() will stay 2.
Is there a simple way to do so?
Yes, it can be done programmatically. The simplest method would be to call the constructor (again) on the current instance, like it happens when invoked with the new keyword:
MyClass.call( instance, instance.myVar + value );
Yet you can't use this like the static function which creates a completely new instance. Either you put it in a static method and call that from replaceMe with this, or you just put it directly in replaceMe.
If you need a static method that at first returns a completely new instance, you could use that as well by copying the new properties on the old instance:
….replaceMe = function(val) {
var newInst = MyClass.staticHelper(this, val); // new MyClass(this.myVar+val);
for (var prop in newInst)
if (newInst.hasOwnProperty(prop))
this[prop] = newInst[prop];
return this;
};
That means overwriting the old attributes, and also the old closures can be garbage-collected now as nothing refers to them any more.
Btw, I'd recommend to put your methods on the prototype instead of assigning them in the constructor.

How about just returning the new instance:
function MyClass(myVar) {
// ...
this.replaceMe = function (value) {
return MyClass.staticHelper(this, value);
}
// ...
}
MyClass.staticHelper = function (instance, value) {
return new MyClass( instance.myVar += value );
}

There are two reasons why this is not going to work in Javascript.
First, despite that it looks like a variable, this is actually a function call* and therefore cannot be assigned to. this=foo is the same as bar()=baz. So it's not possible to have code like this:
a = 5
a.change(10)
alert(a == 10) // nope
Second, even if this=z were possible, that approach would fail anyways, because Javascript passes by value, therefore it's not possible to have a function that changes the value of its argument:
a = 5
change(a)
alert(a == 10) // nope
* "is" means "fully identical in every way"

I wanted to do something very similar a while back. Unfortunately there's no way to assign a value to this - the this pointer is a read only variable. However the next best thing is to use a getter and setter object to change the variable holding your instance itself.
Note that this only updates a single reference to the instance. You can read more about it here: Is there a better way to simulate pointers in JavaScript?
So this is how it works:
function MyClass(pointer, myVar) {
this.myVar = myVar;
this.replaceMe = function (value) {
pointer.value = MyClass.staticHelper(this, pointer, value);
return pointer.value;
};
this.revealVar = function () {
alert(this.myVar);
};
}
MyClass.staticHelper = function (instance, pointer, value) {
return new MyClass(pointer, instance.myVar + value);
};
This is how to create the pointer and use it:
var instance = new MyClass({
get value() { return instance; },
set value(newValue) { instance = newValue; }
}, 2);
instance.revealVar(); // alerts 2
instance.replaceMe(40).revealVar(); // alerts 42
It's not the most elegant solution but it gets the job done. You can see this code in action: http://jsfiddle.net/fpxXL/1/

jquery (or plain js) bind change event to properties of objects in an array

i have an array of objects, and these objects all have an 'isvalid' attribute.
Is there a way with JQuery or plain javascript to bind code to the event that the value of that property changes?
So when i have an array with 10 objects, i want to execute a function when the 'isvalid' property of one of the object changes.
Is that possible?
Michel

It's possible with plain JavaScript by using a property setter function. Using ES5 syntax, that looks like this (live example -- works in Chrome and other browsers with reasonable ES5-compliance):
// Our constructor function
function Thing() {
}
// Define a "foo" property with a setter and getter
Object.defineProperty(Thing.prototype, "foo", {
set: function(value) {
this.fooStorage = value;
display("Foo was set to '" + value + "'");
},
get: function() {
return this.fooStorage;
}
});
// Create a `Thing`
var t = new Thing();
// Set its property
t.foo = "bar";
When the t.foo = "bar"; assignment is executed, the setter function is called. You can have the setter function call a callback if you like, to notify you that the Thing object was changed.
Note that the above is just an example. It uses the fooStorage property to store the value of foo, which is less than ideal but nice and simple for an example.
To do this in a way that's compatible with non-ES5 JavaScript engines, you either have to fall back on some proprietary and now-deprecated syntax from Mozilla (which won't work on other engines), or just use an explicit setter function (live example):
// Our constructor function
function Thing() {
}
// Define a "foo" property with a setter and getter
Thing.prototype.setFoo = function(value) {
this.fooStorage = value;
display("Foo was set to '" + value + "'");
};
Thing.prototype.getFoo = function() {
return this.fooStorage;
};
// Create a `Thing`
var t = new Thing();
// Set the property
t.setFoo("bar");
(And again, this is just an example using a simplistic means of storing foo's value.)
This has the advantage that it works with just about any JavaScript engine, not just ES5-compliant ones, and it's explicit that setting foo is a function call, not just a property assignment (whereas with the ES5 setter/getter syntax, the person setting the foo property doesn't know that it's a function call — which has upsides and downsides).
So that's how you capture the fact that the property changed. Then it's just a matter of allowing callbacks to be registered and removed to receive notification of changes. These are easily managed in a simple array. Here's an ES5-based example doing it on a per-object basis; obviously you could do this in some kind of grouped way instead for the entire array of objects you want to let people watch. (live copy)
window.onload = function() {
// Our constructor function
function Thing() {
this.fooHandlers = [];
}
// Add a listener for "foo" changes
Thing.prototype.addFooChangeHandler = function(callback) {
this.fooHandlers.push(callback);
};
// Remove a listener for "foo" changes
Thing.prototype.removeFooChangeHandler = function(callback) {
var index;
index = this.fooHandlers.indexOf(callback);
if (index >= 0) {
this.fooHandlers.splice(index, 1);
}
};
// Define a "foo" property with a setter and getter
Object.defineProperty(Thing.prototype, "foo", {
set: function(value) {
var index;
for (index = 0; index < this.fooHandlers.length; ++index) {
try {
// Handler receives a reference to this Thing,
// foo's old value, and foo's new value.
this.fooHandlers[index](this, value, this.fooStorage);
}
catch (e) {
}
}
this.fooStorage = value;
},
get: function() {
return this.fooStorage;
}
});
// Create a `Thing`
var t = new Thing();
// Add a foo change handler
t.addFooChangeHandler(function(t, newValue, oldValue) {
display("Handler 1: Foo changed from '" + oldValue + "' to '" + newValue + "'");
});
// Add another
t.addFooChangeHandler(function(t, newValue, oldValue) {
display("Handler 2: Foo changed from '" + oldValue + "' to '" + newValue + "'");
});
// Set the property
t.foo = "bar";
t.foo = "boo";
// === Basic utility functions
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
};
To do that without an ES5 JavaScript engine, just set the setFoo / getFoo model described earlier, and make sure the engine supports Array#indexOf correctly (some engines don't have it at all, some use == rather than === equivalence) or replace the use of Array#indexOf in removeFooChangeHandler with a simple loop through the array looking for the callback:
// Remove a listener for "foo" changes
Thing.prototype.removeFooChangeHandler = function(callback) {
var index;
for (index = 0; index < this.fooHandlers.length; ++index) {
if (this.fooHandlers[index] === callback) {
this.fooHandlers.splice(index, 1);
break;
}
}
};
Side note: There are a number of anonymous functions in these examples. I've done that to avoid making things seem complex, but I'm not a fan of anonymous functions, I prefer that functions have names. See the link for details.

One thing you could do is set the property of the object as private and then change them only with a setter. This way you could trigger an event each time you set the variable with the setter. this would work in any environment.
If you ar limited to the browser you could use watch (give a look here Object.watch() for all browsers? for compatibilty between browsers)

Take a look at this: http://blog.hydroprofessional.com/?p=84
This is get you notified when you property changes

Accessing variables in objects in javascript without "this"

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Peon(number) {
this.number = number;
this.inc = function() {
number=number+1;
};
return true;
}
var p=new Peon(10);
function returnNumber() {
p.inc();
alert(p.number);
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT id="b00" TYPE="button" Value="Click" onClick="returnNumber()">
</BODY>
</HTML>
This code doesn't work as intended. Is there a way to make it work without having to write
this.number=this.number+1;
Here it is a trivial choice, but in bigger codes not having this.* would make it a lot more readable. Is it possible?

You can make number "private", but then you need a getter:
function Peon(number) {
var number = number;
// increment
this.inc = function() {
number++;
};
// a simple getter
this.getNumber = function() {
return number;
}
}
var p = new Peon(10);
p.inc();
alert(p.getNumber());
You should read Douglas Crockfords "The Good Parts" for more information on how to use this pattern, there's (limited) a preview available at Google Books.
Also you don't need to return something from the constructor, your return true is superfluous.

No, you have to use this to reference properties on the this object. Note that this in JavaScript is very different from this in some other languages, like C or Java. More here and here.
What your code is doing is accessing the number argument that was passed into the Peon constructor function, rather than the this.number property you created in the constructor. Which is why it doesn't work as intended, but doesn't fail, either.
There's no reason to define your inc operation within the Peon constructor function, BTW, and some good reasons not to (every individual object created via Peon will get its very own copy of that function). So instead, you can define it like this:
function Peon(number) {
this.number = number;
// Don't return values out of constructor functions, it's
// an advanced thing to do. In your case, you were returning
// `true` which was being completely ignored by the JavaScript
// interpreter. If you had returned an object, the `this` object
// created for the `new Peon()` call would have been thrown away
// and the object you returned used instead.
}
Peon.prototype.inc = function() {
++this.number;
};
var p=new Peon(10);
function returnNumber() {
p.inc();
alert(p.number); // alerts 11
}

Not really, but this is a little more concise
this.number++
Actually, as a side note, you'd be better off declaring .inc outside the constructor of Peon. You could do this with prototype. That way the inc function is not reconstructed each time you create an object of type Peon.
Peon.prototype.inc = function(){
this.number++;
}
Or instead of using p.inc() you could do p.number++. That's the only way I can think of avoiding the this keyword.

The only readable way I can see doing it would be:
this.inc = function() {
this.number++;
};
Otherwise, in your "bigger codes" postulation, you could do something like this:
this.inc = function() {
var number = this.number; // obviously simple here. Imagine more complexity
number++;
};

Yes, you do not need to use 'this' in javascript. You can access variables via closure instead of 'this'
function createPeon(number) {
function inc() {
number=number+1;
};
function getNumber() {
return number;
}
return { inc, getNumber };
}
var p=createPeon(10);
p.inc();
alert(p.getNumber());

Javascript: constant properties

In javascript, can I declare properties of an object to be constant?
Here is an example object:
var XU = {
Cc: Components.classes
};
or
function aXU()
{
this.Cc = Components.classes;
}
var XU = new aXU();
just putting "const" in front of it, doesn't work.
I know, that i could declare a function with the same name (which would be also kind of constant), but I am looking for a simpler and more readable way.
Browser-compatibility is not important. It just has to work on the Mozilla platform, as it is for a Xulrunner project.
Thank you a lot!
Cheers.

Since you only need it to work on the Mozilla platform, you can define a getter with no corresponding setter. The best way to do it is different for each of your examples.
In an object literal, there is a special syntax for it:
var XU = {
get Cc() { return Components.classes; }
};
In your second exampe, you can use the __defineGetter__ method to add it to either aXU.prototype or to this inside the constructor. Which way is better depends on whether the value is different for each instance of the object.
Edit: To help with the readability problem, you could write a function like defineConstant to hide the uglyness.
function defineConstant(obj, name, value) {
obj.__defineGetter__(name, function() { return value; });
}
Also, if you want to throw an error if you try to assign to it, you can define a setter that just throws an Error object:
function defineConstant(obj, name, value) {
obj.__defineGetter__(name, function() { return value; });
obj.__defineSetter__(name, function() {
throw new Error(name + " is a constant");
});
}
If all the instances have the same value:
function aXU() {
}
defineConstant(aXU.prototype, "Cc", Components.classes);
or, if the value depends on the object:
function aXU() {
// Cc_value could be different for each instance
var Cc_value = return Components.classes;
defineConstant(this, "Cc", Cc_value);
}
For more details, you can read the Mozilla Developer Center documentation.

UPDATE: This works!
const FIXED_VALUE = 37;
FIXED_VALUE = 43;
alert(FIXED_VALUE);//alerts "37"
Technically I think the answer is no (Until const makes it into the wild). You can provide wrappers and such, but when it all boils down to it, you can redefine/reset the variable value at any time.
The closest I think you'll get is defining a "constant" on a "class".
// Create the class
function TheClass(){
}
// Create the class constant
TheClass.THE_CONSTANT = 42;
// Create a function for TheClass to alert the constant
TheClass.prototype.alertConstant = function(){
// You can’t access it using this.THE_CONSTANT;
alert(TheClass.THE_CONSTANT);
}
// Alert the class constant from outside
alert(TheClass.THE_CONSTANT);
// Alert the class constant from inside
var theObject = new TheClass();
theObject.alertConstant();
However, the "class" TheClass itself can be redefined later on

If you are using Javascript 1.5 (in XUL for example), you can use the const keyword instead of var to declare a constant.
The problem is that it cannot be a property of an object. You can try to limit its scope by namespacing it inside a function.
(function(){
const XUL_CC = Components.classes;
// Use the constant here
})()

To define a constant property, you could set the writable attribute to false in the defineProperty method as shown below:
Code snippet:
var XU = {};
Object.defineProperty(XU, 'Cc', {
value: 5,
writable: false
});
XU.Cc = 345;
console.log(XU.Cc);
Result:
5 # The value hasn't changed