javascript備忘録

備忘録:1コンストラクタ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>0611javascript</title>
<script type="text/javascript">
文字列の数値変換 ///////////////////
var n = '123';
document.write(Number(n));
document.write(parseFloat(n));
document.write(parseInt(n));

文字列を数値に変換した際の型判定////////
document.write(typeof('123' - 0));

文字列で渡されたメソッドををeval関数で解析///////
var str ='window.alert("evel関数")';
eval(str);
関数・三角形の面積(function命令文)

function sankaku(base,height){
return base*height/2;
}
document.write('三角形の面積' + sankaku(5,10));

関数・三角形の面積(コンストラクタ:書き方1)
var trailangle = new Function('base','height','return base * height/2;');
document.write('三角形の面積:' + trailangle(5,2));
document.write('<br />');
関数・三角形の面積(コンストラクタ:書き方2、new演算子を省略してあたかもグローバル関数であるように記述することも可能)
var trailangle = Function('base','height','return base * height/2;' );
document.write('三角形の面積:' + trailangle(5,2));

コンストラクタを使用するメリットは関数本体を文字列として定義できる
var param = 'height,width';
var formula = 'return height * width/2;';
var diamond = new Function(param,formula);

document.write('ひし形の面積:' + diamond(5,2));

//関数 三角形の面積:関数リテラルでの書き方
var triangle = function(base,height){
return base * height/2;
};
document.write('三角形の面積:' + triangle(5,2) );
function命令と関数リテラルは似ているが以下の違いがある
function命令 関数triangleを直接定義している
関数リテラル function(base,height){}と名前のない関数を定義した上で変数traiangleに格納している(宣言した時点で名前を持っていない「匿名関数、、無名関数」と呼ばれる)

 

グローバル変数とローカル変数
scope = 'Global Variable';
function getValue(){
scope = 'Local Variable';
return scope;
}
document.write(getValue());
document.write('<br />');
document.write(scope);

varを使わずに宣言された変数は全てグローバル変数とみなす
ローカル変数を定義するには必ずvar命令を使用する

スコープの解釈が変わる関数リテラルとコンストラクタ関数
var scope = 'Global Variable';
function checkScope(){
var scope = 'Local Variable';
var f_lit = function(){return scope;};
document.write(f_lit());
var f_con = new Function('return scope');
document.write(f_con());
}
checkScope();
javascriptは引数の和をチェックしない
function showMessage(value){
document.write(value);
}
showMessage();
showMessage('山田');
showMessage('山田','鈴木');
引数の妥当性をチェックする
argumentオブジェクトを使って与えられた引数の数と要求するそれの数が異なる場合にはエラーを返す
function showMessage(value){
if(arguments.length != 1){
throw new Error('引数の数が間違っています' + arguments.length);
}
document.write(value);
}
try{
showMessage('山田','鈴木');
}catch (e){//Errorオブジェクトを受け取る変数e
window.alert(e.message);//Errorオブジェクトのmassageプロパティ
}

 

引数の数が違うときに渡されるundefindを利用したデフォルト値を設定する
function traiangle(base,height){
if(base == undefined){base = 1};
if(height == undefined){height= 1};
return base * height /2;
}
document.write(traiangle(5));//省略できる引数は後ろの引数のみ

 

★高階関数
function arrayWalk(data,f){
for(var key in data){
f(key,data[key]);
}
}
var result = 0;
function sumElement(key,value){
result += value;
}
function showElement(key,value){
document.write(key + ':' + value);
// }
var ary = [1,2,3,4,16];
arrayWalk(ary,sumElement);
document.write('合計:' + result);
★を匿名関数で書き換える
function arryWalk(data,f){
for(var key in data){
f(key,data[key]);
}
}
var arry = [1,2,4,8,16];
arryWalk(
arry,
function (key,value){
document.write(key + ':' + value);
}
);

スコープチェーンの振る舞い
var y = 'Global';
function outerFunc(){
var y = 'Local Outer';
function innerFunc(){
var z = 'Local Inner';
document.write(z);
document.write(y);
document.write(x);
}
innerFunc();s
}
outerFunc()

 

クロージャ
function outerFunc(){
function innerFunc(){
alert('hello');
}
innerFunc();
}
outerFunc();

無名関数を宣言と同時に即実行
(function(){alert('fafafa')})();
関数を返す関数
function outer(){
var innner = function(){
alert('hellow');
}
return innner;
}
var f = outer();
f();
function outer(){
var x = 'ken';
return function(){
alert(x);
}
}
var c = outer();
c();

function outer2(){
var x = 1;
return function(){
alert(x);
x = x +1;
}
}
var s = outer2();
s();
s();
s();

</script>

</head>
<body>
<p>fafafa</p>
</body>
</html>