関数(function)

2024年01月16日(火) 09時36分更新 icon 項目のみ表示/展開表示の切り替え

関数宣言

function 関数名(引数){ 処理 }
function (引数){ 処理 } // 無名関数
var func=function(引数){ 処理 }
(function (受け取る引数){ 処理 }(設定する引数)); // 即時関数
以下のtest1が関数です。表示ボタンをクリックすると関数により表示内容が書き換えられます。
ボタンを押す前 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id1">ボタンを押す前</span>
  <script type="text/javascript">
  function test1(){
    var o=document.getElementById('id1');
    o.innerText="test";
  }
  </script>
  <form name="test1Form">
    <input type="button" value="表示" onclick="test1()" />
  </form>
</body>
</html>

可変長引数

関数の引数はarguments配列に格納されています。引数の個数はarguments.lengthで取得できます。 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id2"></span>
  <script type="text/javascript">
  // 可変長引数の関数
  function sub2(){
    var t="";
    for(var n=0;n<arguments.length;n++)
      t=t+" "+arguments[n];
    return t;
  }
  function test2(){
    var a=new Array(5);
    var o=document.getElementById('id2');
    var t=sub2("鶴","亀");
    o.innerText=t;
  }
  </script>
  <form name="test2Form">
    <input type="button" value="表示" onclick="test2()" />
  </form>
</body>
</html>

arguments.callee

関数の引数はargumentsのcalleeに関数への参照が保存されています。
以下の例は、テキストボックスに入力された数値から階乗を求めています。
arguments.callee()で自分自身を再帰呼び出しを実行しています。171以上を入力すると無限大と表現されます。

call

callを使うとthisのオブジェクトを指定して関数を呼び出すことができます。
以下の例では実行ボタンをクリックするとOBJ1の関数をOBJ2オブジェクトを指定して呼び出しています。 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id3"></span>
  <script type="text/javascript">
  var OBJ1={
    name:"鶴",
    bar:function(age){ return this.name+" "+age; }
  }
  var OBJ2={
    name:"亀"
  }
  function test3(){
    var o=document.getElementById('id3');
    o.innerHTML=OBJ1.bar.call(OBJ2,10000);
  }
  </script>
  <form name="test3Form">
    <input type="button" value="実行" onclick="test3()" />
  </form>
</body>
</html>

apply

applyを使うとthisのオブジェクトを指定して関数を呼び出すことができます。
以下の例では表示1ボタンをクリックするとOBJ3の関数をOBJ4オブジェクトを指定して呼び出しています。callとの違いは引数を配列で渡している点です。
配列の引数を展開することができるので、例えば最大値を求めるMath.maxに配列を渡すときに使うことができます。(JavaScriptのバージョン(ES6)では直接配列を引数として渡すことができる。) 表示2ボタンをクリックすると配列の最大値を表示します。 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id4"></span>
  
  <script type="text/javascript">
  var OBJ3={
    name:"鶴",
    bar:function(age1,age2){ return this.name+" "+age1+" "+age2; }
  }
  var OBJ4={
    name:"亀"
  }
  function test4(){
    var o=document.getElementById('id4');
    var a=[ 2,3,4,5 ];
    o.innerHTML=OBJ3.bar.apply(OBJ4,[10000,1000])+Math.max(a);
  }
  function test5(){
    var o=document.getElementById('id4');
    var a=[ 2,3,4,5 ];
    o.innerHTML=Math.max.apply(null,a);
  }
  </script>
  <form name="test4Form">
    <input type="button" value="表示1" onclick="test4()" />
    <input type="button" value="表示2" onclick="test5()" />
  </form>
</body>
</html>

クロージャ

クロージャを使うとオブジェクトの変数・関数をカプセル化(プライベート)用いることができます。
以下の例では、nameとsetNameをカプセル化しています。getName,sets関数、ageは公開しています。
実行ボタンをクリックすると鶴 100が表示されます。 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id6"></span>
  <script type="text/javascript">
  var OBJ6=function(n,a){
    var name=n; // カプセル化
    this.age=a; // 公開
    this.getName=function(){ // 公開
      return name;
    }
    var setName=function(n){ // カプセル化
      name=n;
    }
    this.sets=function(n,a){ // 公開
      setName(n);
      this.age=a;
    }
  }
  function test6(){
    var o=document.getElementById('id6');
    var obj=new OBJ6("亀",10000);
    obj.sets("鶴",1000);
    obj.age=100;
    obj.name="error"; // カプセル化されているので変更できない
    o.innerHTML=obj.getName()+" "+obj.age;
  }
  </script>
  <form name="test6Form">
    <input type="button" value="実行" onclick="test6()" />
  </form>
</body>
</html>

ビルドイン関数

どのオブジェクトにも属さない標準でサポートされている関数です。

isFinite()

引数を数値変換し NaN, +∞, -∞ であれば false, そうでなければ true

eval()

eval()は引数で与えられた文字列を式として評価
例えば"10+10"は20を返します。

encodeURIComponent()

文字列をURIエンコード
#$&+,/:;=?@の文字もエンコードされる。

decodeURIComponent()

URIエンコードされた文字列をデコード

encodeURI()

文字列をエンコード
#$&+,/:;=?@の文字はエンコードされない。

decodeURI()

URIエンコードされた文字列をデコード

unescape()

16進エンコーディングでエスケープされた文字列をASCII文字セットにデコード。非奨励

escape()

ASCII 文字以外の文字列をエスケープした16 進エンコーディング。非奨励

isNaN()

数値かどうか判定します。数値の場合はfalseを数値でない場合はtrue

parseFloat()

浮動小数点に変換します。変換できない文字が発生したら変換をやめます。

parseInt()

整数に変換します。変換できない文字が発生したら変換をやめます。