这个关键字问题？答案

【问题标题】：This keyword issue?这个关键字问题？
【发布时间】：2021-03-24 03:06:23
【问题描述】：

我之前问过这个问题，但格式不太有用，所以我重新发布。我想要实现的逻辑是每次单击按钮时，输入框中的值都会转到 addInventory 函数，创建一个新专辑，并将新创建的对象推送到 products 数组。在逻辑的最后，有一个 FOR OF 循环调用 gridChild 函数并为数组中的每个元素创建一个新的 div 框。

问题是，每当我单击按钮时，什么都没有发生，而且 THIS 关键字也未定义。新对象不会被推入数组，只有在手动调用 addInventory 函数时才有效。

"use strict";

// DIV NESTING USING ONLY JS
const app = document.querySelector(`.app`);

const div = `<div class="grid-child">
                </div>`;
const gridContainer = `<div class="grid-container"></div>`;

// New products will be pushed in here
let products = [];

const gridParent = function() {
  // app.insertAdjacentHTML(`afterbegin`, gridContainer);
  app.insertAdjacentHTML(`afterbegin`, gridContainer);
}

gridParent();
const gridContainerDiv = document.querySelector(`.grid-container`);

const gridChild = function() {
  gridContainerDiv.insertAdjacentHTML(`afterbegin`, div);
}

// UI logic for product form 
// Will create a new album object 
// Need to use a prototype and class inheritance so the component is reusable and applicable for different 
// types of products.

class Album {
  constructor(title, artist, price) {
    this.title = title;
    this.artist = artist;
    this.price = price;
  }
}

const addInventory = (title, artist, price) => {
  const newAdd = new Album(title, artist, price);
  products.push(newAdd);
  console.log(this);
};

// THIS WORKS, ADDS TO THE PRODUCT ARRAY NO PROBLEM
// 
addInventory(`Internet`, `Donald Glover`, 15);
addInventory(`Black Pumas`, `Black Pumas`, 31);

const productName = document.getElementById(`product-name`);
console.log(productName);
const productPrice = document.getElementById(`product-price`);
console.log(productPrice);
const inputBtn = document.getElementById(`inputBtn`);
console.log(inputBtn);

// THIS DOESNT WORK, THE THIS KEYWORD IS UNDEFINED AND DOES NOT CALL THE ADDINVENTORY FUNCTION
inputBtn.addEventListener(`click`, (e) => {
  e.preventDefault();
  addInventory(productName.value, ` `, +productPrice.value);
  console.log(this);
})

console.log(products);

// Product list mutation needs to happen before the loop function 
// so that data will be the most updated version everytime

// A div box will be created for every element in the product array
for (const everyElement of products) {
  gridChild();
  console.log(everyElement);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product div creator</title>
  <link rel="stylesheet" href="css/style.css">
  <script type="module" defer src="script.js"></script>
</head>

<body>
  <div class="app">
  </div>
  <div class="inventory-gui">

    <input type="text" id="product-name" name="product-name" data-product="info"><br>
    <input type="number" id="product-price" name="product-price" data-product="info"><br><br>
    <button type="submit" id="inputBtn">Make a new item</button>

  </div>
</body>

</html>

【问题讨论】：

你希望this在事件监听函数中是什么？
当你做console.log(this)时你期待看到什么？箭头函数从包含范围继承 this。
如何判断对象是否被添加到数组中？推送后不记录产品？
打电话给addInventory()之后为什么不做console.log(products)？

标签： javascript html arrays class

【解决方案1】：

脚本正在做它应该做的事情。

const addInventory = (title, artist, price) => {
  const newAdd = new Album(title, artist, price);
  products.push(newAdd);
  console.log(this);
};
addInventory(`Internet`, `Donald Glover`, 15);

在上面的脚本中，this 关键字将未定义，因为addInventory 是一个箭头函数，而您正在使用strict mode。

inputBtn.addEventListener(`click`, (e) => {
  e.preventDefault();
  addInventory(productName.value, ` `, +productPrice.value);
  console.log(this);
})

事件监听器的回调可以访问addInventory函数，所以当按钮被点击时它会被调用。 this 关键字将在这里未定义，因为它是一个箭头函数。

`console.log(products);`

我认为您希望在单击按钮时再次执行上述行。当您单击按钮时，仅执行给事件侦听器的回调而不是整个脚本。如果您需要访问更新后的产品数组，您可以在调用addInvetory 函数之后的回调中。请参阅thissandbox 了解我想说的话。

【讨论】：

如果脚本按预期运行，则在调用事件侦听器时应该会创建另一个 div 框，但它不是。
一个新创建的来自 Album 类的对象应该已添加到 products 数组中，但它没有这样做。
因为你没有在事件监听的回调中实现任何新建div的逻辑。它将如何创建新的 div？您已经在回调之外（在全局执行上下文中）实现了该逻辑，该逻辑仅在第一次运行时运行。
这是有道理的。实际上，我在事件侦听器中为产品放置了一个控制台日志，并通知我正在输入新产品。谢谢大家！