I build a objects source in JavaScript.
Is there any way to call some methods in one line like this:
var x = new object("aaa").method_a().method_b().method_c();
If you want to chain function call's you need to return this from your functions
function method_a(){
// do something
return this;
}
Same for other functions -
then you can do var x = new object("aaa").method_a().method_b().method_c();
The way to do that is making each method to return the object itself. For example:
function Person() {};
Person.prototype.setName=function(n){
this.name=n;
return this;
}
Person.prototype.setAge=function(a) {
this.age=a;
return this;
}
var p= new Person().setName("John").setAge(20);
The obvious gotcha is you cannot do that if the method has to return any other value (you can do it with setters but not with getters)
If your object doesn't support a fluid interface you can always wrap that functionality on top of it:
function FluidWrapper(obj)
{
var o = {};
for (var p in obj) {
if (typeof obj[p] == 'function') {
o[p] = function(method) {
return function() {
obj[method].apply(obj, [].slice.call(arguments, 0));
return o;
};
}(p);
}
}
return o;
}
var x = new object("aaa");
FluidWrapper(x).method_a().method_b().method_c();
Demo
While Mohammad Adil's answer is the most common scenario, i feel that the possibilities haven't been explored properly.
A function returns a value. In JavaScript you can call methods on any value except null and undefined. This means that this is perfectly acceptable:
var x = 987654321;
var y = x.toString().split('').sort().join('0');
In this scenario,
the toString() method was called on a Number who's internal value is 987654321 and returns a string.
the split('') method was called on a String who's internal value is '987654321' and returns an Array.
the sort() method was called on an Array holding the following values:['9','8','7','6','5','4','3','2','1'] and returns the same Array (but sorted).
The join('0') method was called on the same Array, but holding the values ['1','2','3','4','5','6','7','8','9'] and returns a string.
finally, after all these operations, y contains the value '10203040506070809';
So it is not necessary for the object the chained methods act on to be the same, as long as you are aware at every step of what that object is.
When you have a method called on an object, inside that method this will refer to the object. So if you return this;, then another method of that object can be called afterwards.
It is important to note that sometimes you want to return a new object of the same type rather than change the object and return it. Both work equally well when chaining, but the results are different when not. Consider the following jQuery example:
var divs = $('div'); // all divs on the page
var marked = divs.filter('.marked'); // all marked divs on the page
marked.css('color', 'red'); // make marked divs red
Because the filter method returns a new jQuery object, the initial divs variable still contains all the divs on the page. If the filter method were to eliminate things from the jQuery object it was called on and return it, then divs would point to the same object as marked and therefore would no longer have all divs on the page.
From a chaining perspective, nothing changes between the two potential implementations (except for some throw-away objects):
$('div').filter('.marked').css('color', 'red');
Related
I would like to understand the meaning of that code fragment. "saveTo" is a array, the programmer assigned a function() to the splice method. I don't understand what does it mean. Is that a override? What is the meaning of the return argument?, and why the function takes no argument while splice requires 2 or more arguments?
saveTo.splice = function() {
if (saveTo.length == 1) {
$("#send").prop("disabled", true);
}
return Array.prototype.splice.apply(this, arguments);
};
Javascript lets you re-assign methods at runtime. In this case, what the programmer was doing is reassigning splice on this specific instance of an array in order to call a jQuery method. Beyond that, it works in exactly the same way as the existing splice as they are calling return Array.prototype.splice.apply(this, arguments); - meaning that this method just passes on whatever arguments are passed to it.
Here's a demo:
var myArray = [1,2,3,4];
console.log("Splice before re-assing: ", myArray.splice(1,1));
// reset it.
myArray = [1,2,3,4];
myArray.splice = function(){
console.log("From inside new splice function");
return Array.prototype.splice.apply(this, arguments);
}
console.log("Splice after re-assiging: ", myArray.splice(1,1));
Whether this is a good thing to do is debatable. It breaks a few principles of programming.
The programmer that wrote this code knew that some other part of the program is calling splice on this array, and he wanted to attach an event to that, in order to update the user interface (hence the call to jQuery).
This is commonly called "Monkey Patching". You can read about it at https://www.audero.it/blog/2016/12/05/monkey-patching-javascript/
This is not a good pratice as it obfuscate what is happening: no programmer would expect that calling a data manipulation function has side-effects somewhere else.
You can run this sample to understand how it works:
const myArray = [];
// Patch push method only for this instance of array.
myArray.push = function() {
// log event
console.log('myArray.push was called with the following arguments', arguments);
// Call the original push function with the provided arguments.
return Array.prototype.push.apply(this, arguments);
}
myArray.push(1);
You can also patch methods for all instances of a given class:
// Patch push method on all arrays
const originalPush = Array.prototype.push;
Array.prototype.push = function() {
// log event
console.log('.push was called with the following arguments', arguments);
// Call the original push function with the provided arguments.
return originalPush.apply(this, arguments);
}
const myArray = [];
myArray.push(1);
As for your question about the arguments, in javascript all functions can access the arguments array-like object that contains the arguments the function was called with, which does not depend on which arguments are specified in the original declaration.
function doSomething(arg1) {
console.log(arguments[2]);
}
doSomething(1, 2, 3); // outputs "3"
Here is the MDN documentation about it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
Note that there is a better way to extend arrays in ES6:
class CustomArray extends Array {
splice(...args) {
if(this.length === 1) {
$("#send").prop("disabled", true);
}
super.splice(...args);
}
}
Now that there are other ways to change the arrays length, .length, .pop, .shift, etc. so those should be overriden as well. However then it is still questionable wether the code calling those methods should not just cause the side effect.
What this does is it adds some checks for specifically saveTo.splice. If you call anyOtherArray.splice, then it'll just be evaluated as per normal. The reason it takes no arguments is because Array.prototype.splice takes arguments, and also the calling context of saveTo, as well as the array-like objects arguments, representing all the arguments passed to saveTo.splice. So it's just adding a little bit of extra code based on a specific condition - other than that, there's no difference to the native splice.
1) Yes, the programmer has overridden splice method, its not recommended
2) return statement is nothing but calls Array.prototype.splice(the original method).
3) Yes, splice requires arguments, but in JS, you may not define them as function params. You get the passed parameters as an array like object arguments inside your functions,
if you look closely, they call Array.prototype.splice with this and arguments object.
Okay, let's dissect this piece by piece.
saveTo.splice = function() {
if (saveTo.length == 1) {
$("#send").prop("disabled", true);
}
return Array.prototype.splice.apply(this, arguments);
};
As we all know that in JavaScript functions are first class objects, so if we have an object let's say saveTo something like this:
const saveTo = {};
Then we can assign a function to one of its properties like :
saveTo.splice = function() {
};
or something like this to:
const saveTo = {
splice: function() {
}
};
With that out of the way, you are just calling the Array#prototype#splice method to create a shallow copy out of the array and passing it an iterable to it.
So in total you have overridden the native Array#prototype#splice to fit your requirement.
Let's say I have a function
var addOneToArray = function(arr) {
return arr.push(1);
};
If arr is always going to be the same in the program (let's say it's always myArray), does it make sense to do this instead:
var addOneToArray = function() {
return myArray.push(1);
};
What I'm wondering is, is there any added value to doing the latter in terms of speed or something else? Or is it better to have a more generic function, that maybe gets reused?
If you have the only method that needs to executed then it would be fine. But when you have to implement multiple methods related to same object (in our case Array object) it is always fine to have own constructor for the same.
You can use something like,
var customArray = function() {}
customArray.prototype = Array.prototype; // Make it to behave like Array
Now, customArray is same as the Array class. You can add your method as
customArray.prototype.addOneToArray = function() {
this.push(1);
};
How you can use it,
var arr = new customArray();
arr.addOneToArray();
I am writing a Javascript function to count the number of instances of an element in an unsorted array. It has a method signature like this
Array.prototype.numberOfOccurrences = function() {
}
Here is an example of expected behavior
var arr = [4, 0, 4];
Test.assertEquals(arr.numberOfOccurrences(4), 2);
My problem is that I don't know how to access the elements in the array. The function doesn't take any parameters so how do I reference the array being passed in?
Note: The instructions aren't very descriptive for this kata on code wars and adding a parameter to the function returns some error unexpected token.
Inside the function you are creating into the Array.prototype you can access all the prototype functions through the "this" keyword.
Meaning you can access the array items using numeric properties like this[0] or this[1] to a access the first and second item respectively.
You can also call functions which allows you to iterate over each item on the array, such as: forEach, filter, etc.
Please refer this page to see everything you can do with the array prototype:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype
Lastly don't forget that the JavaScript implementation varies on each browser, so a function that works on Chrome, might not work on InternetExplorer, always confirm on caniuse.com If the function you are used has the same implementation on your targets browsers.
Cheers.
Whether you should extend javascript base objects aside, this is your friend:
Array.prototype.numberOfOccurrences = function(valueToFind) {
return this.filter(function(item) {
return item === valueToFind;
}).length;
}
var a = [1,2,3,3,3,3];
console.log(a.numberOfOccurrences(3)); //4
As noted above, if you're not able to change the function signature for whatever reason you can specify it as follows:
Array.prototype.numberOfOccurrences = function() {
var valueToFind = arguments[0];
...
}
I would recommend adding the parameter to the function for clarities sake. Seems counter intuitive for a function like numberOfOccurences to not take in a parameter - numberOfOccurences of what?
Fiddle: http://jsfiddle.net/KyleMuir/g82b3f98/
You might try using the locally available variable 'arguments' inside of the function. So for example, your code might look like thsi:
Array.prototype.numberOfOccurrences = function() {
var args = arguments || {};
var testArray, testCheck;
if (args[0] && Array.isArray(args[0]) {
// do something with the array that was the first argument, like:
testArray = args[0];
testCheck = testArray.indexOf(args[1]);
return testCheck;
} else {
// do what you want to do if the function doesn't receive any arguments or the first argument
// received isn't an array.
}
}
'arguments' is always available to you inside a declared function.
I'm making a class that will be recreated many times, and in order to save memory I need to thoroughly delete it. Basically I need to access its containing variable if possible.
Here's the example:
function example(){
this.id=0;
this.action=function(){alert('tost');}
this.close=function(){ delete this;}
}
var foo=new example();
My question is:
How can I get access to the foo variable from within the example function so I can remove it?
window.foo will access that global variable.
this.close=function(){ delete window.foo; }
However, I remember there is something fishy with global variables, delete and window, so you might want to do otherwise, and simply use window.foo = null; for example.
If you want to access a variable defined in another function, you'll want to read the answers to this SO question.
Since what you want is to allow the garbage collector to release that object, you need to ensure that there are no references left to the object. This can be quite tricky (i.e. impossible) because the code manipulating the object can make multiple references to it, through global and local variables, and attributes.
You could prevent direct reference to the object by creating a proxy to access it, unfortunately javascript doesn't support dynamic getters and setters (also called catch-alls) very well (on some browseres you might achieve it though, see this SO question), so you can't easily redirect all field and method (which are just fields anyway) accesses to the underlying object, especially if the underlying object has many fields added to it and removed from it dynamically (i.e. this.anewfield = anewvalue).
Here is a smiple proxy (code on jsfiddle.net):
function heavyobject(destroyself, param1, param2) {
this.id=0;
this.action=function(){alert('tost ' + param1 + "," + param2);};
this.close=function(){ destroyself(); }
}
function proxy(param1, param2) {
object = null;
// overwrites object, the only reference to
// the heavyobject, with a null value.
destroyer = function() { object = null; };
object = new heavyobject(destroyer, param1, param2);
return function(fieldname, setvalue) {
if (object != null) {
if (arguments.length == 1)
return object[fieldname];
else
object[fieldname] = setvalue;
}
};
}
var foo = proxy('a', 'b');
alert(foo("action")); // get field action
foo("afield", "avalue"); // set field afield to value avalue.
foo("action")(); // call field action
foo("close")(); // call field close
alert(foo("action")); // get field action (should be 'undefined').
It works by returning a function that when called with a single argument, gets a field on the wrapped object, and when called with two arguments sets a field. It works by making sure that the only reference to the heavyobject is the object local variable in the proxy function.
The code in heavyobject must never leak this (never return it, never return a function holding a reference to var that = this, never store it into a field of another variable), otherwise some external references may be created that would point to the heavyobject, preventing its deletion.
If heavyobject's constructor calls destroyself() from within the constructor (or from a function called by the constructor), it won't have any effect.
Another simpler proxy, that will give you an empty object on which you can add fields, read fields, and call methods. I'm pretty sure that with this one, no external reference can escape.
Code (also on jsfiddle.net):
function uniquelyReferencedObject() {
object = {};
f = function(field, value) {
if (object != null) {
if (arguments.length == 0)
object = null;
else if (arguments.length == 1)
return object[field];
else
object[field] = value;
}
};
f.destroy = function() { f(); }
f.getField = function(field) { return f(field); }
f.setField = function(field, value) { f(field, value); }
return f;
}
// Using function calls
o = uniquelyReferencedObject();
o("afield", "avalue");
alert(o("afield")); // "avalue"
o(); // destroy
alert(o("afield")); // undefined
// Using destroy, getField, setField
other = uniquelyReferencedObject();
other.setField("afield", "avalue");
alert(other.getField("afield")); // "avalue"
other.destroy();
alert(other.getField("afield")); // undefined
The truth is that you can not delete objects in Javascript.
Then you use delete operator, it accepts the property of some object only.
So, when you use delete, in general you must pass to it something like obj.p. Then you pass just a variable name actually this means 'property of global object', and delete p is the same as delete window.p. Not sure what happens internally on delete this but as a result browser just skip it.
Now, what we actually deleting with delete? We deleting a reference to object. It means object itself is still somethere in memory. To eliminate it, you must delete all references to concrete object. Everythere - from other objects, from closures, from event handlers, linked data, all of them. But object itself doest have information about all this references to it, so there is no way to delete object from object itself.
Look at this code:
var obj = <our object>;
var someAnother = {
...
myObjRef: obj
...
}
var someAnotherAnother = {
...
secondRef : obj
...
}
To eliminate obj from memory you must delete someAnother.myObjRef and someAnoterAnother.secondRef. You can do it only from the part of programm which knows about all of them.
And how we delete something at all if we can have any number of references everythere? There are some ways to solve this problem:
Make only one point in program from there this object will be referenced. In fact - there will be only one reference in our program. and Then we delete it - object will be killed by garbage collector. This is the 'proxy' way described above. This has its disadvantages (no support from language itself yet, and necessarity to change cool and nice obj.x=1 to obj.val('x',1). Also, and this is less obvious, in fact you change all references to obj to references to proxy. And proxy will always remain in memory instead of object. Depending on object size, number of objects and implementation this can give you some profit or not. Or even make things worse. For example if size of your object is near size of proxy itself - you will get no worth.
add to every place there you use an object a code which will delete reference to this object. It is more clear and simple to use, because if you call a obj.close() at some place - you already knows everything what you need to delete it. Just instead of obj.close() kill the refernce to it. In general - change this reference to something another:
var x = new obj; //now our object is created and referenced
x = null;// now our object **obj** still im memory
//but doest have a references to it
//and after some milliseconds obj is killed by GC...
//also you can do delete for properties
delete x.y; //where x an object and x.y = obj
but with this approach you must remember that references can be in very hard to understand places. For example:
function func() {
var x= new obj;// our heavy object
...
return function result() {
...some cool stuff..
}
}
the reference is stored in closure for result function and obj will remain in memory while you have a reference to result somethere.
It hard to imagine object that is heavy itself, most realistic scenario - what you have some data inside it. In this case you can add a cleanup function to object which will cleans this data. Let say you have an gigant buffer (array of numbers for example) as a property of the object, and if you want to free memory - you can just clear this buffer still having object in memory as a couple dozens of bytes. And remember to put your functions to prototype to keep instances small.
Here is a link to some very detailed information on the JavaScript delete operator.
http://perfectionkills.com/understanding-delete/
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Use of 'prototype' vs. 'this' in Javascript?
I went to various websites but not able to understand the difference between the following ways of adding methods to custom objects:
Method 1:
function circle(radius){
this.radius = radius;
this.area = function(){ return 3.14*this.radius*this.radius;}
}
Method 2:
function circle(radius){
this.radius = radius;
}
circle.prototype.area = function(){ return 3.14*this.radius*this.radius; }
Are there any performance or design issues that one of the methods has and the other does not?
Here is one way to see the difference:
var circle1 = circle(1);
var circle2 = circle(1);
alert(circle1.area == circle2.area);
For Method1 you will see false while Method2 yields in true. That's because in the first case you assign a new closure function to each object created, two objects end up with different area functions even though both do the same thing. In the second case the objects share the same prototype object with its area method, that method is of course identical in both cases.
Usually Method2 is preferable for several reasons:
Object creation is faster because only custom properties need to be initialized.
You don't waste memory on instantiating multiple copies of the same thing.
You can easily find out which of the object properties have custom values by calling Object.hasOwnProperty.
There are some disadvantages as well to keep in mind.
You always spend time on setting up the prototype even if you never create any objects.
Property access is slightly slower because the JavaScript engine needs to check object properties first and then the properties of the prototype object (modern JavaScript engines optimize this pretty well however).
There is a common fall trap of putting objects or arrays on the prototype, these will be shared between all object instances.
Here is an example of the common mistake:
function NumberCollection()
{
}
NumberCollection.prototype = {
numbers: [],
sum: function()
{
var result = 0;
for (var i = 0; i < this.numbers.length; i++)
result += this.numbers[i];
return result;
}
}
var c1 = new NumberCollection();
c1.numbers.push(5);
alert(c1.sum()); // Shows 5
var c2 = new NumberCollection();
c2.numbers.push(6);
alert(c2.sum()); // Oops, shows 11 because c1.numbers and c2.numbers is the same
The correct approach here would be:
function NumberCollection()
{
this.numbers = [];
}
NumberCollection.prototype = {
numbers: null,
sum: function()
{
var result = 0;
for (var i = 0; i < this.numbers.length; i++)
result += this.numbers[i];
return result;
}
}
The first method (let's call it type 1) adds the area() function to the object itself. Every time you construct a circle object with new, its body will be copied (!) to the new instance.
The second method (type 2) adds the area() function to the object prototype (the prototype is "one level up" in the hierarchy). Every time you create a new instance of circle only the radius property will be copied.
Now when you call area() on an instance of the second object, JavaScript cannot find that function on the object itself. Now it "goes up" the prototype chain and uses the first function of that name it finds.
Now this has several implications:
New objects instances will be smaller (less physical code)
You can change the implementation of area for all existing objects of type 2 at once and while they live (by changing the prototype), you can't do that for type 1
You can override the functionality of area in a single instance of type 2 while keeping the "original implementation" of the function around