In this code, I create an array of objects and attempt to loop through them calling a method on each one. The method is part of the objects' prototype.
Here's the setup:
function TestObj(name) {
this.name = name;
}
TestObj.prototype.speak = function() {
console.log(this.name);
};
var myArray = [
new TestObj('first'),
new TestObj('second')
];
I know I can access the method correctly because this gives the proper output:
myArray[0].speak(); // displays "first"
However, both of the loops I tried won't output anything:
for (var i = 0; i < myArray.length; i++) {
myArray[i].speak();
}
for (var key in myArray) {
key.speak();
}
I your second loop key.speak(); to myArray[key].speak();
for (var key in myArray) {
myArray[key].speak();
}
function TestObj(name) {
this.name = name;
}
TestObj.prototype.speak = function() {
console.log(this.name);
};
var myArray = [
new TestObj('first'),
new TestObj('second')
];
for (var i = 0; i < myArray.length; i++) {
myArray[i].speak();
}
for (var key in myArray) {
myArray[key].speak(); /*change here in your code*/
}
Related
I'm trying to run a check against two arrays (one has 4 objects, one just have a few strings) with for loops and if statement for a problem set.
The idea is to use for loop to iterate over every element in the object array and the string array, then use if statement to figure out matches and shove the matching string into a new array. Once all the elements are iterated, it returns the string if there is a matching one.
The problem is the function calls it a day once a single match in the object array is found and returns that only that instead of iterating over the rest of the elements in the object array.
var passengers = [
{ name: ["Michael Jackson"], paid: true },
{ name: ["Osama"], paid: false },
{ name: ["Harambe"], paid: true },
{ name: ["Pepe"], paid: true },
];
var noFlyList = ["Jimmy", "John", "Pepe", "Osama"];
function checkNoFly(passengers, noFlyList) {
for (var i = 0; i < passengers.length; i++) {
for (var j = 0; j < noFlyList.length; j++) {
if (passengers[i].name[0] == noFlyList[j]) {
var passengerList = [];
passengerList.push(passengers[i].name[0]);
return passengerList;
}
}
}
return true;
}
function checkNotPaid(passengers) {
return (!passengers.paid);
}
function processPassenger(passengers, testFunction) {
for (var i = 0; i < passengers.length; i++) {
if (testFunction(passengers[i])) {
return false;
}
}
return true;
}
var allCanFly = processPassenger(passengers, checkNoFly);
if (!allCanFly) {
console.log("We cannot fly because " + checkNoFly(passengers, noFlyList) + " is on the no-fly list");
}
var allPaid = processPassenger(passengers, checkNotPaid);
if (!allPaid) {
console.log("we cannot fly because not all passengers have paid");
}
use this: having passengerList in the loop make its reinitialized to empty array on each loop, and returning passengerList in the loop makes the loop break once it finishes the first loop
function checkNoFly(passengers, noFlyList) {
var passengerList = [];
for (var i = 0; i < passengers.length; i++) {
for (var j = 0; j < noFlyList.length; j++) {
if (passengers[i].name[0] == noFlyList[j]) {
passengerList.push(passengers[i].name[0]);
}
}
}
return passengerList;
}
EDIT:
change your original processPassenger function to the one below, originally you have only 1 argument passed to your checkNoFly function, where you'd defined it to take 2 arguments, so the false is returned for wrong number of argument, which stop you from getting it the way you want.
function processPassenger(passengers, testFunction) {
if (testFunction(passengers, noFlyList).length !=0) {
return false;
}
return true;
}
EDIT 2: for your updated question, since for the first check we are returning an array for the single function processPassenger() for validation, we can take similar approach for the checkNotPaid function to return an array for those who have not paid.
function checkNotPaid(passengers) {
var passengerNotPaid = [];
for (var i = 0; i < passengers.length; i++) {
if (!passengers[i].paid) {
passengerNotPaid.push(passengers[i].name[0]);
}
}
return passengerNotPaid;
}
unless you'd want to refactor everything, i think this would be ok.
You're telling it to do so: return passengerList; in your inner loop. Also, you keep re-declaring the variable var passengerList = []; inside your inner for-loop, emptying it every time.
var passengers = [
{ name: ["Michael Jackson"], paid: true },
{ name: ["Osama"], paid: false },
{ name: ["Harambe"], paid: true },
{ name: ["Pepe"], paid: true },
];
var noFlyList = ["Jimmy", "John", "Pepe", "Osama"];
function checkNoFly(passengers, noFlyList) {
var passengerList = [];
for (var i = 0; i < passengers.length; i++) {
for (var j = 0; j < noFlyList.length; j++) {
if (passengers[i].name[0] == noFlyList[j]) {
passengerList.push(passengers[i].name[0]);
}
}
}
return passengerList;
}
function checkNoPay(passengers) {
var nonPayers = [];
for (var i = 0; i < passengers.length; i++) {
if (!passengers[i].paid) { nonPayers.push(passengers[i].name); }
}
return nonPayers;
}
var banList = checkNoFly(passengers, noFlyList);
if (banList.length) {
console.log("We cannot fly because " + banList + " is/are on the no-fly list");
}
var unpaidList = checkNoPay(passengers);
if (unpaidList.length) {
console.log("We cannot fly because " + unpaidList + " has/have not payed the flight");
}
var canWeFly = !(banList.length || unpaidList.length);
console.log(canWeFly ? "We can fly" : "We cannot fly");
I'm creating an object literal and I want to use the reserved word "this". The problem I'm having is that the "this" points to the window object in an object literal. I know the this points to the current object when used in a constructor function. Is there a way to override it so that "this" points to my object literal?
main = {
run: function()
{
var elements = [];
var allElements = document.querySelectorAll("*");
for(var i = 0; i < allElements.length; i++)
{
if(allElements[i].nodeType != 3)
{
elements.push(allElements[i]);
}
}
for(var i = 0; i < elements.length; i++)
{
// Doesn't work
// this.parseElement(elements[i]);
// Works
main.parseElement(elements[i]);
}
},
parseElement: function(e)
{
// Unimportant code
}
}
(function()
{
main.run();
})();
The thing you claim works in your question doesn't work:
var main = {
run: (function()
{
var elements = [];
var allElements = document.querySelectorAll("*");
for(var i = 0; i < allElements.length; i++)
{
if(allElements[i].nodeType != 3)
{
elements.push(allElements[i]);
}
}
for(var i = 0; i < elements.length; i++)
{
// Doesn't work
// this.parseElement(elements[i]);
// Works
main.parseElement(elements[i]);
}
})(),
parseElement: function(e)
{
// Unimportant code
}
};
<div></div>
Fundamentally, you cannot refer to the object being constructed from within the object initializer. You have to create the object first, because during the processing of the initializer, while the object does exist no reference to it is available to your code yet.
From the name run, it seems like you want run to be a method, which it isn't in your code (you've edited the question now to make it one). Just remove the ()() around the function:
var main = {
run: function() {
var elements = [];
var allElements = document.querySelectorAll("*");
for (var i = 0; i < allElements.length; i++) {
if (allElements[i].nodeType != 3) {
elements.push(allElements[i]);
}
}
for (var i = 0; i < elements.length; i++) {
this.parseElement(elements[i]);
}
},
parseElement: function(e) {
console.log("Parsing " + e.tagName);
}
};
main.run();
<div></div>
Since this is set by how the function is called for normal functions, if you want run to be bound to main so that it doesn't matter how it's called, using main instead of this is the simplest way to do that in that code.
But if you don't want to use main, you could create a bound function:
var main = {
run: function() {
var elements = [];
var allElements = document.querySelectorAll("*");
for (var i = 0; i < allElements.length; i++) {
if (allElements[i].nodeType != 3) {
elements.push(allElements[i]);
}
}
for (var i = 0; i < elements.length; i++) {
this.parseElement(elements[i]);
}
},
parseElement: function(e) {
console.log("Parsing " + e.tagName);
}
};
// Bind run
main.run = main.run.bind(main);
// Use it such that `this` would have been wrong
// if we hadn't bound it:
var f = main.run;
f();
<div></div>
Just as a side note, we can use Array.prototype.filter and Array.prototype.forEach to make that code a bit more concise:
var main = {
run: function() {
var allElements = document.querySelectorAll("*");
var elements = Array.prototype.filter.call(allElements, function(e) {
return e.nodeType != 3;
});
elements.forEach(this.parseElement, this);
},
parseElement: function(e) {
console.log("Parsing " + e.tagName);
}
};
// Use it
main.run();
<div></div>
That assumes that parseElement only ever looks at the first argument it's given (since forEach will call it with three: the entry we're visiting, its index, and the object we're looping through).
I have following issue.
I have array of objects, and when I want to get one of the items and update data, it updates last data.
for example:
var arr = [];
for (var i = 0; i < 8; i++){
var c = new MyClass1(i);
arr.push (c)
}
and the MyClass1
(function () {
var score = 0;
function MyClass1(id){
this.id = id;
this.x = 100;
//some code. not important
}
var p = MyClass1.prototype;
p.updateScore = function (s){
score = s;
}
window.MyClass1 = MyClass1;
}());
and function which returns one of these classes
var getMyClassesById = function(/* int */ id){
var size = arr.length;
for (var i = 0; i<size; i++){
if (id == arr[i].id){
return arr [i];
}
}
}
Finally I'm calling function and want to update Score
getMyClassesById(1).updateScore (122);
it's updates last index item Score, and calls last item "updateScore" function... why?
but when i'm changing some other property its changes correctly for example "x". I can't understand is here something not right with prototypes?
Your variable score is not defined as a member of MyClass - it is only defined in the scope of your closure. Your code will work, but there will only be 1 "score" for all instances of MyClass.
If score is supposed to be part of MyClass then move it
function MyClass1(id){
this.id = id;
this.x = 100;
this.score = 0
//some code. not important
}
And update the method:
var p = MyClass1.prototype;
p.updateScore = function (s){
this.score = s;
}
(function () {
function MyClass1(id){
this.id = id;
this.x = 100;
this.score = 0;
//some code. not important
}
var p = MyClass1.prototype;
p.updateScore = function (s){
this.score = s;
}
window.MyClass1 = MyClass1;
}());
var arr = [];
for (var i = 0; i < 8; i++){
var c = new MyClass1(i);
arr.push (c)
}
var getMyClassesById = function(/* int */ id){
var size = arr.length;
for (var i = 0; i<size; i++){
if (id == arr[i].id){
return arr [i];
}
}
}
getMyClassesById(1).updateScore (122);
console.log(arr);
My JavaScript object is:
var MyObject = {
DOM: function(tagName){
if(!this.isElement){
var found = document.getElementsByTagName(tagName);
this.isElement = true;
for(i in found)
this[i] = found[i];
} else{
var found = this[0].getElementsByTagName(tagName);
for(i in found)
this[i] = found[i];
}
return this;
}
}
It works perfectly:
MyObject.DOM("div");
The problem is that when I log the object again:
MyObject.DOM("div");
console.log(MyObject);
The problem is that it logs:
> Object {0: div#lower.cl, 1: div.higher, find: function, isElement: true}
But actually I want it to log:
> Object {find: function}
So I don't want it to keep the found elements when I run the MyObject again.
So really I just want to reload the object every time I use it.
Here's one way you can implement this. It's best if you stick to keeping your objects as immutable as possible. You're trying to use one instance of one object to do everything, and that won't work:
function MyObject() {
this.length = 0;
}
MyObject.prototype.DOM = function (tagName) {
var found = new MyObject(),
batch,
toSearch,
i,
j,
z = 0;
if (this === MyObject) {
toSearch = [document];
} else {
toSearch = Array.prototype.slice.call(this);
}
for (i = 0; i < toSearch.length; i += 1) {
batch = toSearch[i].getElementsByTagName(tagName);
for (j = 0; j < batch.length; j += 1) {
found[found.length] = batch[j];
found.length += 1;
}
}
return found;
}
MyObject.DOM = MyObject.prototype.DOM;
http://jsfiddle.net/Sygdm/
You can add sort of 'private' fields to your classes like so:
var MyObject = (function() {
var instance = {};
return {
DOM: function(tagName){
if(!instance.isElement){
var found = document.getElementsByTagName(tagName);
instance.isElement = true;
for(i in found)
instance[i] = found[i];
} else{
var found = instance[0].getElementsByTagName(tagName);
for(i in found)
instance[i] = found[i];
}
return this;
}
}
})();
Not sure if that is what you want, though.
here is my code :
var BoxUtility = function() {
var boxList = Array.prototype.pop.apply(arguments);
};
Object.defineProperties(BoxUtility, {
totalArea: {
value: function(){
var x = 0;
for(var i = 0, len = boxList.length; i <= len - 1; i++){
x = x + boxList[i].area;
};
return x;
}
}
});
I'm trying to achieve this syntax for my Code :
var boxArray = [box01, box02, box03];
box are objects, box01.area => boxes have area property
var newElement = new BoxUtility(boxArray);
alert(newElement.totalArea);
I WANT TO SEE THE RESULT AS I EXPECT but I think boxList is in another scope
How can I reach it in defineProperties
You have to assign the value to a property of this in your constructor.
var BoxUtility = function() {
// this.boxList
this.boxList = Array.prototype.pop.apply(arguments);
};
// instance methods go on the prototype of the constructor
Object.defineProperties(BoxUtility.prototype, {
totalArea: {
// use get, instead of value, to execute this function when
// we access the property.
get: function(){
var x = 0;
// this.boxList
for(var i = 0, len = this.boxList.length; i <= len - 1; i++){
x = x + this.boxList[i].area;
};
return x;
}
}
});
var boxUtil = new BoxUtility([{area:123}, {area:456}]);
console.log(boxUtil.totalArea); // 579
Variable scope is always at the function level. So you declared a local variable that is only usable inside your constructor function. But every time you call the constructor function you get a new object (this). You add properties to this in order to have those properties accessible in your instance methods on the prototype.
this works
var BoxUtility = function() {
this.boxList = Array.prototype.pop.apply(arguments);
Object.defineProperties(this, {
totalArea: {
get: function(){
var x = 0;
for(var i = 0, len = this.boxList.length; i <= len - 1; i++){
x = x + this.boxList[i].area;
};
return x;
}
}
});};
var y = new BoxUtility(boxArray);
alert(y.totalArea)
This is simple way to pass array as argument in constructer and declare function prototype for public access.
function BoxUtility(boxArray) {
this.boxArray = boxArray;
this.len = boxArray.length;
}
Color.prototype.getAverage = function () {
var sum = 0;
for(let i = 0;i<this.len;i++){
sum+=this.boxArray[i];
}
return parseInt(sum);
};
var red = new BoxUtility(boxArray);
alert(red.getAverage());