WebModuleIdiom

このエントリでは、WebModule に使われている Idiom(トリック) について解説しています。

---

WebModule はどこでも動きます。

この「どこでも動く」JavaScriptを実現するためのイディオムが WebModuleIdiom です。 この idiom を使うと、各プラットフォームにおけるルートオブジェクト(GLOBAL object)を獲得する事ができます。

// WebModuleIdiom
var GLOBAL = (this || 0).self || global;

GLOBAL が既に宣言されている環境では global の値で GLOBAL を上書きします、electron や Node.js がこのケースです。
GLOBAL が undefined の場合は (this || 0).self || global を各プラットフォームの都合に合わせて評価します。

platform	expression and result
Node.js and NW.js (Node context)	this = global, global = global (global ││ 0).self ││ global → (GLOBAL).self ││ global → undefined ││ global → global → Global Object
WebWorkers	this = WorkerGlobalScope, global = undefined (WorkerGlobalScope ││ 0).self ││ undefined → (WorkerGlobalScope).self ││ undefined → WorkerGlobalScope.self ││ undefined → Global Object
Browser and NW.js (Browser context)	this = window, global = undefined (window ││ 0).self ││ undefined → (window).self ││ undefined → window.self ││ undefined → Global Object

WebModuleIdiom with ESModules

ESModules スコープ内はデフォルトで strict モードになります。
また strict モードにおいて this は undefined になるため、WebModule idiom の ((this ││ 0).self ││ global) がエラーになる環境も存在します。

var MY_GLOBAL = (this || 0).self || global; // -> Error "global" is not defined.

そのような場合は var GLOBAL = GLOBAL || self; を使い問題を解決します。

var GLOBAL = GLOBAL || self;

(function(global) {


})(GLOBAL);