弱いタイプの言語javascript開発におけるいくつかのピットインスタンスの小結【変数、関数、配列、オブジェクト、役割ドメインなど】
5112 ワード
この例では、弱い言語javascriptの開発におけるいくつかのピットについて説明します.皆さんの参考にしてください.具体的には以下の通りです.
テスト1:(宣言されていない変数が自動的にグローバル変数に昇格)
テスト2:(関数内部のローカル変数の変数を上げる)
テスト3:(windowオブジェクトにプロパティをマウントし、役割ドメインをグローバルに昇格)
テスト4:(変数の昇格、局所的な役割ドメインの統合)
テスト5:(配列の長さの問題)
テスト6:(等と全等の問題)
テスト7:(タイプ関連)
テスト8:(parse関数関連)
テスト9:(変数の昇格、関数の昇格とreturn後に実行を遮断)
テスト10:(役割ドメインと関数のアップグレード)
テスト11:(変数の昇格と関数の昇格)
テスト12:(argumentsオブジェクト)
テスト13:(中間関数名、直接使用するとエラーが表示されます)
テスト14:(jsでタイマ、最後に実行され、関連する知識点はイベントループとイベントキュー)
興味のある方は、オンラインHTML/CSS/JavaScriptコードを使用してツールを実行できます.http://tools.jb51.net/code/HtmlJsRun上記のコードの実行効果をテストします.
JavaScriptに関する詳細は、「JavaScript操作DOMテクニック総括」、「JavaScriptページ要素操作テクニック総括」、「JavaScriptイベント関連操作とテクニック大全」、「JavaScript検索アルゴリズムテクニック総括」、「JavaScriptデータ構造とアルゴリズムテクニック総括」、「JavaScript遍歴アルゴリズムとテクニック総括」および「JavaScriptエラーとデバッグテクニック総括」のトピックを参照してください.
JavaScriptプログラムの設計に役立つことを願っています.
テスト1:(宣言されていない変数が自動的にグローバル変数に昇格)
test1();
function test1() {
function setName() {
name = ' '; // var ,
}
setName();
console.log(name);// ' '
}
テスト2:(関数内部のローカル変数の変数を上げる)
test2();
function test2() {
var a = 1;
function haha() {
console.log(a);
var a=1;
}
haha(); // undefined
}
テスト3:(windowオブジェクトにプロパティをマウントし、役割ドメインをグローバルに昇格)
test3();
function test3() {
var b=2;
function hehe(){
window.b = 3; // b b
console.log(b); // b test3() b 2
}
hehe();
}
テスト4:(変数の昇格、局所的な役割ドメインの統合)
test4();
function test4() {
c = 5;
function heihei() {
var c;
window.c = 3;
console.log(c); // heihei c undefined
console.log(window.c); // 3
}
heihei();
}
テスト5:(配列の長さの問題)
test5();
function test5() {
var arr = [];
arr[0] = '1';
arr[1] = 'b';
arr[9] = 100;
console.log(arr.length); // 10
}
テスト6:(等と全等の問題)
test6();
function test6() {
var a = 1;
console.log(a++); // 1
console.log(++a); // 3
console.log(null == undefined); // true
console.log(null === undefined);// false
console.log(1 == "1"); // true
console.log(1 === "1"); // false
console.log(NaN === NaN) // false;
}
テスト7:(タイプ関連)
test7();
function test7() {
console.log(typeof 1); // number
console.log(typeof "hello"); // string
console.log(typeof typeof "hello"); // string
console.log(typeof !!"hello"); // boolean
console.log(typeof /[0-9]/); // object
console.log(typeof {}); // object
console.log(typeof null); // object
console.log(typeof undefined); // undefined
console.log(typeof [1, 2, 3]); // object
console.log(toString.call([1, 2, 3])); // [object Array]
console.log(typeof function () {}); // function
}
テスト8:(parse関数関連)
test8();
function test8() {
console.log(parseInt(3.14));// 3
console.log(parseFloat('3.01aaa'));// 3.01
console.log(parseInt('aa1.2'));// NaN;
console.log(parseInt('8.00',16));// 8
console.log(parseInt('0x8',16));// 8
console.log(parseInt('8.00',10));// 8
console.log(parseInt('010',8));// 10
console.log(parseInt('1000',2));// 1000
}
テスト9:(変数の昇格、関数の昇格とreturn後に実行を遮断)
test9();
function test9() {
function bar() {
return foo;
foo = 10;
function foo(){};
}
console.log(typeof bar()); // 'function'
}
テスト10:(役割ドメインと関数のアップグレード)
test10();
function test10() {
var foo = 1;
function bar() {
foo = 10;
console.log(typeof foo);
return;
function foo(){};
}
bar(); // number
console.log(foo); // 1
}
テスト11:(変数の昇格と関数の昇格)
test11();
function test11() {
console.log(typeof a); // function
var a = 3;
function a(){};
console.log(typeof a); // number
}
テスト12:(argumentsオブジェクト)
test12();
function test12() {
function foo(a) {
console.log(a);// 1
arguments[0] = 2;
console.log(a);// 2
console.log(arguments.length);// 3
}
foo(1,3,4);
}
テスト13:(中間関数名、直接使用するとエラーが表示されます)
test13();
function test13() {
var foo = function bar(name) {
console.log("hello " + name);
}
foo("world");
console.log(bar); // bar is not defined
}
テスト14:(jsでタイマ、最後に実行され、関連する知識点はイベントループとイベントキュー)
test14();
function test14() {
function foo() {
console.log('I am foo');
}
console.log(' ');
setTimeout((function(){
console.log(' ');
}),0);
foo();
}
興味のある方は、オンラインHTML/CSS/JavaScriptコードを使用してツールを実行できます.http://tools.jb51.net/code/HtmlJsRun上記のコードの実行効果をテストします.
JavaScriptに関する詳細は、「JavaScript操作DOMテクニック総括」、「JavaScriptページ要素操作テクニック総括」、「JavaScriptイベント関連操作とテクニック大全」、「JavaScript検索アルゴリズムテクニック総括」、「JavaScriptデータ構造とアルゴリズムテクニック総括」、「JavaScript遍歴アルゴリズムとテクニック総括」および「JavaScriptエラーとデバッグテクニック総括」のトピックを参照してください.
JavaScriptプログラムの設計に役立つことを願っています.