うさがにっき

読書感想文とプログラムのこと書いてきます

JavaScript入門書を読んで気になった点 その2

詳細

関数

関数には定義方法が3つある

  • function命令で定義
function triangle(base, height) {
  return base * height / 2;
}
var triangle = new Function('base', 'height', 'return base * height / 2');
var triangle = function(base, height) {
  return base * height / 2;
}

関数リテラルとfunction命令の違いは

function命令 関数triangleを直接定義している
関数リテラル 名前のない関数を定義した上で、それを変数に格納している

これから関数リテラルは匿名関数、無名関数と呼ばれることがある

またfunction命令と関数リテラル、functionコンストラクタでは評価のタイミングが違う
function命令は静的に解析されるため関数実行より後ろに書いても問題ない

document.writeln(triangle(5, 2))

function triangle(base, height) {
  return base * height / 2;
}

だがfunctionコンストラクタと関数リテラルは実行時に解析されるため関数実行より前に書かなくてはいけない

// 実行時エラー
document.writeln(triangle(5, 2))

var triangle = function(base, height) {
  return base * height / 2;
}

変数

グローバルスコープとローカルスコープ

他の言語と同じように変数にはscopeがある
だが、それは変数宣言にvarをつけた場合のみ、varをつけなかった場合はすべてグローバルスコープとなる

scope = 'Global';

function getValue() {
  scope = 'Local';
  return scope;
}

document.writeln(getValue());
document.writeln(scope);

結果

Local Local

変数にはvarをつけることを慣例にすべき

ローカル変数の有効範囲について

このようにローカルスコープ変数宣言前に変数を使ったとする

var scope = 'Global';

function getValue() {
  // ??
  document.writeln(scope);  
  var scope = 'Local';
  return scope;
}

document.writeln(getValue());
document.writeln(scope);

結果はこうなる

undefined Local Global

つまり??の箇所は未定義となってしまう
このことから変数定義は関数の最初に行うべき

値型、参照型

関数の値型、参照型についてはJavaとかと同じ
配列など参照型わたすと呼び出し元も変わってしまうので注意

ブロックスコープ

ブロックスコープは存在しないので使わない

関数リテラル、Functionコンストラクタにおけるスコープの違い

関数リテラルとFunctionコンストラクタはスコープの解釈が違う

var scope = 'Global';

function checkScope() {
  var scope = 'Local';

  var f_lit = function() {return scope;}
  document.writeln(f_lit());

  var f_con = new Function('return scope;');
  document.writeln(f_con());
}

checkScope();

結果

Local Global

このようにFunctionコンストラクタグローバル変数を参照するので注意

引数について

基本的にJavaScriptは可変長引数を用いる
argumenetsオブジェクトを用いて引数を制御する

arguments.lengthで引数の長さを取得
arguments[index]でindexの引数を取得

再帰呼び出しを定義するcallee

再帰呼び出しをする際にはcalleeプロパティを使うと簡単、無名関数でも再帰が使える

function factorial(n) {
  if(n != 0) {
    return n * arguments.callee(n-1);
  }
  return 1;
}

document.writeln(factorial(5));

結果

120

参考

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで