function オブジェクトについて

中村 享介 / 株式会社ピクセルグリッド

中村 享介(Kyosuke.jp

株式会社ピクセルグリッド

  • JavaScriptの会社
  • Ajax, HTML5, CSS3, SVG, Canvas
  • iPhone, iPad

著書

連載

  • web creators』 2006年 7月号~ 2007年 6月号
    すぐに使えるCSSデザインテクニック 連載
  • Web Designing』 2009年 4月号~ 2010年 7月号
    Ajax/JavaScript Lab. 連載

functionオブジェクトについて

  • function?
  • オブジェクト?
  • new
  • functionオブジェクトのプロパティ
  • this
  • callオブジェクト

function?

function文

function hoge(){
	//スクリプト
}

他の言語では関数などと呼ばれる

functionリテラル(無名関数・匿名関数)

var hoge = function(){
	//スクリプト
};

これらの構文・式を書くと
functionオブジェクトが作られる

オブジェクト?

そもそもオブジェクトって?

  • プロパティの集まり
  • プロパティは名前と値の対になったもの

Object オブジェクト

{
     hoge: 'ほげ',
     fuga: 'ふが'
}

連想配列のようなもの

いろんなオブジェクト

Arrayオブジェクト

  • データの並びを管理
  • reverseで並び順を逆にしたりとか

Dateオブジェクト

  • 日付を管理
  • 特定の時間という情報を扱う

Functionオブジェクト

  • スクリプトを管理
  • 任意のタイミングで実行できる

new

オブジェクトはnewで生成できる

  • new Object() と {}
  • new Array() と []

functionオブジェクトもnewで生成できる

  • new Function() と function(){}

引数はこんな感じで指定

var fn = new Function('a', 'return a+12');
fn(2); // 14

こんなん普通つかわないけど。

functionオブジェクトのプロパティ

オブジェクトなのでプロパティとメソッドがある

  • length
  • toString()
  • call()
  • apply()

length

期待される引数の数が入ってる。

var a = function(x){};
a.length // 1

var b = function(x, y){};
b.length // 2

toString

保存されてるスクリプトを文字列に変換して出力

var a = function(x){ return x * x; };
a.toString() // "function (x) { return x * x; }"

call()とapply()

thisを指定して管理してるスクリプトを実行する

var hoge = function(x, y){};
                
hoge(1, 2);

hoge.call(window, 1, 2);

hoge.apply(window, [1,2]);

this

thisの動作

var obj = {
     name: 'A',
     method: function(){
     	return this.name;  // this === obj
     }
}
obj.method(); // A

var obj2 = {
     name: 'B'
}
obj2.method = obj.method;  // メソッドをコピー
obj2.method(); // B

call()とapply()はthisを自由に変えられる

ほかのオブジェクトのふりして実行できる

var obj2 = {
     name: 'B'
}
// obj2.method = obj.method;
// obj2.method();
obj.method.call(obj2); //B
                

functionがオブジェクトだとよいこと

引数で渡せる

$('.edit').click(function(){
	//hogehoge;
})

functionを作るfunctionが作れる

var fnMaker = function (x){
	var fn = function(y){
		return x + y;
	};
	return fn;
};

var fn1 = fnMaker(1); // fn1(1) で 2
var fn2 = fnMaker(2); // fn2(1) で 3

callオブジェクト

functionが実行されるとcallオブジェクトが作られる

引数・function内で定義した変数はcallオブジェクトのプロパティ

var a = function(x){
	var b = [1,2,3]; // bはa functionを実行したときにできるcallオブジェクトのプロパティ
}

//コールオブジェクトの中身のイメージ
{
	x: 引数の値1つめ,
	b: [1,2,3],
	arguments: [引数の値1つ目]
}
                

function実行後callオブジェクトはGCされる

参照が残ってるとGCされない(クロージャ)

var a = function(){
	var b = [1,2,3]; // bはa functionを実行したときにできるcallオブジェクトのプロパティ
	return function(){
		return b;  // ここでbを参照してるのでa functionを実行したときにできるcallオブジェクトはGCされない
	}
}
                

まとめ

  • function構文、式でfunctionオブジェクトが作られる
  • functionオブジェクトもプロパティとメソッドを持っている
  • functionがオブジェクトであるため引数に指定したり、作ったfunctionオブジェクトをreturnで返したりすることができる。
  • thisやfunction内で宣言(var)した変数はcallオブジェクトのプロパティ
/