JavaScript 関数 新しいページはコチラ

提供: yonewiki
移動: 案内, 検索
(→‎定義とオブジェクト化の同時指示)
 
10行: 10行:
  
 
サンプル
 
サンプル
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
32行: 32行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
 
[[Media:JavaScript Function yoobidashi.html|実行結果サンプル]]
 
[[Media:JavaScript Function yoobidashi.html|実行結果サンプル]]
  
39行: 39行:
 
:上記のようにするとfuncName関数のプログラムソースの文字列を取得できます。ただしIEおよびChromeといったブラウザではまったく動作しません。fireFoxのようなブラウザでは動作するようです。
 
:上記のようにするとfuncName関数のプログラムソースの文字列を取得できます。ただしIEおよびChromeといったブラウザではまったく動作しません。fireFoxのようなブラウザでは動作するようです。
 
サンプル
 
サンプル
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
62行: 62行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
 
[[Media:JavaScript Function toSource.html|実行結果サンプル]]
 
[[Media:JavaScript Function toSource.html|実行結果サンプル]]
  
73行: 73行:
  
 
サンプル
 
サンプル
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
98行: 98行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
 
[[Media:JavaScript Function argument.html|実行結果サンプル]]
 
[[Media:JavaScript Function argument.html|実行結果サンプル]]
  
116行: 116行:
  
 
サンプル
 
サンプル
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
148行: 148行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
 
[[Media:JavaScript Function arguments.html|実行結果サンプル]]
 
[[Media:JavaScript Function arguments.html|実行結果サンプル]]
  
159行: 159行:
  
 
サンプル
 
サンプル
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
206行: 206行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
 
[[Media:JavaScript Function return.html|実行結果サンプル]]
 
[[Media:JavaScript Function return.html|実行結果サンプル]]
  
224行: 224行:
  
 
サンプル
 
サンプル
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
253行: 253行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
 
[[Media:JavaScript Function parallel.html|実行結果サンプル]]
 
[[Media:JavaScript Function parallel.html|実行結果サンプル]]
  
 
== 定義とオブジェクト化の同時指示 ==
 
== 定義とオブジェクト化の同時指示 ==
 
:前述のサンプルでは、関数の定義部分と、実際に関数のオブジェクトをnewキーワードを使って、左辺値のオブジェクト名に生成する処理がわかれていましたが、以下のように記述することで、定義と生成をひとまとめにできます。
 
:前述のサンプルでは、関数の定義部分と、実際に関数のオブジェクトをnewキーワードを使って、左辺値のオブジェクト名に生成する処理がわかれていましたが、以下のように記述することで、定義と生成をひとまとめにできます。
−
*var objName1 = new Function(){ a, b, "document.write(a + b)" };
+
*var objName1 = new Function("a", "b", "document.write(a + b)");
 
:のように記述することで同時生成できます。これは何がメリットなのでしょうか？それは関数に名前を付けない無名関数のオブジェクト化をするという点にあります。無名関数ということは、関数をどこに定義しても、例えばグローバルの空間、つまりはどこからでも関数名が参照できそうな場所で定義したとしても、関数名がないので、不用意に呼び出されることはなく一度きりの関数として利用できることです。ただし、こういう関数オブジェクトを使う例というのはあまりみかけないです。分けて書いた場合と使い方はほぼ変わらないので、サンプルは必要ないかもしれませんが、念のため、サンプルを記載しておきます。
 
:のように記述することで同時生成できます。これは何がメリットなのでしょうか？それは関数に名前を付けない無名関数のオブジェクト化をするという点にあります。無名関数ということは、関数をどこに定義しても、例えばグローバルの空間、つまりはどこからでも関数名が参照できそうな場所で定義したとしても、関数名がないので、不用意に呼び出されることはなく一度きりの関数として利用できることです。ただし、こういう関数オブジェクトを使う例というのはあまりみかけないです。分けて書いた場合と使い方はほぼ変わらないので、サンプルは必要ないかもしれませんが、念のため、サンプルを記載しておきます。
  
  
 
サンプル
 
サンプル
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
284行: 284行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
 
[[Media:JavaScript Function objparallel.html|実行結果サンプル]]
 
[[Media:JavaScript Function objparallel.html|実行結果サンプル]]
  
291行: 291行:
  
 
== 呼び出し元取得 caller,constructor ==
 
== 呼び出し元取得 caller,constructor ==
 +
*function objFuncName1(){ … :document.write(objFuncName1.constructor); … ;}
 +
*function objFuncName1(){ … :document.write(objFuncName1.caller); … ;}
 +
:上記のように関数内で、関数名のプロパティ値constructorおよびcallerの値を出力することで、呼び出し元の関数名を取得することができます。具体的には以下のサンプルのとおりです。
 +
 +
 +
サンプル
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript 呼び出し元取得 caller,constructor</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript 呼び出し元取得 caller,constructor<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
var Num =10000;
 +
function funcName1(){
 +
    with(document){
 +
        write("■直接呼出し用関数funcName1 window.Num 値表示処理<br />");
 +
        write("window.Num = " + window.Num + "<br />");   
 +
    }
 +
}
 +
function objNewCreate(){
 +
    with(document){
 +
        write("■自作関数obNewCreate this.Num 初期値<br />");
 +
        write("this.Num = " + this.Num + "<br />");   
 +
    }
 +
    this.Num = 5000;
 +
    with(document){
 +
        write("■自作関数obNewCreate this.Num = 5000 代入後<br />");
 +
        write("this.Num = " + this.Num + "<br />");   
 +
    }
 +
}
 +
 +
function funcName2(nValue1, nValue2, nValue3){
 +
    with(document){
 +
        write("■引数あり関数funcName2 引数値表示処理<br />");
 +
        write("nValue1 = " + nValue1 + ", nValue2 = " + nValue2 + ", nValue3 = " + nValue3 + "<br />");   
 +
        write("引数の総数funcName2.arity = " + funcName2.arity + "<br />");   
 +
        write("引数の総数funcName2.arguments.length = " + funcName2.arguments.length + "<br />");   
 +
        for(var n in funcName2.arguments){
 +
            write("引数の総数funcName2.arguments[" + n + "] = " + funcName2.arguments[n] + "<br />");
 +
        }   
 +
    }
 +
    return nValue1 * nValue2 * nValue3;
 +
}
 +
function objFuncName1(nValue1,nValue2,nValue3){
 +
    this.arg3 = nValue3;
 +
    objFuncName3.apply(this, arguments);
 +
    with(document){
 +
        write("■objFuncName1呼び出し<br />");
 +
        write("objFuncName1.constructor = " + objFuncName1.constructor + "<br />");//☆☆☆
 +
        write("objFuncName1.caller = " + objFuncName1.caller + "<br />");//☆☆☆
 +
    }
 +
}
 +
function objFuncName2(nValue1,nValue2,nValue3){
 +
    this.arg3 = nValue3;
 +
    objFuncName3.call(this, nValue1, nValue2);
 +
    with(document){
 +
        write("■objFuncName2呼び出し<br />");
 +
        write("objFuncName2.constructor = " + objFuncName2.constructor + "<br />");//☆☆☆
 +
        write("objFuncName2.caller = " + objFuncName2.caller + "<br />");//☆☆☆
 +
    }
 +
}
 +
function objFuncName3(nValue1,nValue2){
 +
    this.arg1 = nValue1;
 +
    this.arg2 = nValue2;
 +
    with(document){
 +
        write("■objFuncName3呼び出し<br />");
 +
        write("objFuncName3.constructor = " + objFuncName3.constructor + "<br />");//☆☆☆
 +
        write("objFuncName3.caller = " + objFuncName3.caller + "<br />");//☆☆☆
 +
    }
 +
}
 +
 +
with(document){
 +
    write("<br />");
 +
    write("◎Create1オブジェクト生成 new<br />");
 +
}
 +
 +
objNewCreate1 = new objNewCreate();
 +
 +
with(document){
 +
 +
    write("<br />");
 +
    write("■オブジェクトにぶら下げた変数プロパティの出力<br />");
 +
    write("objNewCreate1.Num = " + objNewCreate1.Num + "<br />");
 +
 +
    write("<br />");
 +
    write("■トップレベルからの関数呼び出し オブジェクト生成無し。<br />");
 +
    write("Num = " + Num + "<br />");   
 +
}
 +
 +
objDirectCreate1 = new function(){
 +
    this.Num = 1048;
 +
    this.Num2Power10 = 1024;
 +
    with(document){
 +
        write("■同時生成関数定義呼び出し<br />");
 +
        write("this.Num = " + this.Num + ", this.Num2Power10 = " + this.Num2Power10 + "<br />");
 +
    }   
 +
}
 +
 +
with(document){
 +
    write("<br />");
 +
    write("■同時生成関数定義呼び出し時生成オブジェクト<br />");
 +
    write("objDirectCreate1.Num = " + objDirectCreate1.Num + "<br />");   
 +
    write("objDirectCreate1.Num2Power10 = " + objDirectCreate1.Num2Power10 + "<br />");   
 +
}
 +
 +
 +
var nValue1 = funcName2(1024, 65535, 1024);
 +
with(document){
 +
    write("<br />");
 +
    write("■引数付き関数呼び出し結果<br />");
 +
    write("nValue1 = " + nValue1 + "<br />"); 
 +
}
 +
 +
with(document){
 +
    write("<br />");
 +
    write("■apply結果<br />");
 +
}
 +
var objFunc1 = new objFuncName1(1024, 65535, 1024);
 +
with(document){
 +
    write("<br />");
 +
    write("■生成したオブジェクトのプロパティ値表示<br />");
 +
    write("objFunc1.arg1 = " + objFunc1.arg1 + ", objFunc1.arg2 = " + objFunc1.arg2 + ", objFunc1.arg3 = " + objFunc1.arg3 + "<br />");   
 +
}
 +
 +
 +
 +
with(document){
 +
    write("<br />");
 +
    write("■call結果<br />");
 +
}
 +
var objFunc2 = new objFuncName2(1024, 65535, 1024);
 +
with(document){
 +
    write("<br />");
 +
    write("■生成したオブジェクトのプロパティ値表示<br />");
 +
    write("objFunc2.arg1 = " + objFunc2.arg1 + ", objFunc2.arg2 = " + objFunc2.arg2 + ", objFunc2.arg3 = " + objFunc2.arg3 + "<br />");   
 +
}
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
 +
</syntaxhighlight2>
 +
[[Media:JavaScript Function caller.html|実行結果サンプル]]
  
 
== 関数オブジェクトからの関数呼び出し call,aplly ==
 
== 関数オブジェクトからの関数呼び出し call,aplly ==
 +
*function objFuncName2(){ … :objFuncName1.call(this, … ); … ;}
 +
*function objFuncName2(){ … :objFuncName1.aplly(this, … ); … ;}
 +
:上記のように関数内で、関数名のメソッド(関数の中の関数のこと)callおよびapllyを呼び出すことで、自分自身の関数オブジェクトであるthisを使って、受け取った引数をそのまま呼び出したい関数にも引数を渡せる仕組みになっています。引数をそのまま横流しできるというのは便利な場合もあります。具体的には以下のサンプルのとおりに利用します。
 +
  
−
== 記事作成用テンプレ ==
 
 
サンプル
 
サンプル
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
−
</syntaxhighlight>
+
<HTML>
−
[[Media:JavaScript Function xxx.html|実行結果サンプル]]
+
<HEAD>
 +
<TITLE>JavaScript 関数オブジェクトからの関数呼び出し call,aplly </TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript 関数オブジェクトからの関数呼び出し call,aplly <br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
var Num =10000;
 +
function funcName1(){
 +
    with(document){
 +
        write("■直接呼出し用関数funcName1 window.Num 値表示処理<br />");
 +
        write("window.Num = " + window.Num + "<br />");   
 +
    }
 +
}
 +
function objNewCreate(){
 +
    with(document){
 +
        write("■自作関数obNewCreate this.Num 初期値<br />");
 +
        write("this.Num = " + this.Num + "<br />");   
 +
    }
 +
    this.Num = 5000;
 +
    with(document){
 +
        write("■自作関数obNewCreate this.Num = 5000 代入後<br />");
 +
        write("this.Num = " + this.Num + "<br />");   
 +
    }
 +
}
 +
 
 +
function funcName2(nValue1, nValue2, nValue3){
 +
    with(document){
 +
        write("■引数あり関数funcName2 引数値表示処理<br />");
 +
        write("nValue1 = " + nValue1 + ", nValue2 = " + nValue2 + ", nValue3 = " + nValue3 + "<br />");   
 +
        write("引数の総数funcName2.arity = " + funcName2.arity + "<br />");   
 +
        write("引数の総数funcName2.arguments.length = " + funcName2.arguments.length + "<br />");   
 +
        for(var n in funcName2.arguments){
 +
            write("引数の総数funcName2.arguments[" + n + "] = " + funcName2.arguments[n] + "<br />");
 +
        }   
 +
    }
 +
    return nValue1 * nValue2 * nValue3;
 +
}
 +
function objFuncName1(nValue1,nValue2,nValue3){
 +
    this.arg3 = nValue3;
 +
    objFuncName3.apply(this, arguments);//☆☆☆
 +
    with(document){
 +
        write("■objFuncName1呼び出し<br />");
 +
        write("objFuncName1.constructor = " + objFuncName1.constructor + "<br />");
 +
        write("objFuncName1.caller = " + objFuncName1.caller + "<br />");
 +
    }
 +
}
 +
function objFuncName2(nValue1,nValue2,nValue3){
 +
    this.arg3 = nValue3;
 +
    objFuncName3.call(this, nValue1, nValue2);//☆☆☆
 +
    with(document){
 +
        write("■objFuncName2呼び出し<br />");
 +
        write("objFuncName2.constructor = " + objFuncName2.constructor + "<br />");
 +
        write("objFuncName2.caller = " + objFuncName2.caller + "<br />");
 +
    }
 +
}
 +
function objFuncName3(nValue1,nValue2){
 +
    this.arg1 = nValue1;
 +
    this.arg2 = nValue2;
 +
    with(document){
 +
        write("■objFuncName3呼び出し<br />");
 +
        write("objFuncName3.constructor = " + objFuncName3.constructor + "<br />");
 +
        write("objFuncName3.caller = " + objFuncName3.caller + "<br />");
 +
    }
 +
}
 +
 
 +
with(document){
 +
    write("<br />");
 +
    write("◎Create1オブジェクト生成 new<br />");
 +
}
 +
 
 +
objNewCreate1 = new objNewCreate();
 +
 
 +
with(document){
 +
 
 +
    write("<br />");
 +
    write("■オブジェクトにぶら下げた変数プロパティの出力<br />");
 +
    write("objNewCreate1.Num = " + objNewCreate1.Num + "<br />");
 +
 
 +
    write("<br />");
 +
    write("■トップレベルからの関数呼び出し オブジェクト生成無し。<br />");
 +
    write("Num = " + Num + "<br />");   
 +
}
 +
 
 +
objDirectCreate1 = new function(){
 +
    this.Num = 1048;
 +
    this.Num2Power10 = 1024;
 +
    with(document){
 +
        write("■同時生成関数定義呼び出し<br />");
 +
        write("this.Num = " + this.Num + ", this.Num2Power10 = " + this.Num2Power10 + "<br />");
 +
    }   
 +
}
 +
 
 +
with(document){
 +
    write("<br />");
 +
    write("■同時生成関数定義呼び出し時生成オブジェクト<br />");
 +
    write("objDirectCreate1.Num = " + objDirectCreate1.Num + "<br />");   
 +
    write("objDirectCreate1.Num2Power10 = " + objDirectCreate1.Num2Power10 + "<br />");   
 +
}
 +
 
 +
 
 +
var nValue1 = funcName2(1024, 65535, 1024);
 +
with(document){
 +
    write("<br />");
 +
    write("■引数付き関数呼び出し結果<br />");
 +
    write("nValue1 = " + nValue1 + "<br />"); 
 +
}
 +
 
 +
with(document){
 +
    write("<br />");
 +
    write("■apply結果<br />");
 +
}
 +
var objFunc1 = new objFuncName1(1024, 65535, 1024);
 +
with(document){
 +
    write("<br />");
 +
    write("■生成したオブジェクトのプロパティ値表示<br />");
 +
    write("objFunc1.arg1 = " + objFunc1.arg1 + ", objFunc1.arg2 = " + objFunc1.arg2 + ", objFunc1.arg3 = " + objFunc1.arg3 + "<br />");   
 +
}
 +
 
 +
 
 +
 
 +
with(document){
 +
    write("<br />");
 +
    write("■call結果<br />");
 +
}
 +
var objFunc2 = new objFuncName2(1024, 65535, 1024);
 +
with(document){
 +
    write("<br />");
 +
    write("■生成したオブジェクトのプロパティ値表示<br />");
 +
    write("objFunc2.arg1 = " + objFunc2.arg1 + ", objFunc2.arg2 = " + objFunc2.arg2 + ", objFunc2.arg3 = " + objFunc2.arg3 + "<br />");   
 +
}
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
 
 +
</syntaxhighlight2>
 +
[[Media:JavaScript Function call.html|実行結果サンプル]]
  
  
 
[[JAVA Script#リファレンス]]に戻る。
 
[[JAVA Script#リファレンス]]に戻る。

2021年2月19日 (金) 00:00時点における最新版

「https://www.yo-net.jp/yonewiki/index.php?title=JavaScript_%E9%96%A2%E6%95%B0&oldid=10445」から取得

個人用ツール
名前空間

変種
操作
案内
ツールボックス