弱いタイプの言語javascript開発におけるいくつかのピットインスタンスの小結【変数、関数、配列、オブジェクト、役割ドメインなど】

5112 ワード

この例では、弱い言語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プログラムの設計に役立つことを願っています.