JavaScriptの関数
JavaScriptで特に特徴的なのは関数の扱いです。関数もオブジェクトに含まれると書いた通りで,
イベント登録用関数
var addEvent;//変数を用意
if(document.addEventListener) {// IE以外
addEvent = function(node,type,handler){
node.addEventListener(type,handler,false);
};
} else if (document.attachEvent) {// IE用
addEvent = function(node,type,handler){
node.attachEvent('on' + type, function(evt){
handler.call(node, evt);
});
};
}
関数には大きく分けて2種類の定義方法があります。
関数の定義方法
var A = function(){
};
function B(){
}
このAとBはよく似ていますが,
関数宣言の呼び出し
B();
function B(){
}
また,
さて,
関数定義のクイズ
if(true) {
function someFunc(){
return '1';
};
} else {
function someFunc(){
return '2';
};
}
var notSomeFunc = function someFunc(){
return '3';
};
alert(someFunc());// 1 or 2 or 3 ?
正解は,
なぜこうなるのか,
さて,
無名関数による関数定義
var addEvent = (function(){
if(document.addEventListener) {
return function(node,type,handler){
node.addEventListener(type,handler,false);
};
} else if (document.attachEvent) {
return function(node,type,handler){
node.attachEvent('on' + type, function(evt){
handler.call(node, evt);
});
};
}
})();
まず重要なのは無名関数とそれを呼び出している部分です。つまり,
無名関数と呼び出し
(function(){
// 関数内部
})();
function(){}で関数を定義して,
そして,
関数を返す関数
function A(){
return function B(){
return 'B';
}
}
A();// function B
A()();// 'B'
このように,
最後に,
addEvent関数の定義方法:3項演算子
var addEvent = (document.addEventListener) ?
function(node,type,handler){
node.addEventListener(type,handler,false);
}
: function(node,type,handler){
node.attachEvent('on' + type, function(evt){
handler.call(node, evt);
});
};
また,
addEvent関数の定義方法:関数内部の分岐
function addEvent(node,type,handler){
if (document.addEventListener) {
node.addEventListener(type,handler,false);
} else {
node.attachEvent('on' + type, function(evt){
handler.call(node, evt);
});
}
};
変則的ですが,
addEvent関数の定義方法:関数内での書き換え
function addEvent(node,type,handler){
if (document.addEventListener) {
addEvent = function (node,type,handler) {
node.addEventListener(type,handler,false);
}
} else {
addEvent = function (node,type,handler) {
node.attachEvent('on' + type, function(evt){
handler.call(node, evt);
});
}
}
addEvent(node,type,handler);
}
後半の2つは関数宣言のメリットである記述した場所より上のコードから呼び出すことができる点がポイントです。
まとめ
今回はJavaScriptの基礎的な部分を中心に解説しました。次回はJavaScriptの最重要ポイントであるクロージャーを中心に見ていきたいと思います。