Miyazaki.js vol.1 スコープの話

自己紹介
Nobuhiro Nakashima
@ombran
JavaScript/Ruby/サンホラ/アニオタ
株式会社アラタナ　エンジニア
Miyazaki.js主催

スコープ
“ある変数や関数が
特定の名前で参照される範囲のこと”
– by Wikipedia

global scope
プログラム「全体」から見えるスコープ
file scope
プログラムを記述したファイルの内側でのみ参照できるスコープ
local scope
ある関数やブロックの範囲内に限定されたスコープ
instance scope
いわゆるカプセル化
class scope
あるクラスの定義全体から参照できるスコープ

global scope
プログラム「全体」から見えるスコープ
file scope
プログラムを記述したファイルの内側でのみ参照できるスコープ
local scope
ある関数やブロックの範囲内に限定されたスコープ
instance scope
いわゆるカプセル化
class scope
JavaScript
でのスコープ
あるクラスの定義全体から参照できるスコープ

var scope = "Global";
function getValue() {
console.log(scope); // > undefined
var scope = "Local";
return scope;
}
console.log(getValue());
// > "Local" (ローカル変数を参照)
console.log(scope);
// > "Global" (グローバル変数を参照)

global scope
return scope;
}
console.log(scope);

local scope
return scope;
}
console.log(scope);

スコープの話の前に
変数の前のやつを
説明します

varなし→必ずグローバル
varあり→スコープ内変数
varは絶対付けること

スコープをもう
ちょっと深く

global scope
• functionの外で宣言された変数・関数
• varなしで宣言された変数

functionの外で宣言
console.log(scope); // > “Global”
scope = "Global2";
return scope;
}
console.log(getValue()); // > "Global2"
console.log(scope); // > "Global2"

varなしで宣言
scope = "Global2";
return scope;
}
console.log(getValue()); // > "Global2"
console.log(scope); // > "Global2"

local scope
• functionの中で宣言された変数・関数
• functionの引数で宣言された変数

functionの中で宣言
return scope;
}
console.log(getValue()); // > "Local"
console.log(scope); // > "Global"

functionの引数で宣言
function getValue(arg1) {
console.log(arg1); // > “Global”
arg1 = "Local";
return arg1;
}
console.log(getValue(scope)); // > "Local"

なぜこういう挙動
をするのか

var a = “GlobalA”;
var b = “GlobalB”;
function func1() {
var b = “Func1B”;
function func2() {
var c = “Func2C”;
console.log(c); // > “Func2C”
console.log(b); // > “Func1B”
console.log(a); // > “GlobalA”
}
func2();
}
func1();
ここの変数の値
を探すルール

function func1() {
function func2() {
}
func2();
}
func1();
Cはこのスコープで見つかる

function func1() {
function func2() {
}
func2();
}
func1();
Bはこのスコープで見つかる

function func1() {
function func2() {
}
func2();
}
func1();
Aはこのスコープで見つかる

function func1() {
function func2() {
}
func2();
}
func1();
変数の
検索範囲
が徐々に
広がって
いる

これが
スコープチェーン

さっきのやつ
console.log(scope);
return scope;
}
この時点で同一スコープを探す

さっきのやつ
console.log(scope);
return scope;
}
この時点で同一スコープを探す
いた！！

こういうイメージ
var scope;
scope = "Local";
return scope;
}

だから変数は最初に
全部書きましょう

スコープチェーン
による強力な機能

の前に
ちょっと最新の話

ちなみに
Javaなどにある
ブロックスコープですが

ブロックスコープ
var sum = 0;
for (var i = 0; i < 10; i++) {
sum += i;
}
console.log(sum);
console.log(i);

var sum = 0;
for (var i = 0; i < 10; i++) {
sum += i;
}
console.log(sum); // > 45
console.log(i); // > ??

var sum = 0;
for (var i = 0; i < 10; i++) {
sum += i;
}
console.log(i); // > ReferenceError 10

ECMAScript6の新機能
letでできるよ

var sum = 0;
for (let i = 0; i < 10; i++) {
sum += i;
}
console.log(i); // > ReferenceError

クロージャ
“引数以外の変数を実行時の環境ではなく、
自身が定義された環境（静的スコープ）に
おいて解決することを特徴とする。”
– by Wikipedia

function func1() {
function func2() {
}
func2();
}
func1();
さっきのも
クロージャ

function counter() {
var count = 0;
return function() {
count = count + 1;
return count;
}
}
var cnt = counter();
console.log(cnt()); // > 1
変数の
永続化

var count = 0;
return function() {
count = count + 1;
return count;
}
}
変数の
永続化
ここで変数が束縛される

var count = 0;
return function() {
count = count + 1;
return count;
}
}
変数の
永続化
束縛されたままなので
値がインクリメントされる

普通の関数定義と実行
function helloWorld() {
alert("Hello, World!");
}
helloWorld();

即時関数
(function helloWorld() {
})();
定義後、即実行

グローバルスコープを
汚さない

即時関数
(function helloWorld() {
})();
helloWorld(); // > エラー

ということは
関数名もいらない

即時関数
無名関数
(function() {
})();

ファイル内の全コードを囲む
(function() {
var hoge = 1;
function fuga() {
console.log(hoge);
}
fuga();
})();

同一ページで
複数JSファイルを
読み込んでも
他のJSを壊さない

(function() {
// ここに自分の
//JavaScriptコードを書く
})();

(function() {
// ここに自分の
//JavaScriptコードを書く
})();
マナーとして覚えてください

Miyazaki.js vol.1 スコープの話

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Miyazaki.js vol.1 スコープの話

Semelhante a Miyazaki.js vol.1 スコープの話 (20)

Miyazaki.js vol.1 スコープの話