首页 > 解决方案 > this.appendChild (articleItemElement) 上的 this 关键字;参考?

问题描述

简而言之,我有一个 javascript 文件,其中包含一个数据数组,其中有 4 个对象,每个对象由 4 个属性组成,然后第二个文件是......

===========================================

(article-item.js)

class ArticleItem extends HTMLElement {
 set article(article) {
   this._article = article;
   this.render();
 }

     render() {
       this.innerHTML = `
    <img class="featured-image" src="${this._article.featuredImage}">
    <div class="article-info">
        <h2><a href="${this._article.id}">${this._article.title}</a></h2>
        <p>${this._article.description}</p>
    </div>

  `;
 }
}
 
customElements.define("article-item", ArticleItem);

==================================================== ===

(article-list.js)

import "./article-item.js"
 
 
class ArticleList extends HTMLElement {
 set articles(articles) {
   this._articles = articles;
   this.render();
 }
 
 
 render() {
   this._articles.forEach(article => {
     const articleItemElement = document.createElement("article-item");
     // memanggil fungsi setter article() pada article-item.
     articleItemElement.article = article;
     this.appendChild(articleItemElement);
   })
 }
}
 
customElements.define("article-list", ArticleList);

==================================================== ==========

今天我在学习嵌套自定义元素,我很了解程序流程是如何运行的。但是有些部分我还是不明白,比如this line/keyword this在(this.appendChild(articleItemElement);)中做了什么,然后在(articleItemElement.article = article;)我明白了只能赋值数据如果使用访问器属性或 getter / setter 技术,则通过访问 .article 属性通过 JavaScript 语法自定义元素。部分(=文章)的功能是什么?或者如果我错了,请解释该行的功能

我真的希望并感谢是否有人会为我解释

标签: javascriptarraysnestedcustom-elementthis-keyword

解决方案


推荐阅读