“this”值，在使用 Javascript 中的工廠函數、模塊、事件偵聽器和 IIFE 創建井字游戲時
[英]“this” value, when creating a Tic Tac Toe game using Factory Functions, Modules, Event Listeners, and IIFE's in Javascript
問題描述
我正在開發一款井字游戲，玩家輪流在棋盤上做記號。
在這個階段，我試圖讓棋盤在每次點擊一個方塊時在玩家之間交替。 所以當玩家 1 點擊棋盤時，玩家 1 的符號顯示在點擊的方塊上，輪到玩家 2 到 select 一個方塊。
這是我第一次使用立即調用的 Function 表達式（IIFE's）和工廠 Function，我很難讓這些模塊一起工作。
過程和問題是這樣的：
- 一個模塊生成一個包含 9 個“正方形”對象的板，並向每個正方形 object 添加一個事件監聽器。 eventListener 在單擊時觸發 function。
- 那個 eventListener function 應該做兩件事：修改“方形”object 的 innerHTML，並更改當前播放器
- eventListener function 使用“this”變量，它應該是“square”object。 這就是問題所在。 在控制台記錄時，我發現“this”變量是 Window object，即使在“方形”object 上調用了 eventListener。
- The current result is the function fires, but innerHTML of the clicked "square" is not modified because the object is the Window instead of the "square" object.
我不明白為什么這不能正常工作，並且很難理解如何在模塊之間使用對象。
我已經審查了 Modules、IIFE 和 eventListeners，但似乎找不到一個結合所有這些並幫助我理解問題根源的好例子。
//Gameboard array var boardModule = (() => { //Select div for board let boardContainer = document.querySelector("#boardContainer") let boardArray = ["x", "o", "x", "o", "x", "o", "x", "o", "x"]; //Module Player Selection const gameFunctions = (() => { // Onclick function for board let currentPlayer; // Selection module const getPlayer = () => { switch (currentPlayer) { case undefined: currentPlayer = 1; case 1: console.log(this); this.innerHTML = "PLAYER 1 SELECTION"; return currentPlayer = 2; case 2: this.innerHTML = "PLAYER 2 SELECTION" return currentPlayer = 1; } }; return { getPlayer }; })(); //Module: Built board with for each const boardGenerator = () => { boardArray.forEach(element => { let square = document.createElement("div") square.classList.add("squareStyle") square.innerHTML = element square.addEventListener("click", gameFunctions.getPlayer); //Append to board boardContainer.appendChild(square); }); } //Module: Build players const Player = (name, mark) => { getname = () => name; getmark = () => mark; const welcome = person => { console.log(`Welcome to ${person.getname()}`) } return { getname, getmark, welcome } } player1 = Player("player1", "X"); player2 = Player("player2", "0"); //Module: Square Selector return { boardGenerator, gameFunctions }; })(); boardModule.boardGenerator();
html, body { height: 100%; } * { font-family: Graphik Regular; }.container { height: 100%; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } #boardContainer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: absolute; margin: 0 auto; width: 300px; height: auto; }.squareStyle { display: flex; height: 100px; width: 100px; background-color: red; position: relative; align-items: center; justify-content: center; }
<.DOCTYPE html> <meta charset="UTF-8"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="style:css"> </stylesheet> <script type="text/javascript" src="http.//livejs.com/live.js"></script> </head> <body> <div class="container"> <div id="boardContainer"> </div> </div> <script src="script.js"></script> </body> </html>
1 個解決方案
解決方案1
2 已采納 2020-05-11 17:22:56
這是因為您使用的是箭頭 function。 箭頭函數始終綁定到父 scope，在您的情況下是window object。
從MDN Arrow Function Docs看這個例子：
'use strict';
var obj = { // does not create a new scope
i: 10,
b: () => console.log(this.i, this),
c: function() {
console.log(this.i, this);
}
}
obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}
使用javascript創建井字游戲時，有什么方法可以避免object.prototype.constructor？
[英]Is there any way to avoid an object.prototype.constructor when creating a tic tac toe game with javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.