Why this doesn't bind using forEach, but does bind using a for in loop?

Question

I was attempting to make a function that sets multiple attributes to an HTML element. I used the code provided by a Stack Overflow user on this page

Setting multiple attributes for an element at once with JavaScript

If I use a for in loop, the binding of this is successful, but if I use a forEach it is not? Why is that?

This Works

Element.prototype.attributeSetter = function(attrs){
  for(var prop in attrs){
    if((prop == "style" || prop == "styles") && (typeof attrs[prop] === 'object')){
        for(var n in attrs[prop]){
           this.style[n] = attrs[prop][n];
        }
    }else if(prop == "html"){
        this.innerHTML = attrs[prop];
    }else{
        console.log("this: ", this);
        this.setAttribute(prop, attrs[prop]);
    }
  }
}

This does not work

Element.prototype.attributeSetter = function(attrs){
    Object.keys(attrs).forEach(function(prop){
      if((prop == "style" || prop == "styles") && (typeof attrs[prop] === 'object')){
         for(var n in attrs[prop]){
           this.style[n] = attrs[prop][n];
         }
      }else if(prop == "html"){
        this.innerHTML = attrs[prop];
      }else{
        //TypeError: this.setAttribute is not a function
        console.log("this: ", this);
        this.setAttribute(prop, attrs[prop]);
      }
  });
}

However if I don't modify the Element Object and just make a regular function with the ForEach loop it works just fine.

Simple Implementation

var myDiv = document.getElementById("myDiv");

myDiv.attributeSetter({
    class: "coolDiv",
  style: {
    color: "#0110ff",
    border: "2px solid lime"
  },
  "data-order": "one",
  "html": "Cool Div"
});

have you tried changing the second-last line of your 'This does not work' example to }.bind(this)); — trevor
– trevor, Commented Dec 26, 2016 at 2:00
@trevor Yeah, that works, but I was wondering why I have to do that. Sorry if this is a poor question. — Travis
– Travis, Commented Dec 26, 2016 at 2:02
You have to do it because you are passing a callback function to the .forEach(). You don't know when your callback will execute, so you use .bind(this) to create a copy of your callback function that will execute at a future time in the context of myDiv. Although @Deep has a solution that works (called lexical capture of 'this'), it is not the best or most correct way of solving your issue. If you want to learn a lot about how these things work, I suggest reading the 'You Don't Know JS' series of books by Kyle Simpson, online and free: github.com/getify/You-Dont-Know-JS — trevor
– trevor, Commented Dec 26, 2016 at 2:22

Deep · Accepted Answer · 2016-12-26 02:03:33Z

1

The second snippet with foreach does not work because inside foreach this does not point to the div but to the window object and that is why you are getting error this.setAttribute is not a function

Change the implementation like below.

Element.prototype.attributeSetter = function(attrs){
   var elem = this;
    Object.keys(attrs).forEach(function(prop){
      if((prop == "style" || prop == "styles") && (typeof attrs[prop] === 'object')){
         for(var n in attrs[prop]){
           elem.style[n] = attrs[prop][n];
         }
      }else if(prop == "html"){
        elem.innerHTML = attrs[prop];
      }else{
        //TypeError: this.setAttribute is not a function
        elem.setAttribute(prop, attrs[prop]);
      }
  });
}

var myDiv = document.getElementById("myDiv");

myDiv.attributeSetter({
    class: "coolDiv",
  style: {
    color: "#0110ff",
    border: "2px solid lime"
  },
  "data-order": "one",
  "html": "Cool Div"
});

 <div id="myDiv"></div>

answered Dec 26, 2016 at 2:03

Deep

9,7962 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Travis Over a year ago

Thanks, I guess I should brush up on .bind(). I mainly use JavaScript for design mainly.

Collectives™ on Stack Overflow

Why this doesn't bind using forEach, but does bind using a for in loop?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related