javascript - 为什么这不使用 forEach 绑定(bind)，而是使用 for in 循环绑定(bind)？

Question

我试图创建一个为 HTML 元素设置多个属性的函数。我在此页面上使用了 Stack Overflow 用户提供的代码

Setting multiple attributes for an element at once with JavaScript

如果我使用 for in 循环，则 this 的绑定(bind)成功，但如果我使用 forEach 则不会成功？这是为什么？

这有效

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]);
    }
  }
}

这不起作用

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]);
      }
  });
}

但是，如果我不修改元素对象，而只是使用 ForEach 循环创建一个常规函数，那么它就可以正常工作。

简单的实现

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

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

Answer 1

foreach 的第二个片段不起作用，因为 foreach this 内部不指向 div 而是指向 window 对象，这就是为什么您收到错误 this.setAttribute is not a function

更改实现如下。

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>