JavaScriptのグローバル変数の衝突について

Published: 2016年4月3日 by tomsato

概要

今日はJavaScriptのグローバル変数の衝突について調べたことをまとめます

JavaScript勉強シリーズ

グローバル変数の衝突について

JavaScriptでグローバル変数を作成した際、JavaScriptファイルを複数に分割してもお互いにグローバル変数が見える世界になっているので、あるファイルで使った名前は別のファイルで使えない
このような名前空間の汚染を回避する方法を調べてみる

オブジェクトプロパティへの閉じ込め

オブジェクトリテラルで作成したオブジェクトのプロパティにして名前をオブジェクトの中に閉じ込める

var TestModule = {
  x: function(a){
    return a * a;
  },
  y: {p:2, q:5}
};

print(TestModule.x(5)); // 25
print(TestModule.y.p);  // 2

// xはTestModuleの中に閉じ込めているので他のコードでは使用できる
print(x); // Exception: ReferenceError: Can't find variable: x

このやり方だと1コードあたり1変数名だけに収まる

良いところ 名前の衝突の問題は概ね回避できる
課題点 元々のグローバルスコープが広いという問題は残る

クロージャによる隠蔽

クロージャを活用して外部から見えない名前を作成する

var hoge = (function(){
  var x = {p:3, q:5}
  return function() {return x.p + x.q;}
})();

print(hoge()); // 8

関数スコープによる名前の閉じ込めとクロージャによって関数実行後もローカル変数が生きているという2つの特性を生かした隠蔽方法

アクセス修飾子について

JavaScriptのはprivateやpublicなどアクセス修飾子がない
その代わりに関数スコープとクロージャを使ってアクセス修飾子っぽいことができる

function get_set_class() {
  var x = 0;

  // ここにプライベートは変数や関数を宣言できる

  return {
    // 公開メソッド
    get:function()    {return x;},
    set:function(num) {x = num; return this;} // return thisはメソッドチェーン用
  }
}

var hoge = get_set_class();
print(hoge.get());        // 0
hoge.set(3);
print(hoge.get());        // 3
print(hoge.set(5).get()); // 5 (メソッドチェーン)

// xには直接アクセスできない
print(x);                 // Exception: ReferenceError: Can't find variable: x
print(hoge.x);            // undefined

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

社内ツールなどの超小規模なAPIをGolangで実装する際にフレームワークを使うべきかを、実際にnet/httpを使った実装とフレームワークを使った実装を比較することでどれだけ優位性があるかを見ていきたいと思います。今回はフレームワークにはシンプルで使いやすそうなEchoを使うことにします。

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

カテゴリ一覧

タグ一覧