Two instances contain same values - javascript

I'm running into a bizarre bug while trying to create a Dictionary object. Pretty basic stuff. However when I create 2 instances of the object, and then set some values on one, they appear on both. What am I doing wrong here?
function Dict() { }
Dict.prototype = {
items: { },
prop: function(key) {
return ':' + key;
},
get: function(key, def) {
var p = this.prop(key),
k = this.items;
return k.hasOwnProperty(p) ? k[p] : def;
},
set: function(key, value) {
var p = this.prop(key);
this.items[p] = value;
return value;
},
count: function() {
return Object.keys(this.items).length;
},
has: function(key) {
var p = this.prop(key);
return this.items.hasOwnProperty(p);
},
del: function(key) {
var p = this.prop(key),
k = this.items;
if(k.hasOwnProperty(p))
delete k[p];
},
keys: function() {
return Object.keys(this.items).map(function(key) {
return key.substring(1);
});
}
};
var a = new Dict();
var b = new Dict();
a.set('foo', 'bar');
console.log(a.keys());
console.log(b.keys());

You're defining items inside your prototype which means it will be shared by all instances. You need to set it inside the "constructor" function and remove it from the prototype.
function Dict() { this.items = []; }
I've created a JS Fiddle for you with the full source code at http://jsfiddle.net/brunomsilva/zaSY2/.

The items property is set on the prototype. The prototype is not cloned when creating an object, so items is the same on the two Dicts. Set items in the constructor so each object has its own:
function Dict() {
this.items = {};
}
Prototypes work because when you try to access an object's property, it first checks the object's own properties to see if it contains it. If so, that's the value. If it's not found there, it checks the prototype. If it's not there, it continues traversing the chain of prototypes until it finds the property. If it's still not found, it results in undefined. (for more detail, see the specification)

to define a class to use, try moving the function definitions to the prototype without replacing the prototype object, like so:
function Dict() {
this.items = {};
}
Dict.prototype.prop = function (key) {
return ':' + key;
};
Dict.prototype.get = function (key, def) {
var p = this.prop(key),
k = this.items;
return k.hasOwnProperty(p) ? k[p] : def;
};
Dict.prototype.set = function (key, value) {
var p = this.prop(key);
this.items[p] = value;
return value;
};
Dict.prototype.count = function () {
return Object.keys(this.items).length;
};
Dict.prototype.has =function (key) {
var p = this.prop(key);
return this.items.hasOwnProperty(p);
};
Dict.prototype.del =function (key) {
var p = this.prop(key),
k = this.items;
if (k.hasOwnProperty(p))
delete k[p];
};
Dict.prototype.keys = function () {
return Object.keys(this.items).map(function (key) {
return key.substring(1);
});
};

Related

Is there any defined HashTable class in TypeScript like C#

I am developing web project using TypeScript. Here i need HashTable functionality in typescript like C# HashTable. But i have already developed that in JavaScript.
this.length = 0;
this.items = [];
this.add = function (key, value) {
this.previous = undefined;
if (this.containsKey(key)) {
this.previous = this.items[key];
} else {
this.length++;
}
this.items[key] = value;
return this.previous;
};
this.clear = function () {
this.items = {};
this.length = 0;
};
this.contains = function (key) {
return this.items.hasOwnProperty(key);
};
this.containsKey = function (key) {
return this.items.hasOwnProperty(key);
};
this.containsValue = function (key) {
return (this.items.hasOwnProperty(key) && this.items[key] != undefined) ? true : false;
};
this.getItem = function (key) {
if (this.containsKey(key))
{
return this.items[key]
}
else
{
return undefined;
}
};
this.keys = function () {
var keys = [];
for (var k in this.items) {
if (this.containsKey(k)) {
keys.push(k);
}
}
return keys;
};
this.remove = function (key) {
if (this.containsKey(key)) {
this.previous = this.items[key];
this.length--;
delete this.items[key];
return this.previous;
} else {
return undefined;
}
};
this.values = function () {
var values = [];
for (var k in this.items) {
if (this.containsKey(k)) {
values.push(this.items[k]);
}
}
return values;
};
this.each = function (fn) {
for (var k in this.items) {
if (this.containsKey(k)) {
fn(k, this.items[k]);
}
}
};
var previous = undefined;
}
return HashTable;
Like this, Typescript having predefined code? or i need to rewrite these codes from JS to TS? is there any simple property or class for this HashTable in typescript?
Or any other properties in TS to do the same HashTable functionality?
Modern JavaScript has three options:
Map, is closest to HashTable to my knowlage. It main advantage is that it’s keys may be of type Object.
Set, it is basically an unique array.
Object also known an {}. Key value store.
I would suggest to use object, but if your keys need to be object, use the Map.
JavaScript Object, or {}, is about 20x faster than Map. So use Map only if you need to use objects as keys.
Map is probably the right answer as suggested above, but maybe a hashmap with types looks something like this would work:
{ [key: string]: Type; }
or
{ [key: number]: Type; }

data structure association list - how to create head key value pairs?

I have a question about a data structure association list / a singly-linked list which only adds to the head.
The set function is suppose to set (multiple) key-value pairs and the get function should get those pairs- I dont understand how to make the head (which is suppose to be null at first)
to be an object and since the newly create node becomes the 'new' head - I dont understand how I can 'move' the 'old' head with its key value pairs..
Happy about any help! Thank you!
This is my code(not much but don't know how to go from here at all)
function List () {
this.head=null;
}
function ListN (key, value, next) {
this.key = key;
this.value = value;
this.next = next;
}
Alist.prototype.set = function (key, value) {
// this.key=value;
var newNode=new ListN(key, value);
this.head=newNode;
};
Alist.prototype.get = function (key) {
return this.key;
};
smallList = new List();
You were almost there. You missed a previous node in the call of new ListN.
var newNode = new ListN(key, value, this.head);
// ^^^^^^^^^
function List() {
this.head = null;
}
List.prototype.set = function (key, value) {
function ListN(key, value, next) {
this.key = key;
this.value = value;
this.next = next;
}
var node = this.head;
while (node) {
if (node.key === key) {
node.value = value;
return;
}
node = node.next;
}
this.head = new ListN(key, value, this.head);
};
List.prototype.get = function (key) {
var node = this.head;
while (node) {
if (node.key === key) {
return node.value;
}
node = node.next;
}
};
var smallList = new List();
smallList.set('one', 'abc');
console.log(smallList);
smallList.set('two', 'def');
console.log(smallList);
console.log(smallList.get('one'));
console.log(smallList.get('two'));
console.log(smallList.get('three'));
smallList.set('two', 'xyz');
console.log(smallList);
in a key value object you should always have one key so use KISS principle:
var object = {};
object['aKey'] = 'some value';
object['otherKey] = 'other value';
If what you want is to store objects, use an array:
var myArray = [];
myArrray.push({'key': 'value'});
myArrray.push({'key': 'value'});
myArrray.push({'key1': 'value1'});
if you want a lot of values for one key:
var object = {};
if(!object.hasOwnProperty('aKey')){
object['aKey'] = [];
}
object['aKey'].push('value');
Javascript is simple, so keep it simple :)

JavaScript: Prevent Array.push()

I have a sealed object with an array member on which I want to prevent direct pushes.
var myModule = (function () {
"use strict";
var a = (function () {
var _b = {},
_c = _c = "",
_d = [];
Object.defineProperty(_b, "c", {
get: function () { return _c; }
});
Object.defineProperty(_b, "d", {
get { return _d; }
});
_b.addD = function (newD) {
_d.push(newD);
};
Object.seal(_b);
return _b;
}());
var _something = { B: _b };
return {
Something: _something,
AddD: _b.addD
};
}());
myModule.Something.c = "blah"; // doesn't update = WIN!!
myModule.AddD({}); // pushed = WIN!
myModule.Something.d.push({}); // pushed = sadness
How can I prevent the push?
UPDATE:
Thanks for all the thoughts. I eventually need the JSON to send to the server. It looks like I might need to use an object for the array then figure out a way to generate and return the JSON needed, or change _something to use .slice(). Will play and report.
you could override the push method:
var _d = [];
_d.__proto__.push = function() { return this.length; }
and when you need to use it in your module, call Array.prototype.push:
_b.addD = function (newD) {
Array.prototype.push.call(_d, newD);
};
I haven't done any performance tests on this, but this certainly helps to protect your array.
(function(undefined) {
var protectedArrays = [];
protectArray = function protectArray(arr) {
protectedArrays.push(arr);
return getPrivateUpdater(arr);
}
var isProtected = function(arr) {
return protectedArrays.indexOf(arr)>-1;
}
var getPrivateUpdater = function(arr) {
var ret = {};
Object.keys(funcBackups).forEach(function(funcName) {
ret[funcName] = funcBackups[funcName].bind(arr);
});
return ret;
}
var returnsNewArray = ['Array.prototype.splice'];
var returnsOriginalArray = ['Array.prototype.fill','Array.prototype.reverse','Array.prototype.copyWithin','Array.prototype.sort'];
var returnsLength = ['Array.prototype.push','Array.prototype.unshift'];
var returnsValue = ['Array.prototype.shift','Array.prototype.pop'];
var funcBackups = {};
overwriteFuncs(returnsNewArray, function() { return []; });
overwriteFuncs(returnsOriginalArray, function() { return this; });
overwriteFuncs(returnsLength, function() { return this.length; });
overwriteFuncs(returnsValue, function() { return undefined; });
function overwriteFuncs(funcs, ret) {
for(var i=0,c=funcs.length;i<c;i++)
{
var func = funcs[i];
var funcParts = func.split('.');
var obj = window;
for(var j=0,l=funcParts.length;j<l;j++)
{
(function() {
var part = funcParts[j];
if(j!=l-1) obj = obj[part];
else if(typeof obj[part] === "function")
{
var funcBk = obj[part];
funcBackups[funcBk.name] = funcBk;
obj[part] = renameFunction(funcBk.name, function() {
if(isProtected(this)) return ret.apply(this, arguments);
else return funcBk.apply(this,arguments);
});
}
})();
}
}
}
function renameFunction(name, fn) {
return (new Function("return function (call) { return function " + name +
" () { return call(this, arguments) }; };")())(Function.apply.bind(fn));
};
})();
You would use it like so:
var myArr = [];
var myArrInterface = protectArray(myArr);
myArr.push(5); //Doesn't work, but returns length as expected
myArrInterface.push(5); //Works as normal
This way, you can internally keep a copy of the interface that isn't made global to allow your helper funcs to modify the array as normal, but any attempt to use .push .splice etc will fail, either directly, or using the .bind(myArr,arg) method.
It's still not completely watertight, but a pretty good protector. You could potentially use the Object.defineProperty method to generate protected properties for the first 900 indexes, but I'm not sure of the implications of this. There is also the method Object.preventExtensions() but I'm unaware of a way to undo this effect when you need to change it yourself
Thank you, dandavis!
I used the slice method:
var myModule = (function () {
"use strict";
var a = (function () {
var _b = {},
_c = _c = "",
_d = [];
Object.defineProperty(_b, "c", {
get: function () { return _c; }
});
Object.defineProperty(_b, "d", {
get { return _d.slice(); } // UPDATED
});
_b.updateC = function (newValue) {
_c = newValue;
};
_b.addD = function (newD) {
_d.push(newD);
};
Object.seal(_b);
return _b;
}());
var _something = { B: _b };
return {
Something: _something,
AddD: _b.addD
};
}());
myModule.Something.c = "blah"; // doesn't update = WIN!!
myModule.AddD({}); // pushed = WIN!
myModule.Something.d.push({}); // no more update = happiness
This allows me to protect from direct push calls enforcing some logic.

Copy of a closure instead of a reference

I'm currently writting a javascript script.
employe.name = Remi
employe2 = Object.create(Employe);
employe2.name = Vautrin
console.log(employe.name);//Vautrin instead of Remi
I was just wondering how to copy a full object. I've already tried :
//StackOverFlow
function clone(obj) {
if (obj == null || typeof (obj) != 'object')
return obj;
var temp = obj.constructor(); // changed
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
temp[key] = clone(obj[key]);
}
}
return temp;
}
This is the closure code :
var Employe = (function(){
return {
name = "Hello";
};
})();
But whenever I call a method, I get an error of non defined function.
Could you help me please ? :D
Second attempt
var EdT = (function() {
var _nbJoursTravaille = 0;
var _semaine ;
var _proprietaire;
return {
constructor: function(proprietaire) {
_proprietaire = proprietaire;
return this;
},
};
});
var Employe = (function() {
var _id;
var _nom;
var _prenom;
var _metier;
var _tel;
var _edT ;
return {
constructor: function(id, nom, prenom, metier, tel) {
_id = id;
_nom = nom;
_prenom = prenom;
_metier = metier;
_tel = tel;
_edT= Object.create(EdT).constructor(nom + " " + prenom);
return this;
},
//.... Some code
};
});
var employe = Object.create(Employe).constructor("id", "nom", "Rémi", "AlmostJsDev", "+33");
var employe2 =Object.create(Employe).constructor("id", "nom", "Rémi1234", "AlmostJsDev", "+33");
console.log(employe.getEdT().getProprietaire()); //Remi1234
Third Attempt
var EDT = (function(){
this.proprietaire;
return {
constructor : function(proprietaire){
this.proprietaire = proprietaire;
}
};
})();
console.log(employe.getEdT()._proprietaire);
It should be private ; instead it's public (seems legit) ... How to fix that ?
When you do
employe2.name = Vautrin
it will see if employe2 has a "name" property on itself. Since it could not find one, it creates a "name" property on the employe2 object, and hence the output of your code is "Remi" only.
The way Object.create(a,b) works is create a empty function, set it's prototype value to a, then create a new object using this function. Add the properties mentioned in b to the newly created object.
So when you wrote Object.create(employe);
It created a new object and set it's prototype to employe.
Read about how property lookups are handled for prototypes here.

Super in Backbone

When I override the clone() method of a Backbone.Model, is there a way to call this overriden method from my implantation? Something like this:
var MyModel = Backbone.Model.extend({
clone: function(){
super.clone();//calling the original clone method
}
})
You'll want to use:
Backbone.Model.prototype.clone.call(this);
This will call the original clone() method from Backbone.Model with the context of this(The current model).
From Backbone docs:
Brief aside on super: JavaScript does not provide a simple way to call
super — the function of the same name defined higher on the prototype
chain. If you override a core function like set, or save, and you want
to invoke the parent object's implementation, you'll have to
explicitly call it.
var Note = Backbone.Model.extend({
set: function(attributes, options) {
Backbone.Model.prototype.set.apply(this, arguments);
...
}
});
You can also use the __super__ property which is a reference to the parent class prototype:
var MyModel = Backbone.Model.extend({
clone: function(){
MyModel.__super__.clone.call(this);
}
});
Josh Nielsen found an elegant solution for this, which hides a lot of the ugliness.
Just add this snippet to your app to extend Backbone's model:
Backbone.Model.prototype._super = function(funcName){
return this.constructor.prototype[funcName].apply(this, _.rest(arguments));
}
Then use it like this:
Model = Backbone.model.extend({
set: function(arg){
// your code here
// call the super class function
this._super('set', arg);
}
});
Working from the answers given by geek_dave and charlysisto, I wrote this to add this._super(funcName, ...) support in classes that have multiple levels of inheritance. It's worked well in my code.
Backbone.View.prototype._super = Backbone.Model.prototype._super = function(funcName) {
// Find the scope of the caller.
var scope = null;
var scan = this.__proto__;
search: while (scope == null && scan != null) {
var names = Object.getOwnPropertyNames(scan);
for (var i = 0; i < names.length; i++) {
if (scan[names[i]] === arguments.callee.caller) {
scope = scan;
break search;
}
}
scan = scan.constructor.__super__;
}
return scan.constructor.__super__[funcName].apply(this, _.rest(arguments));
};
A year later I've fixed some bugs and made things faster. Below is the code that I use now.
var superCache = {};
// Hack "super" functionality into backbone.
Backbone.View.prototype._superFn = Backbone.Model.prototype._superFn = function(funcName, _caller) {
var caller = _caller == null ? arguments.callee.caller : _caller;
// Find the scope of the caller.
var scope = null;
var scan = this.__proto__;
var className = scan.constructor.className;
if (className != null) {
var result = superCache[className + ":" + funcName];
if (result != null) {
for (var i = 0; i < result.length; i++) {
if (result[i].caller === caller) {
return result[i].fn;
}
}
}
}
search: while (scope == null && scan != null) {
var names = Object.getOwnPropertyNames(scan);
for (var i = 0; i < names.length; i++) {
if (scan[names[i]] === caller) {
scope = scan;
break search;
}
}
scan = scan.constructor.__super__;
}
var result = scan.constructor.__super__[funcName];
if (className != null) {
var entry = superCache[className + ":" + funcName];
if (entry == null) {
entry = [];
superCache[className + ":" + funcName] = entry;
}
entry.push({
caller: caller,
fn: result
});
}
return result;
};
Backbone.View.prototype._super = Backbone.Model.prototype._super = function(funcName) {
var args = new Array(arguments.length - 1);
for (var i = 0; i < args.length; i++) {
args[i] = arguments[i + 1];
}
return this._superFn(funcName, arguments.callee.caller).apply(this, args);
};
Then given this code:
var A = Backbone.Model.extend({
// className: "A",
go1: function() { console.log("A1"); },
go2: function() { console.log("A2"); },
});
var B = A.extend({
// className: "B",
go2: function() { this._super("go2"); console.log("B2"); },
});
var C = B.extend({
// className: "C",
go1: function() { this._super("go1"); console.log("C1"); },
go2: function() { this._super("go2"); console.log("C2"); }
});
var c = new C();
c.go1();
c.go2();
The output in the console is this:
A1
C1
A2
B2
C2
What's interesting is that class C's call to this._super("go1") scans the class hierarchy until it gets a hit in class A. Other solutions do not do this.
P.S. Uncomment the className entries of the class definitions to enable caching of the _super lookup. (The assumption is that these class names will be unique in the application.)
If you want just to call this._super(); without passing the function name as an argument
Backbone.Controller.prototype._super = function(){
var fn = Backbone.Controller.prototype._super.caller, funcName;
$.each(this, function (propName, prop) {
if (prop == fn) {
funcName = propName;
}
});
return this.constructor.__super__[funcName].apply(this, _.rest(arguments));
}
Better use this plugin:
https://github.com/lukasolson/Backbone-Super
I believe you can cache the original method (although not tested):
var MyModel = Backbone.Model.extend({
origclone: Backbone.Model.clone,
clone: function(){
origclone();//calling the original clone method
}
});
backbone._super.js, from my gists: https://gist.github.com/sarink/a3cf3f08c17691395edf
// Forked/modified from: https://gist.github.com/maxbrunsfeld/1542120
// This method gives you an easier way of calling super when you're using Backbone in plain javascript.
// It lets you avoid writing the constructor's name multiple times.
// You still have to specify the name of the method.
//
// So, instead of having to write:
//
// var Animal = Backbone.Model.extend({
// word: "",
// say: function() {
// return "I say " + this.word;
// }
// });
// var Cow = Animal.extend({
// word: "moo",
// say: function() {
// return Animal.prototype.say.apply(this, arguments) + "!!!"
// }
// });
//
//
// You get to write:
//
// var Animal = Backbone.Model.extend({
// word: "",
// say: function() {
// return "I say " + this.word;
// }
// });
// var Cow = Animal.extend({
// word: "moo",
// say: function() {
// return this._super("say", arguments) + "!!!"
// }
// });
(function(root, factory) {
if (typeof define === "function" && define.amd) {
define(["underscore", "backbone"], function(_, Backbone) {
return factory(_, Backbone);
});
}
else if (typeof exports !== "undefined") {
var _ = require("underscore");
var Backbone = require("backbone");
module.exports = factory(_, Backbone);
}
else {
factory(root._, root.Backbone);
}
}(this, function(_, Backbone) {
"use strict";
// Finds the next object up the prototype chain that has a different implementation of the method.
var findSuper = function(methodName, childObject) {
var object = childObject;
while (object[methodName] === childObject[methodName]) {
object = object.constructor.__super__;
}
return object;
};
var _super = function(methodName) {
// Keep track of how far up the prototype chain we have traversed, in order to handle nested calls to `_super`.
this.__superCallObjects__ || (this.__superCallObjects__ = {});
var currentObject = this.__superCallObjects__[methodName] || this;
var parentObject = findSuper(methodName, currentObject);
this.__superCallObjects__[methodName] = parentObject;
// If `methodName` is a function, call it with `this` as the context and `args` as the arguments, if it's an object, simply return it.
var args = _.tail(arguments);
var result = (_.isFunction(parentObject[methodName])) ? parentObject[methodName].apply(this, args) : parentObject[methodName];
delete this.__superCallObjects__[methodName];
return result;
};
// Mix in to Backbone classes
_.each(["Model", "Collection", "View", "Router"], function(klass) {
Backbone[klass].prototype._super = _super;
});
return Backbone;
}));
In the case that you don't know what the parent class is exactly (multiple inheritance or you want a helper function) then you can use the following:
var ChildModel = ParentModel.extend({
initialize: function() {
this.__proto__.constructor.__super__.initialize.apply(this, arguments);
// Do child model initialization.
}
});
With helper function:
function parent(instance) {
return instance.__proto__.constructor.__super__;
};
var ChildModel = ParentModel.extend({
initialize: function() {
parent(this).initialize.apply(this, arguments);
// Do child model initialization.
}
});
Pass the parent class as an option during instantiation:
BaseModel = Backbone.Model.extend({
initialize: function(attributes, options) {
var self = this;
this.myModel = new MyModel({parent: self});
}
});
Then in your MyModel you can call parent methods like this
this.options.parent.method();
Keep in mind this creates a retain cycle on the two objects. So to let the garbage collector do it's job you would need to manually destroy the retain on one of the objects when finished with it. If you're application is pretty large. I would encourage you to look more into hierarchal setups so events can travel up to the correct object.
2 functions below, one requires you pass in the function name, the other can "discover" which function we want the super version of
Discover.Model = Backbone.Model.extend({
_super:function(func) {
var proto = this.constructor.__super__;
if (_.isUndefined(proto[func])) {
throw "Invalid super method: " + func + " does not exist in prototype chain.";
}
return proto[func].apply(this, _.rest(arguments));
},
_superElegant:function() {
t = arguments;
var proto = this.constructor.__super__;
var name;
for (name in this) {
if (this[name] === arguments.callee.caller) {
console.log("FOUND IT " + name);
break;
} else {
console.log("NOT IT " + name);
}
}
if (_.isUndefined(proto[name])) {
throw "Super method for: " + name + " does not exist.";
} else {
console.log("Super method for: " + name + " does exist!");
}
return proto[name].apply(this, arguments);
},
});
Here is how I would do this:
ParentClassName.prototype.MethodToInvokeName.apply(this);
so for your example this is:
Model.prototype.clone.apply(this)

Categories