I recently started JavaScript and I am having trouble with the classless OOP style it uses. Here is an example of an object I am trying to use:
function block(id, text, distance) {
this.id = id;
this.text = text;
this.distance = distance;
this.getId = function () { return this.id };
this.getText = function () { return this.text };
this.getDistance = function () { return this.distance };
this.addDistance = function (Distance) { this.distance = this.distance + Distance };
}
However this doesn't seem to work. I then did some reading here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects, which seemed to suggest I remove the methods from my function and add them using the prototype object of my block:
block.prototype.getDistance = function () {
return this.distance;
};
block.prototype.addDistance = function (Distance) {
this.distance = this.distance + Distance;
};
But this still doesn't seem to work. For example if I am trying to loop through an array of blocks and add up the distance:
var distTot = 10;
for (var i = 1; i < blocks.length; i++) {
var set = setLarge[i];
distTot = distTot + blocks[i - 1].getDistance;
};
I end up with the following as the contents for the distTot variable: "10function () {\r\n return this.distance;\r\n }function () {\r\n return this.distance;\r\n }"
Could any one please explain to me what I am doing wrong? I have checked to see that they are being instantiated correctly and everything seems fine there. I am pretty sure it is just the methods that are not working correctly.
Thanks in advance!
When you call a function, you should add (), so try getDistance() instead of just getDistance
getDistance is a function so you should call it as a function here
distTot = distTot + blocks[i - 1].getDistance();
otherwise, as you've noticed, you obtain the string representation of the function itself
Related
I want the array to call one random variable from it but it calls every variable in it and I don't know why.
Code:
var atk1 = Billy.giveLife("self");
var atk2 = Billy.punch("self");
var attack = [atk1,atk2];
function test(){
var r = Math.round(Math.random()*(attack.length-1));
attack[r];
}
test();
On your first 2 lines you are immediately calling the functions. attack[r] does nothing, square braces are only for selecting an element from an array.
Here’s one solution to what you might be trying to do, using anonymous arrow functions to store your functions to be called later:
var atk1 = () => Billy.giveLife("self");
var atk2 = () => Billy.punch("self");
var attack = [atk1,atk2];
function test(){
var r = Math.round(Math.random()*(attack.length-1));
attack[r]();
}
test();
Okay, I think you are missing braces '()' so I did a little prototype for you, here it is:
http://jsfiddle.net/pvkovalev/e75nx3rn/
I modified your code a little bit to make more visual:
function printf(data) {
$('#out').html($('#out').html() + '<br/>' + data);
}
var atk1 = function() {
printf('atk1');
}
var atk2 = function() {
printf('atk2');
}
var atk3 = function() {
printf('atk3');
}
var atk4 = function() {
printf('atk4');
}
var atk5 = function() {
printf('atk5');
}
var attack = [atk1, atk2, atk3, atk4, atk5];
function test() {
var r = Math.round(Math.random() * (attack.length - 1));
attack[r]();
}
setInterval(function() {
test();
}, 1500)
I'm writing a counter to count an object, and it looks like this:
function myFunc(param) {
this.param = param;
param.foo = function() {
var object = window.JSON.parse(data);
for (i in object) {
counter++;
}
}
}
var foo = new myFunc('data.json');
var counter = 0;
document.write(counter); // displays 0
How can I achieve to get the counter value outside the function? I tried almost everything, from window to return to separate functions.
Any clue?
Update
I prefer a better design like this
function myFunc(param) {
this.param = param;
param.foo = function() {
var object = window.JSON.parse(data);
var counter = 0;
for (i in object) {
counter++;
}
return counter;
}
}
var foo = new myFunc('data.json');
document.write(counter); // displays undefined
Update 2
Sorry, thought it would be easier to have a sample code. But here's the real one: https://gist.github.com/BobWassermann/e709ec303477a015b609
I think you have a couple issues here.
First, you're setting your counter to 0 just before you write. It will always be 0 no matter what you do, even with hoisting.
Second, you never call the foo function, so your counter is never incremented.
Third, param.foo isn't public. I think you want it to be this.foo = function(){ ... }.
Here's a simplified version of the code you posted with my tweaks:
var counter = 0;
var foo;
function myFunc() {
this.foo = function() {
counter = 1000;
}
}
foo = new myFunc();
foo.foo();
document.write(counter);
JSFiddle: http://jsfiddle.net/dgrundel/2ojw2332/2/
Note that JSFiddle doesn't allow document.write, so replaced that part.
function myFunc(param) {
this.param = param;
this.foo = function () {
var object = window.JSON.parse(this.param),
counter = 0,
i;
for (i in object) {
counter++;
}
return counter;
};
}
var foo = new myFunc('{"a":99}');
out(foo.foo());
function out(s) {
document.getElementById('out').innerHTML = '<pre>' + s + '</pre>';
}
<div id="out"></div>
As #Nina Scholz pointed out earlier, I'm retrieving the data asynchron. Javascript started painting the dom before all the values where loaded.
This fixed my problem:
if (document.readyState) {
setTimeout(function() {
var objLen = Object.keys(obj).length;
console.log(objLen);
}, 100);
}
I'm waiting for the document to be ready, then add an additional timeout as buffer.
This is driving me crazy. I'm about to break down and cry.
Here's my code that is NOT working:
// parent class: Shirt
var Shirt = function() {
this.basePrice = 1;
}
Shirt.prototype.getPrice = function(){return this.basePrice};
Shirt.prototype.display = function(){
$('ul#products').append('<li>Product: $' + this.getPrice() + '.00</li>');
};
// subclass: ExpensiveShirt inherits from Shirt
var ExpensiveShirt = function() {
this.basePrice = 5;
};
ExpensiveShirt.prototype = Object.create(Shirt);
// make some objects and test them
var s = new Shirt();
s.display(); // this works
console.log(s.getPrice()); // this works
var e = new ExpensiveShirt();
e.display(); // this does not work!
console.log(e.getPrice()); // does not work
HERE IS THE JSFIDDLE
Now, if I add these lines, then it works:
ExpensiveShirt.prototype.getPrice = Shirt.prototype.getPrice;
ExpensiveShirt.prototype.display = Shirt.prototype.display;
But according to this I shouldn't have to: JavaScript inheritance with Object.create()?
And I really don't want to because that is bad programming. >:(
Object.create expects the prototype for the new object as its argument, not the constructor. Change your line to this, and it will work:
ExpensiveShirt.prototype = Object.create(Shirt.prototype);
As #Paulpro mentions, you need to use Object.create on Shirt.prototype and not Shirt for inheritance to work.
I usually use the following two functions to make my life easier when dealing with inheritance in JavaScript:
var Shirt = defclass({
constructor: function () {
this.basePrice = 1;
},
getPrice: function () {
return this.basePrice;
},
display: function () {
alert("Product: $" + this.getPrice() + ".00");
}
});
var ExpensiveShirt = extend(Shirt, {
constructor: function () {
this.basePrice = 5;
}
});
var s = new Shirt;
var e = new ExpensiveShirt;
s.display();
e.display();
console.log(s.getPrice());
console.log(e.getPrice());
<script>
function defclass(prototype) {
var constructor = prototype.constructor;
constructor.prototype = prototype;
return constructor;
}
function extend(constructor, properties) {
var prototype = Object.create(constructor.prototype);
for (var key in properties) prototype[key] = properties[key];
return defclass(prototype);
}
</script>
Hope that helps.
I'm writing a piece of code to easily save error logs in an object for debugging.
What I'm trying to achieve is to get the Object name from the function it was called from like so:
var MainObject = {
test : function() {
return MainObject.test.caller;
// When called from MainObject.testcaller,
// it should return MainObject.testcaller.
},
testcaller : function() {
return MainObject.test(); // Should return MainObject.testcaller, Returns own function code.
},
anothercaller : function() {
return MainObject.test(); // Should return MainObject.anothercaller, Returns own function code.
}
}
However when I run this code it returns the function code from MainObject.testcaller.
JSFiddle example
Is there any way this is possible?
Update
After looking at Rhumborl's answer, I discovered that assigning the value through another function would lead it to point back at the function name without the object itself.
Code:
(function (name, func) {
MainObject[name] = func;
})('invalid', function() {
return MainObject.test("blah");
});
// This now points at invalid() rather than MainObject.invalid()
Updated fiddle
There is a non–standard caller property of functions that returns the caller function, however that is a pointer to a function object and doesn't tell you the object it was called as a method of, or the object's name. You can get a reference to the function through arguments.callee.
There is also the obsolete arguments.caller, but don't use that. It also provides a reference to the calling function (where supported).
Once you have a reference to the calling function (if there is one), you then have the issue of resolving its name. Given that Functions are Objects, and objects can be referenced by multiple properties and variables, the concept of a function having a particular name is alluvial.
However, if you know that the function is a property of some object, you can iterate over the object's own enumerable properties to find out which one it is.
But that seems to be a rather odd thing to do. What are you actually trying to do? You may be trying to solve a problem that can be worked around in a much more robust and simpler way.
Edit
You can do what you want in a very limited way using the method described above for the case in the OP, however it is not robust or a general solution:
var mainObject = {
test : function() {
var obj = this;
var caller = arguments.callee.caller;
var global = (function(){return this}());
var fnName, objName;
for (var p in global) {
if (global[p] === obj) {
objName = p;
}
}
for (var f in obj) {
if (obj[f] === caller) {
fnName = f;
}
}
return objName + '.' + fnName;
},
testcaller : function() {
return mainObject.test();
},
anothercaller : function() {
return mainObject.test();
}
}
console.log(mainObject.testcaller()); // mainObject.testcaller
console.log(mainObject.anothercaller()); // mainObject.anothercaller
but it's brittle:
var a = mainObject.anothercaller;
console.log(a()); // mainObject.anothercaller
var b = {
foo : mainObject.anothercaller
}
console.log(b.foo()); // mainObject.anothercaller
Oops.
You can use this trick at http://www.eriwen.com/javascript/js-stack-trace/ which throws an error, then parses the stack trace.
I have updated it for the latest versions of Firefox, Chrome and IE. Unfortunately it doesn't work well on my IE9 (and I haven't tested it on Opera).
function getStackTrace() {
var callstack = [];
var isCallstackPopulated = false;
try {
i.dont.exist += 0; //doesn't exist- that's the point
} catch (e) {
if (e.stack) { //Firefox/Chrome/IE11
var lines = e.stack.split('\n');
for (var i = 0, len = lines.length; i < len; i++) {
var line = lines[i].trim();
if (line.match(/^at [A-Za-z0-9\.\-_\$]+\s*\(/)) {
// Chrome/IE: " at Object.MainObject.testcaller (url:line:char)"
var entry = line.substring(3, line.indexOf('(') - 1);
// Chrome appends "Object." to the front of the object functions, so strip it off
if (entry.indexOf("Object.") == 0) {
entry = entry.substr(7, entry.length);
}
callstack.push(entry);
} else if (line.match(/^[A-Za-z0-9\.\-_\$]+\s*#/)) {
// Firefox: "MainObject.testcaller#url:line:char"
callstack.push(line.substring(0, lines[i].indexOf('#')));
}
}
//Remove call to getStackTrace()
callstack.shift();
isCallstackPopulated = true;
} else if (window.opera && e.message) { //Opera
var lines = e.message.split('\n');
for (var i = 0, len = lines.length; i < len; i++) {
if (lines[i].match(/^\s*[A-Za-z0-9\-_\$]+\(/)) {
var entry = lines[i];
//Append next line also since it has the file info
if (lines[i + 1]) {
entry += lines[i + 1];
i++;
}
callstack.push(entry);
}
}
//Remove call to getStackTrace()
callstack.shift();
isCallstackPopulated = true;
}
}
if (!isCallstackPopulated) { //IE9 and Safari
var currentFunction = arguments.callee.caller;
while (currentFunction) {
var fn = currentFunction.toString();
var fname = fn.substring(fn.indexOf("function") + 8, fn.indexOf('')) || 'anonymous';
callstack.push(fname);
currentFunction = currentFunction.caller;
}
}
return callstack;
}
var MainObject = {
test: function (x) {
// first entry is the current function (test), second entry is the caller
var stackTrace = getStackTrace();
var caller = stackTrace[1];
return caller + "()";
},
testcaller: function () {
return MainObject.test(1, null);
}
}
function SomeFunction() {
return MainObject.test("blah");
}
document.body.innerHTML += '<b style="color: red">' + MainObject.testcaller() + '</b>';
document.body.innerHTML += '<div>Calling SomeFunction() returns: <b style="color: red">' + SomeFunction() + '</b></div>';
MainObject.test() should return: <b style="color: blue">MainObject.testcaller()</b>
<hr />
MainObject.test() returns:
Updated fiddle here
I'm trying to use OOP in Javascript with inheritance and prototyping. Would you please have a look at my JSfiddel http://jsfiddle.net/Charissima/daaUK/. The last value is the problem, thank you.
I cannot understand why the function drive with raceCar doesn't get the totalDistance, which a set per putTotalDistance.
function Car () {
var that = this;
this.totalDistance = 0;
this.putTotalDistance = function(distance) {
that.totalDistance = distance;
};
this.getTotalDistance = function() {
return this.totalDistance;
};
this.drive = function(distance) {
that.totalDistance += distance;
return that.totalDistance;
};
this.privateFunc = function() {
return 'car ' + this.totalDistance;
};
};
function RaceCar (initialDistance) {
var that = this;
this.prototype = new Car();
this.drive = function(distance) {
return that.prototype.drive(2*distance);
};
this.privateFunc = function() {
return 'raceCar ' + that.getTotalDistance();
};
};
RaceCar.prototype = new Car();
car = new Car;
raceCar = new RaceCar;
car.putTotalDistance(200);
alert('car totalDistance = ' + car.drive(10) + ' - ok');
raceCar.putTotalDistance(200);
alert('raceCar totalDistance before drive = ' + raceCar.getTotalDistance() + ' - ok');
alert('raceCar totalDistance after drive = ' + raceCar.drive(10) + ' Why not 220?');
Try this:
function Car () {
this.totalDistance = 0;
};
Car.prototype.putTotalDistance = function(distance) {
this.totalDistance = distance;
};
Car.prototype.getTotalDistance = function() {
return this.totalDistance;
};
Car.prototype.drive = function(distance) {
this.totalDistance += distance;
return this.totalDistance;
};
function RaceCar () {};
RaceCar.prototype = new Car();
RaceCar.prototype.parent = Car.prototype;
RaceCar.prototype.drive = function(distance) {
return this.parent.drive.call(this, (distance * 2));
};
raceCar = new RaceCar();
raceCar.putTotalDistance(200);
document.body.innerHTML = 'raceCar totalDistance after drive = ' + raceCar.drive(10);
EDIT:
As pointed out in one of the other answers, the main problem is setting the prototype inside the constructor. Instead, set it separately. In the code above, I linked the car prototype to a racecar prototype parent property and then fire the parent's drive function using call so that the context of the function is set to the racecar (via this) and then passing the argument along.
Thank you, this works fine, but unfortunately another function I need is broken now. I created a new JSFiddle: http://jsfiddle.net/Charissima/5g6GV/
car.putTotalDistance(0);
raceCar.putTotalDistance(100);
var drivingFunctions = [car.drive, raceCar.drive];
myText += drivingFunctions[0](10) + '<br>';
try {
myText += drivingFunctions[1](100) + '<br>';
}
catch(err) {
myText += err + '<br>'
}
Firstly var that = this; is unnecessary. In a object context this will always refer to the instance.
You also don't want to set the objects prototype inside it's own constructor.
If you want to access the prototype of a class don't try to access it through the instance.
The update fiddle
function RaceCar (initialDistance) {
//var that = this;
//this.prototype = new Car();
this.drive = function(distance) {
return RaceCar.prototype.drive(2*distance);
};
};
// This correctly sets the prototype
RaceCar.prototype = new Car();