2022年10月25日 (火) 06:07にYo-netによる

2022-10-25T06:07:37Z

← 古い版		2022年10月25日 (火) 15:07時点における版
10行目:		10行目:

	サンプル		サンプル
	<Syntaxhighlight lang="javascript" line start="1">		<Syntaxhighlight lang="javascript" line start=1+1-1>
	<HTML>		<HTML>
	<HEAD>		<HEAD>
39行目:		39行目:
	:上記のようにするとfuncName関数のプログラムソースの文字列を取得できます。ただしIEおよびChromeといったブラウザではまったく動作しません。fireFoxのようなブラウザでは動作するようです。		:上記のようにするとfuncName関数のプログラムソースの文字列を取得できます。ただしIEおよびChromeといったブラウザではまったく動作しません。fireFoxのようなブラウザでは動作するようです。
	サンプル		サンプル
	<Syntaxhighlight lang="javascript" line start="1">		<Syntaxhighlight lang="javascript" line start=1+1-1>
	<HTML>		<HTML>
	<HEAD>		<HEAD>
73行目:		73行目:

	サンプル		サンプル
	<Syntaxhighlight lang="javascript" line start="1">		<Syntaxhighlight lang="javascript" line start=1+1-1>
	<HTML>		<HTML>
	<HEAD>		<HEAD>
116行目:		116行目:

	サンプル		サンプル
	<Syntaxhighlight lang="javascript" line start="1">		<Syntaxhighlight lang="javascript" line start=1+1-1>
	<HTML>		<HTML>
	<HEAD>		<HEAD>
159行目:		159行目:

	サンプル		サンプル
	<Syntaxhighlight lang="javascript" line start="1">		<Syntaxhighlight lang="javascript" line start=1+1-1>
	<HTML>		<HTML>
	<HEAD>		<HEAD>
224行目:		224行目:

	サンプル		サンプル
	<Syntaxhighlight lang="javascript" line start="1">		<Syntaxhighlight lang="javascript" line start=1+1-1>
	<HTML>		<HTML>
	<HEAD>		<HEAD>
263行目:		263行目:

	サンプル		サンプル
	<Syntaxhighlight lang="javascript" line start="1">		<Syntaxhighlight lang="javascript" line start=1+1-1>
	<HTML>		<HTML>
	<HEAD>		<HEAD>
297行目:		297行目:

	サンプル		サンプル
	<Syntaxhighlight lang="javascript" line start="1">		<Syntaxhighlight lang="javascript" line start=1+1-1>
	<HTML>		<HTML>
	<HEAD>		<HEAD>
445行目:		445行目:

	サンプル		サンプル
	<Syntaxhighlight lang="javascript" line start="1">		<Syntaxhighlight lang="javascript" line start=1+1-1>
	<HTML>		<HTML>
	<HEAD>		<HEAD>

Yo-net: ページの作成:「JAVA Script#リファレンスに戻る。 == 定義 == *function = funcName(){ … ; … ; … ; … ;} :上記のような形式でfuncNameという関数が定義できます。関数名の後ろの()内には、後の記事で説明する引数を記述し、省略した場合は引数無しの関数として動作をします。関数名の後ろの{}内には、複数の命令セットを記述し、一連の処理機能を持たせるのが関数という…」

2022-09-26T04:36:08Z

ページの作成:「JAVA Script#リファレンスに戻る。 == 定義 == *function = funcName(){ … ; … ; … ; … ;} :上記のような形式でfuncNameという関数が定義できます。関数名の後ろの()内には、後の記事で説明する引数を記述し、省略した場合は引数無しの関数として動作をします。関数名の後ろの{}内には、複数の命令セットを記述し、一連の処理機能を持たせるのが関数という…」

新規ページ

[[JAVA Script#リファレンス]]に戻る。
== 定義 ==
*function = funcName(){ … ; … ; … ; … ;}
:上記のような形式でfuncNameという関数が定義できます。関数名の後ろの()内には、後の記事で説明する引数を記述し、省略した場合は引数無しの関数として動作をします。関数名の後ろの{}内には、複数の命令セットを記述し、一連の処理機能を持たせるのが関数というものです。次の項目の呼び出しの中で具体的なもっとも単純な関数の利用サンプルの例を示します。

== 呼び出し ==
*funcName();
:前の項目のように定義した関数があれば、上記のように関数を呼び出すことが出来ます。上記の例はもっともシンプルな関数の呼び出しの例です。引数と呼ばれるものが定義されていないパターンになっています。引数付きの関数については後述の引数の記事を参照して下さい。以下に関数利用のサンプルを示します。

サンプル
<Syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 関数呼び出し</TITLE>
</HEAD>
<BODY>
JavaScript 関数呼び出し 
<SCRIPT Language="JavaScript">

</SCRIPT>
</BODY>
</HTML>
</Syntaxhighlight>
[[Media:JavaScript Function yoobidashi.html|実行結果サンプル]]

== プログラム内容出力 toSource ==
*funcName.toSource()
:上記のようにするとfuncName関数のプログラムソースの文字列を取得できます。ただしIEおよびChromeといったブラウザではまったく動作しません。fireFoxのようなブラウザでは動作するようです。
サンプル
<Syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 関数プログラム内容出力 toSource </TITLE>
</HEAD>
<BODY>
JavaScript 関数プログラム内容出力 toSource 
<SCRIPT Language="JavaScript">

</SCRIPT>
</BODY>
</HTML>
</Syntaxhighlight>
[[Media:JavaScript Function toSource.html|実行結果サンプル]]

動作するブラウザとそうではないブラウザとがあるサンプルです。いわゆるNetscape系の子孫にあるMozilaのようなブラウザが遺伝子となっているものだと動作するようになっていることが多いようです。上記のサンプルは正統派java scriptの系統を踏んでいるのかを試されるようなサンプルになっていますが、正統派の良さを万人がわかるわけではありません。老舗の店が時代錯誤で潰れてしまうようなもので、いとも簡単に世の中からは受け入れられなくなることも多々あります。時代の波に乗ることもプログラマの素養でもありますが、老舗の味の良さがわかるプログラマがいてもいいなぁとは思います。昔はこんな命令も使えたんだぜ。とか、このブラウザはこんなこともできるんだぜ。とか、それぞれの良さを知っているというのは貴重な人材といえると思いますし。否定はしません。ただ、このサンプルが動くブラウザのシェアは圧倒的に低くなってきています。

== 引数 ==
*function funcName(nValue1,nValue2) = { ... }
:上記のように関数定義の際の()の中に記述したものを引数として受け取ることを定義できます。関数のプログラム内で利用する変数を関数の呼び出し部分から受け取り、関数の処理として利用するものです。上記の例だとfuncName(10,20);のような命令で関数を呼び出すことができて、数値としての固定値を引数の1番目の変数nValue1に10が、2番目の変数nValue2に20が引き渡されます。関数の引数には、上記のように数値が入った変数だったり、オブジェクトを受け取って、複雑な変数値が構成された大きなオブジェクトを受け取り様々な値を受け取ることが出来ます。サンプルプログラムで引数の具体的な渡し方や受け取り方、活用方法を見ていただけると、わかりやすいと思います。

サンプル
<Syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 引数</TITLE>
</HEAD>
<BODY>
JavaScript 引数 
<SCRIPT Language="JavaScript">

</SCRIPT>
</BODY>
</HTML>
</Syntaxhighlight>
[[Media:JavaScript Function argument.html|実行結果サンプル]]

== 引数取得 arguments,arity ==
*funcName.arguments.length
*funcName.arity

:関数の中に受け取った引数は、関数の中で上記のように記述することで、引数の個数が上記のプロパティ値に格納されているため、その数を知ることができます。こういった現在の状態を取得するための仕組みが作られているということが、プログラム言語の標準機能の創意工夫の凄さのありがたみを感じることができます。自分で数えないといけない言語や、自分で工夫しなければならない言語もあると思います。最近考えられた言語ではこうした特別なプロパティ値を保持しているものがあらかじめ用意されている傾向があります。特に大きな組織で考えられた言語はしっかりしています。

*funcName.arguments[0];
*funcName.arguments.nValue1;funcName.arguments.nValue2;

:関数の中で上記のように記述すると、1番目の引数の値を要素0の中から取得できる。要素ではなく、引数の変数名をプロパティ値のように記述することでも引数の値を取得することができます。

サンプル
<Syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 引数取得 arguments,arity </TITLE>
</HEAD>
<BODY>
JavaScript 引数取得 arguments,arity 
<SCRIPT Language="JavaScript">

</SCRIPT>
</BODY>
</HTML>
</Syntaxhighlight>
[[Media:JavaScript Function arguments.html|実行結果サンプル]]

※arityプロパティとargument.nValue1のようなプロパティ指定は、IEやChromeでは動作しません。JAVA Scriptのややこしいのは互換性が保証されていないことですね。ECMA Scriptとか、J Scriptとか呼ばれたりする様々なJavaScriptの系図が統一されないまま、今日に至っているのが現状です。ブラウザシェア戦争の果ての、実装可否に関するプライド的な議論が巻き起こっているようです。

== 戻り値 return ==
*function funcName() = { ...; return 1; }
:上記のような関数定義の{}内の一連の処理の一番最後やその他の場所で記されたreturnというキーワードを見つけた場合、これで関数内の処理が終了すると共に、戻り値というものが関数部の処理結果として返され、関数を呼び出した際の命令の左側に代入演算子=を付加し、その左に記された変数に戻り値が代入されます。戻り値は、上記のような数値を格納する変数でも、オブジェクトが戻り値ならばオブジェクトを格納するためのオブジェクト名であっても良いです。戻り値は一つですので、複数の値をまとめて返したい場合はオブジェクトやファイル入出力といった形式で処理結果に従って、戻り値のようなものを設定する必要があります。サンプルでは関数のオブジェクト利用について、理解がないとオブジェクトの戻り値のサンプルの具体的な意味がわからないと思うので、次の項目の説明も併せて理解すると動作についての理解が深まるかと思います。

サンプル
<Syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 戻り値 return</TITLE>
</HEAD>
<BODY>
JavaScript 戻り値 return 
<SCRIPT Language="JavaScript">

</SCRIPT>
</BODY>
</HTML>
</Syntaxhighlight>
[[Media:JavaScript Function return.html|実行結果サンプル]]

== オブジェクトとしての利用 ==
:前述の項目で、オブジェクトとしての関数の利用について、しれーっとサンプルにしてしまったので、サンプルを見てもよくわからないということになってしまいますが、function objValue(){ … } 定義した関数に対して、
*objValue1 = new objValue();
:と、このように定義することで、関数自体をオブジェクトとして生成し、左辺値に指定したオブジェクト名で関数の中で設定するようなプロパティ値や関数内で生成されたオブジェクトをオブジェクトにぶら下がるオブジェクトのような形で扱うことができます。前述のサンプルのように関数内で、thisキーワードの下にプロパティ値を設定すると、生成したときのオブジェクトの下のプロパティ値と対になるようにプロパティ値を持つオブジェクトになります。つまり、objValue関数定義内にあるthis.nValue1というプロパティ値はobjValue1.nValue1というプロパティ値になります。このようなプロパティ値を複数持つことができるのがオブジェクトの性質であり、上記のサンプルではreturnキーワードで戻り値としてオブジェクトを返すことで本来1個しか、返せない戻り値でも複数の値を持つオブジェクトを返すことで複数の値を関数を呼び出した部分に処理結果を反映させることができ、複雑な関数の処理を行うことができます。

この項目のサンプルは前述のサンプルと同じですので、サンプルの掲載を省略します。

== 定義と呼び出しの同時指示 ==
:関数の定義部分と、関数の呼び出し処理がわかれていましたが、以下のように記述することで、定義をして、呼び出し用のオブジェクト作成をひとまとめにできます。
*var objName1 = function funcName(){ … };
*var objName1 = function (){ … };
:のように記述することで定義とオブジェクトを同時生成できます。これは何がメリットなのでしょうか？それは関数に名前を付けない無名関数のオブジェクト化をすることができるという点にあります。2個目の例のようにfunctionに続く、funcNameという関数名を省略することができます。無名関数ということは、関数をどこに定義しても、例えばグローバルの空間、つまりはどこからでも関数名が参照できそうな場所で定義したとしても、関数名がないので、不用意に呼び出されることはなく一度きりの関数として利用できることです。サンプルではfuncNameを与えるパターンの例を記述します。この場合は無名関数ではないので、同時に生成しただけであって、特に分けて書いた場合との違いはありません。もちろん分けて書いた場合と使い方はほぼ変わらないので、サンプルは必要ないかもしれませんが、念のため、サンプルを記載しておきます。

サンプル
<Syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 定義と呼び出しの同時指示</TITLE>
</HEAD>
<BODY>
JavaScript 定義と呼び出しの同時指示 
<SCRIPT Language="JavaScript">

</SCRIPT>
</BODY>
</HTML>
</Syntaxhighlight>
[[Media:JavaScript Function parallel.html|実行結果サンプル]]

== 定義とオブジェクト化の同時指示 ==
:前述のサンプルでは、関数の定義部分と、実際に関数のオブジェクトをnewキーワードを使って、左辺値のオブジェクト名に生成する処理がわかれていましたが、以下のように記述することで、定義と生成をひとまとめにできます。
*var objName1 = new Function("a", "b", "document.write(a + b)");
:のように記述することで同時生成できます。これは何がメリットなのでしょうか？それは関数に名前を付けない無名関数のオブジェクト化をするという点にあります。無名関数ということは、関数をどこに定義しても、例えばグローバルの空間、つまりはどこからでも関数名が参照できそうな場所で定義したとしても、関数名がないので、不用意に呼び出されることはなく一度きりの関数として利用できることです。ただし、こういう関数オブジェクトを使う例というのはあまりみかけないです。分けて書いた場合と使い方はほぼ変わらないので、サンプルは必要ないかもしれませんが、念のため、サンプルを記載しておきます。

サンプル
<Syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 定義とオブジェクト化の同時指示</TITLE>
</HEAD>
<BODY>
JavaScript 定義とオブジェクト化の同時指示 
<SCRIPT Language="JavaScript">

</SCRIPT>
</BODY>
</HTML>
</Syntaxhighlight>
[[Media:JavaScript Function objparallel.html|実行結果サンプル]]

関数オブジェクトFunction内の命令部は,カンマで区切られた引数部があって、最後の引数が命令部になります。複数の命令を;で区切りながら記述することができます。引数のそれぞれを"ダブルクォーテーションで囲う必要があるため、命令部自体でダブルクォーテーションの記述が必要な場合はエスケープシーケンスを付与して\"としなければなりません。

== 呼び出し元取得 caller,constructor ==
*function objFuncName1(){ … :document.write(objFuncName1.constructor); … ;}
*function objFuncName1(){ … :document.write(objFuncName1.caller); … ;}
:上記のように関数内で、関数名のプロパティ値constructorおよびcallerの値を出力することで、呼び出し元の関数名を取得することができます。具体的には以下のサンプルのとおりです。

サンプル
<Syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 呼び出し元取得 caller,constructor</TITLE>
</HEAD>
<BODY>
JavaScript 呼び出し元取得 caller,constructor 
<SCRIPT Language="JavaScript">

</SCRIPT>
</BODY>
</HTML>

</Syntaxhighlight>
[[Media:JavaScript Function caller.html|実行結果サンプル]]

== 関数オブジェクトからの関数呼び出し call,aplly ==
*function objFuncName2(){ … :objFuncName1.call(this, … ); … ;}
*function objFuncName2(){ … :objFuncName1.aplly(this, … ); … ;}
:上記のように関数内で、関数名のメソッド(関数の中の関数のこと)callおよびapllyを呼び出すことで、自分自身の関数オブジェクトであるthisを使って、受け取った引数をそのまま呼び出したい関数にも引数を渡せる仕組みになっています。引数をそのまま横流しできるというのは便利な場合もあります。具体的には以下のサンプルのとおりに利用します。

サンプル
<Syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 関数オブジェクトからの関数呼び出し call,aplly </TITLE>
</HEAD>
<BODY>
JavaScript 関数オブジェクトからの関数呼び出し call,aplly 
<SCRIPT Language="JavaScript">

</SCRIPT>
</BODY>
</HTML>

</Syntaxhighlight>
[[Media:JavaScript Function call.html|実行結果サンプル]]

[[JAVA Script#リファレンス]]に戻る。

JavaScript 関数 - 版の履歴

2022年10月25日 (火) 06:07にYo-netによる