欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】

时间:2021-05-09 07:46:57|栏目: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程序设计有所帮助。

上一篇:ajax实现输入框文字改变展示下拉列表的效果示例

栏    目:JavaScript代码

下一篇:JS实现的自定义显示加载等待图片插件(loading.gif)

本文标题:弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】

本文地址:http://www.codeinn.net/misctech/118122.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有