【JavaScript】関数

2020年8月25日 16:32

関数

Function      関数

関数です。 new命令により新しい関数を生成できます。

例

setBGColor = new Function("document.bgColor='blur'")
背景色を青色にする関数を生成する。(関数名はBGColor)

calc = new Function( a , b , "return a+b")
2つの関数(a,b)を加算した結果を返す関数を生成する(関数名はcalc)

サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--

setBGColor = new Function("document.bgColor=arguments[0]");

//-->
</script>
</head>
<body>
<h2>関数</h2>

<input type="button" value="背景色変更" onclick="setBGColor('red')">
</body>
</html>

引数

arguments     引数オブジェクト
arity         引数

関数に渡される引数です。arityはarguments.lengthとは全く同じ動作をし引数の総数を替えします。

例

len = setBGColor.arguments.length
seBGColorに与えられた引数の総数を返す。

len = this.arity
自分自身の引数の総数を返す。

firstArg = this.arguments[0]
最初の引数の値のをfirstArgsに代入する

サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--

function checkArg() {
   
   newWin = window.open("","argTest");
   newWin.document.open("text/html");
   newWin.document.write("<html><head><title></title></head>");
   newWin.document.write("<body>");
   newWin.document.write("この関数の引数の総数(arity):",checkArg.arity,"<br />");
   newWin.document.write("この関数の引数の総数(arguments.length):",arguments.length,"<br />");
   
   for( i = 0 ; i  < checkArg.arity; i++ ) {
       newWin.document.write("[", i , "]", arguments[i], "<br />");
   }
   newWin.document.write("</body></html>");
   newWin.document.close();
}

//-->
</script>
</head>
<body>
<h2>引数</h2>

<input type="button" value="引数テスト" onclick="checkArg('MZ-40K','MZ-80K','MZ-80C')">

</body>
</html>

他オブジェクト呼び出し

apply    すべての引数を渡し呼び出す
call     指定した数の引数を呼び出します

オブジェクト内から他のオブジェクトを呼び出します

例

myFunc.apply(this,arguments)
与えられた引数の総数を呼び出すオブジェクトにわたす。

myFunc.call(this,"red")
"red"という値を呼び出されるオブジェクトにわたす。

サンプル<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--

function myFunc(a,b) {
   this.first = a;
   this.second = b;

}

function myFunc2( a, b, c) {
  this.third = c;
  myFunc.apply(this , arguments);
}

myObj = new myFunc2( 1 , 2 , 3 );
alert(myObj.second);

//-->
</script>
</head>
<body>
<h2>他オブジェクト呼び出し</h2>


</body>
</html>

呼び出し元

caller       呼び出し元関数
constructor  呼び出し元関数

呼び出し元の関数を返します。

例

alert(myFunc.caller)
myFunc関数を呼び出した関数の内容を表示する

alert(myFunc.constructor)
myFunc関数を呼び出した関数名を表示する

サンプル

<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--

function xCaller() {
   alert(xCaller.caller + "から呼ばれました。");
}

function xConst() {
   alert(xConst.constructor+"から呼ばれました。");
}

//-->
</script>
</head>
<body>
<h2>呼び出し元</h2>

<input type="button" value="caller" onclick="xCaller()">
<input type="button" value="constructor" onclick="xConst()">

</body>
</html>

JavaScriptをもっと学びたい人はこちらの本！

この記事が気に入ったらサポートをしてみませんか？