fix: [#1858] forEach should accept callback's this value and pass this to the third argument of callback (#1861)

ikeyan · capricorn86 · web-flow · commit aab20c3936ab · 2025-10-19T23:59:03.000+02:00
* fix: [#1858] Fix this value of forEach * fix: [#1858] Adds tests * chore: [#1858] Improves performance and defaults to Window as this scope * chore: [#1858] Improves performance and defaults to Window as this scope * chore: [#1858] Improves performance and defaults to Window as this scope --------- Co-authored-by: David Ortner <david@ortner.se>
diff --git a/packages/happy-dom/src/dom/DOMTokenList.ts b/packages/happy-dom/src/dom/DOMTokenList.ts
@@ -20,6 +20,7 @@ export default class DOMTokenList {
 		attributeValue: ''
 	};
 	private [PropertySymbol.supports]: string[];
+	private [PropertySymbol.proxy]?: this;
 
 	/**
 	 * Constructor.
@@ -45,7 +46,7 @@ export default class DOMTokenList {
 
 		const methodBinder = new ClassMethodBinder(this, [DOMTokenList]);
 
-		return new Proxy(this, {
+		const proxy = new Proxy(this, {
 			get: (target, property) => {
 				if (property === 'length') {
 					return target[PropertySymbol.getTokenList]().length;
@@ -125,6 +126,9 @@ export default class DOMTokenList {
 				}
 			}
 		});
+		this[PropertySymbol.proxy] = proxy;
+
+		return proxy;
 	}
 
 	/**
@@ -224,10 +228,15 @@ export default class DOMTokenList {
 	 * @param thisArg
 	 */
 	public forEach(
-		callback: (currentValue: string, currentIndex: number, listObj: string[]) => void,
-		thisArg?: this
+		callback: (currentValue: string, currentIndex: number, parent: this) => void,
+		thisArg?: any
 	): void {
-		return this[PropertySymbol.getTokenList]().forEach(callback, thisArg);
+		const thisArgValue = thisArg ?? this[PropertySymbol.ownerElement][PropertySymbol.window];
+		const items = this[PropertySymbol.getTokenList]();
+		const proxy = this[PropertySymbol.proxy] ?? this;
+		for (let i = 0, max = items.length; i < max; i++) {
+			callback.call(thisArgValue, items[i], i, proxy);
+		}
 	}
 
 	/**
diff --git a/packages/happy-dom/src/fetch/Fetch.ts b/packages/happy-dom/src/fetch/Fetch.ts
@@ -273,7 +273,7 @@ export default class Fetch {
 		}
 
 		if (cachedResponse.state === CachedResponseStateEnum.stale) {
-			const headers = new Headers(cachedResponse.request.headers);
+			const headers = new this.#window.Headers(cachedResponse.request.headers);
 
 			if (cachedResponse.etag) {
 				headers.set('If-None-Match', cachedResponse.etag);
@@ -475,7 +475,7 @@ export default class Fetch {
 			requestHeaders.push(header.toLowerCase());
 		}
 
-		const corsHeaders = new Headers({
+		const corsHeaders = new this.#window.Headers({
 			'Access-Control-Request-Method': this.request.method,
 			Origin: this.#window.location.origin
 		});
@@ -958,7 +958,7 @@ export default class Fetch {
 					return true;
 				}
 
-				const headers = new Headers(this.request.headers);
+				const headers = new this.#window.Headers(this.request.headers);
 				const requestInit: IRequestInit = {
 					method: this.request.method,
 					signal: this.request.signal,
diff --git a/packages/happy-dom/src/fetch/Headers.ts b/packages/happy-dom/src/fetch/Headers.ts
@@ -2,13 +2,17 @@ import DOMException from '../exception/DOMException.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 import DOMExceptionNameEnum from '../exception/DOMExceptionNameEnum.js';
 import IHeadersInit from './types/IHeadersInit.js';
+import BrowserWindow from '../window/BrowserWindow.js';
 
 /**
  * Fetch headers.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Headers
  */
 export default class Headers {
+	// Injected by WindowContextClassExtender
+	protected declare [PropertySymbol.window]: BrowserWindow;
+
 	public [PropertySymbol.entries]: { [k: string]: { name: string; value: string[] } } = {};
 
 	/**
@@ -115,10 +119,15 @@ export default class Headers {
 	 * Executes a callback function once per each key/value pair in the Headers object.
 	 *
 	 * @param callback Callback.
+	 * @param thisArg thisArg.
 	 */
-	public forEach(callback: (name: string, value: string, thisArg: Headers) => void): void {
+	public forEach(
+		callback: (value: string, name: string, parent: this) => void,
+		thisArg?: any
+	): void {
+		const thisArgValue = thisArg ?? this[PropertySymbol.window];
 		for (const header of Object.values(this[PropertySymbol.entries])) {
-			callback(header.value.join(', '), header.name, this);
+			callback.call(thisArgValue, header.value.join(', '), header.name, this);
 		}
 	}
 
diff --git a/packages/happy-dom/src/fetch/Request.ts b/packages/happy-dom/src/fetch/Request.ts
@@ -108,7 +108,9 @@ export default class Request implements Request {
 		this[PropertySymbol.body] = stream;
 		this[PropertySymbol.credentials] =
 			init?.credentials || (<Request>input).credentials || 'same-origin';
-		this[PropertySymbol.headers] = new Headers(init?.headers || (<Request>input).headers || {});
+		this[PropertySymbol.headers] = new this[PropertySymbol.window].Headers(
+			init?.headers || (<Request>input).headers || {}
+		);
 
 		FetchRequestHeaderUtility.removeForbiddenHeaders(this.headers);
 
diff --git a/packages/happy-dom/src/fetch/Response.ts b/packages/happy-dom/src/fetch/Response.ts
@@ -63,7 +63,7 @@ export default class Response implements Response {
 		this.status = init?.status !== undefined ? init.status : 200;
 		this.statusText = init?.statusText || '';
 		this.ok = this.status >= 200 && this.status < 300;
-		this.headers = new Headers(init?.headers);
+		this.headers = new this[PropertySymbol.window].Headers(init?.headers);
 
 		// "Set-Cookie" and "Set-Cookie2" are not allowed in response headers according to spec.
 		this.headers.delete('Set-Cookie');
diff --git a/packages/happy-dom/src/fetch/SyncFetch.ts b/packages/happy-dom/src/fetch/SyncFetch.ts
@@ -149,7 +149,7 @@ export default class SyncFetch {
 				ok: true,
 				url: this.request.url,
 				redirected: false,
-				headers: new Headers({ 'Content-Type': result.type }),
+				headers: new this.#window.Headers({ 'Content-Type': result.type }),
 				body: result.buffer,
 				[PropertySymbol.virtualServerFile]: null
 			};
@@ -220,7 +220,7 @@ export default class SyncFetch {
 		}
 
 		if (cachedResponse.state === CachedResponseStateEnum.stale) {
-			const headers = new Headers(cachedResponse.request.headers);
+			const headers = new this.#window.Headers(cachedResponse.request.headers);
 
 			if (cachedResponse.etag) {
 				headers.set('If-None-Match', cachedResponse.etag);
@@ -408,7 +408,7 @@ export default class SyncFetch {
 			requestHeaders.push(header.toLowerCase());
 		}
 
-		const corsHeaders = new Headers({
+		const corsHeaders = new this.#window.Headers({
 			'Access-Control-Request-Method': this.request.method,
 			Origin: this.#window.location.origin
 		});
@@ -665,7 +665,7 @@ export default class SyncFetch {
 					);
 				}
 
-				const headers = new Headers(this.request.headers);
+				const headers = new this.#window.Headers(this.request.headers);
 				const requestInit: IRequestInit = {
 					method: this.request.method,
 					signal: this.request.signal,
diff --git a/packages/happy-dom/src/fetch/utilities/FetchRequestHeaderUtility.ts b/packages/happy-dom/src/fetch/utilities/FetchRequestHeaderUtility.ts
@@ -78,7 +78,7 @@ export default class FetchRequestHeaderUtility {
 		request: Request;
 		baseHeaders?: Headers | null;
 	}): { [key: string]: string } {
-		const headers = new Headers(options.baseHeaders);
+		const headers = new options.window.Headers(options.baseHeaders);
 		options.request.headers.forEach((value, key) => {
 			headers.set(key, value);
 		});
diff --git a/packages/happy-dom/src/fetch/utilities/FetchResponseHeaderUtility.ts b/packages/happy-dom/src/fetch/utilities/FetchResponseHeaderUtility.ts
@@ -21,7 +21,7 @@ export default class FetchResponseHeaderUtility {
 		requestURL: URL;
 		rawHeaders: string[];
 	}): Headers {
-		const headers = new Headers();
+		const headers = new options.browserFrame.window.Headers();
 		let key = null;
 
 		for (const header of options.rawHeaders) {
diff --git a/packages/happy-dom/src/form-data/FormData.ts b/packages/happy-dom/src/form-data/FormData.ts
@@ -111,10 +111,14 @@ export default class FormData implements Iterable<[string, string | File]> {
 	 * For each.
 	 *
 	 * @param callback Callback.
+	 * @param thisArg thisArg.
 	 */
-	public forEach(callback: (value: string | File, key: string, thisArg: FormData) => void): void {
+	public forEach(
+		callback: (value: string | File, key: string, parent: this) => void,
+		thisArg?: any
+	): void {
 		for (const entry of this.#entries) {
-			callback.call(this, entry.value, entry.name, this);
+			callback.call(thisArg, entry.value, entry.name, this);
 		}
 	}
 
diff --git a/packages/happy-dom/src/nodes/node/NodeList.ts b/packages/happy-dom/src/nodes/node/NodeList.ts
@@ -10,6 +10,7 @@ import Node from './Node.js';
 class NodeList<T extends Node> {
 	[index: number]: T;
 	public [PropertySymbol.items]: T[];
+	public [PropertySymbol.proxy]?: this;
 
 	/**
 	 * Constructor.
@@ -113,6 +114,7 @@ class NodeList<T extends Node> {
 				}
 			}
 		});
+		this[PropertySymbol.proxy] = proxy;
 
 		return proxy;
 	}
@@ -198,10 +200,15 @@ class NodeList<T extends Node> {
 	 * @param thisArg thisArg.
 	 */
 	public forEach(
-		callback: (currentValue: T, currentIndex: number, listObj: T[]) => void,
-		thisArg?: this
+		callback: (currentValue: T, currentIndex: number, parent: this) => void,
+		thisArg?: any
 	): void {
-		return this[PropertySymbol.items].forEach(callback, thisArg);
+		const items = this[PropertySymbol.items];
+		const proxy = this[PropertySymbol.proxy] ?? this;
+		for (let i = 0, max = items.length; i < max; i++) {
+			const item = items[i];
+			callback.call(thisArg ?? item[PropertySymbol.window], item, i, proxy);
+		}
 	}
 
 	/**
diff --git a/packages/happy-dom/src/window/BrowserWindow.ts b/packages/happy-dom/src/window/BrowserWindow.ts
@@ -610,6 +610,7 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 	public declare readonly MessagePort: typeof MessagePort;
 	public declare readonly CSSStyleSheet: typeof CSSStyleSheet;
 	public declare readonly DOMException: typeof DOMException;
+	public declare readonly Headers: typeof Headers;
 	public declare readonly Request: typeof Request;
 	public declare readonly Response: typeof Response;
 	public declare readonly EventTarget: typeof EventTarget;
@@ -684,7 +685,6 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 	public readonly DataTransfer = DataTransfer;
 	public readonly DataTransferItem = DataTransferItem;
 	public readonly DataTransferItemList = DataTransferItemList;
-	public readonly Headers = Headers;
 	public readonly XMLSerializer = XMLSerializer;
 	public readonly ClipboardItem = ClipboardItem;
 	public readonly Selection = Selection;
diff --git a/packages/happy-dom/src/window/WindowContextClassExtender.ts b/packages/happy-dom/src/window/WindowContextClassExtender.ts
@@ -13,6 +13,7 @@ import MutationObserverImplementation from '../mutation-observer/MutationObserve
 import MessagePortImplementation from '../event/MessagePort.js';
 import CSSStyleSheetImplementation from '../css/CSSStyleSheet.js';
 import DOMExceptionImplementation from '../exception/DOMException.js';
+import HeadersImplementation from '../fetch/Headers.js';
 import RequestImplementation from '../fetch/Request.js';
 import ResponseImplementation from '../fetch/Response.js';
 import EventTargetImplementation from '../event/EventTarget.js';
@@ -109,6 +110,11 @@ export default class WindowContextClassExtender {
 		class DOMException extends DOMExceptionImplementation {}
 		(<typeof DOMException>window.DOMException) = DOMException;
 
+		// Headers
+		class Headers extends HeadersImplementation {}
+		Headers.prototype[PropertySymbol.window] = window;
+		(<typeof Headers>window.Headers) = Headers;
+
 		// Request
 		class Request extends RequestImplementation {}
 		Request.prototype[PropertySymbol.window] = window;
diff --git a/packages/happy-dom/src/xml-http-request/XMLHttpRequest.ts b/packages/happy-dom/src/xml-http-request/XMLHttpRequest.ts
@@ -9,7 +9,6 @@ import DOMException from '../exception/DOMException.js';
 import DOMExceptionNameEnum from '../exception/DOMExceptionNameEnum.js';
 import XMLHttpResponseTypeEnum from './XMLHttpResponseTypeEnum.js';
 import ErrorEvent from '../event/events/ErrorEvent.js';
-import Headers from '../fetch/Headers.js';
 import Fetch from '../fetch/Fetch.js';
 import SyncFetch from '../fetch/SyncFetch.js';
 import Request from '../fetch/Request.js';
@@ -207,7 +206,7 @@ export default class XMLHttpRequest extends XMLHttpRequestEventTarget {
 			);
 		}
 
-		const headers = new Headers();
+		const headers = new this[PropertySymbol.window].Headers();
 		if (user) {
 			const authBuffer = Buffer.from(`${user}:${password || ''}`);
 			headers.set('Authorization', 'Basic ' + authBuffer.toString('base64'));
diff --git a/packages/happy-dom/test/dom/DOMTokenList.test.ts b/packages/happy-dom/test/dom/DOMTokenList.test.ts
@@ -182,14 +182,30 @@ describe('DOMTokenList', () => {
 	});
 
 	describe('forEach()', () => {
+		it('Defaults "thisArg" to the Window instance.', () => {
+			element.className = 'class1 class2 class3';
+
+			const thisArgs: Window[] = [];
+			classList.forEach(function (this: Window) {
+				thisArgs.push(this);
+			});
+
+			expect(thisArgs[0]).toBe(window);
+			expect(thisArgs[1]).toBe(window);
+			expect(thisArgs[2]).toBe(window);
+		});
+
 		it('Executes a provided callback function once for each DOMTokenList element.', () => {
 			const items: Array<{ token: string; index: number }> = [];
 
 			element.className = 'class1 class2 class3';
 
-			classList.forEach((token: string, index: number) => {
+			const thisArg = {};
+			classList.forEach(function (this: any, token: string, index: number, parent) {
+				expect(this).toBe(thisArg);
+				expect(parent).toBe(classList);
 				items.push({ token, index });
-			});
+			}, thisArg);
 
 			expect(items).toEqual([
 				{
diff --git a/packages/happy-dom/test/fetch/Headers.test.ts b/packages/happy-dom/test/fetch/Headers.test.ts
diff --git a/packages/happy-dom/test/form-data/FormData.test.ts b/packages/happy-dom/test/form-data/FormData.test.ts
diff --git a/packages/happy-dom/test/nodes/node/NodeList.test.ts b/packages/happy-dom/test/nodes/node/NodeList.test.ts

Original file line number	Diff line number	Diff line change
`@@ -111,10 +111,14 @@ export default class FormData implements Iterable<[string, string \| File]> {`
`111`	`111`	`* For each.`
`112`	`112`	`*`
`113`	`113`	`* @param callback Callback.`
	`114`	`+ * @param thisArg thisArg.`
`114`	`115`	`*/`
`115`		`- public forEach(callback: (value: string \| File, key: string, thisArg: FormData) => void): void {`
	`116`	`+ public forEach(`
	`117`	`+ callback: (value: string \| File, key: string, parent: this) => void,`
	`118`	`+ thisArg?: any`
	`119`	`+ ): void {`
`116`	`120`	`for (const entry of this.#entries) {`
`117`		`- callback.call(this, entry.value, entry.name, this);`
	`121`	`+ callback.call(thisArg, entry.value, entry.name, this);`
`118`	`122`	`}`
`119`	`123`	`}`
`120`	`124`