Javascript 我不知道'；I don’我不知道在这种情况下如何在其他对象中使用对象的方法_Javascript_Object_Methods

Javascript 我不知道'；I don’我不知道在这种情况下如何在其他对象中使用对象的方法

javascript object methods

Javascript 我不知道'；I don’我不知道在这种情况下如何在其他对象中使用对象的方法,javascript,object,methods,Javascript,Object,Methods,这是我的第一个问题。所以我会让它变得简单我不知道如何使用htmlobj2中的“htmlobj1.paint”方法。我试着打电话，但我认为我做错了。下面是代码： PD:htmlobj1.油漆工程。我将非常感谢任何类型的建议，你想给我继续这个代码。谢谢大家! <body> <table id="table"> <tr> <th>Firstname</th> <th>Last

这是我的第一个问题。所以我会让它变得简单

我不知道如何使用htmlobj2中的“htmlobj1.paint”方法。我试着打电话，但我认为我做错了。下面是代码：

PD:htmlobj1.油漆工程。我将非常感谢任何类型的建议，你想给我继续这个代码。谢谢大家!

<body>
    <table id="table">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
        <th>Id</th>
        <th>Adress</th>
        <th>Mutant</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>22</td>
        <td>???</td>
        <td>Berkley St 304</td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>??</td>
        <td>???</td>
        <td>Conecticut Av 904</td>
        <td>Yes</td>
      </tr>
    </table>
    <p id="demo"></p>

    <h1>Text</h1><br>
    <h1>Text</h1><br>
    <h1>Text</h1><br>
    <h1>Text</h1><br>
    <h1>Text</h1><br>
    <h1>Text</h1><br>
</body>
var htmlobj2 = {
    e: document.getElementsByTagName("h1"),
}
var htmlobj1 = {
    e: document.getElementsByTagName("td"),
    paint: function(e){
        e = this.e;
        for (var i = 0; i < arr.length; i++) {

            if (i % 2 == 0) {
                e[i].style.backgroundColor = "red";
                e[i].style.color = "white";
            }
            else {
                e[i].style.backgroundColor = "green"
                e[i].style.color = "white";
            }
        }       
    }
}
var arr = [].slice.call(htmlobj1.e);
var arr2 = [].slice.call(htmlobj2.e);
var myFunction = htmlobj1.paint();


名字
姓氏
年龄
身份证件
地址
突变型
吉尔
史密斯
22
???
伯克利街304号
对
前夕
杰克逊
??
???
康涅狄克Av 904
对

文本

文本

文本

文本

文本

文本

变量htmlobj2={
e:document.getElementsByTagName（“h1”），
}
变量htmlobj1={
e:document.getElementsByTagName（“td”），
油漆：功能（e）{
e=这个。e；
对于（变量i=0；i

惯用代码的一个例子是使用构造函数（或更新的

类

语法）创建通过方法共享行为的对象实例

function MyCtor(tagName) {
  this.e = document.getElementsByTagName(tagName)
}
MyCtor.prototype.paint = function(){
    for (var i = 0; i < this.e.length; i++) {
        if (i % 2 == 0) {
            this.e[i].style.backgroundColor = "red"
        } else {
            this.e[i].style.backgroundColor = "green"
        }
        this.e[i].style.color = "white";
    }       
}
var htmlobj1 = new MyCtor("td")
var htmlobj2 = new MyCtor("h1")

htmlobj1.paint()
htmlobj2.paint()

注意，我在of语句中使用了

var

而不是

const

。const

const

声明会更好，但在Firefox中还不能起到这个作用

还请注意，在使用条件运算符设置

backgroundColor

时，我稍微缩短了一些内容。这也可以在第一个示例中完成。

将评论中所述的所有内容放在一起：

function createCustomObj(tag){
   return {
     elems: [...document.getElementsByTagName(tag)], //convert to array, the ES6 way...
     paint: function(){
         this.elems.forEach((elem,index)=>{
            if (index % 2 == 0) {
              elem.style.backgroundColor = "red";
              elem.style.color = "white";
            }else {
               elem.style.backgroundColor = "green"
               elem.style.color = "white";
            }
         });       
     }
};
}

这样使用：

class MyCtor {
    constructor(tagName) {
      this.e = Array.from(document.getElementsByTagName(tagName))
    }
    paint(){
        for (var [i, el] of this.e.entries()) {
            el.style.backgroundColor = i % 2 == 0 ? "red" : "green"
            el.style.color = "white";
        }       
    }
}
var htmlobj1 = new MyCtor("td")
var htmlobj2 = new MyCtor("h1")

htmlobj1.paint()
htmlobj2.paint()

htmlobj1=createCustomObj("h1");
htmlobj1.paint();

htmlobj2.paint=htmlobj1.paint在创建htmlobj1
之后放置此函数将分配该函数，以便其可用，但在我看来，这不是最佳设计。似乎您需要某种类型的“类”。我不确定是否看到任何代码尝试将htmlobj2
与htmlobj1.paint一起使用。您能否提供更多关于您试图执行的操作的说明（即使代码不正确）？…您还需要在函数内部对HTMLCollection进行切片，以便它在正确的集合上运行。如果您只使用Array.from
而不是spread元素语法，则不需要解释性注释…