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


Posted in Javascript onAugust 07, 2019

本文实例讲述了弱类型语言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.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
js实现简单页面全屏
Sep 17 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 #Javascript
javascript for循环性能测试示例
Aug 07 #Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 #Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 #Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 #Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 #Javascript
javascript中的数据类型检测方法详解
Aug 07 #Javascript
You might like
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php木马攻击防御之道
2008/03/24 PHP
PHP define函数的使用说明
2008/08/27 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
JavaScript 基本概念
2015/01/20 Javascript
Express的路由详解
2015/12/10 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
python paramiko模块学习分享
2017/08/23 Python
python绘制直线的方法
2018/06/30 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python pip配置国内源的方法
2020/02/14 Python
python识别验证码图片实例详解
2020/02/17 Python
virtualenv介绍及简明教程
2020/06/23 Python
使用Python pip怎么升级pip
2020/08/11 Python
Python 使用office365邮箱的示例
2020/10/29 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
学生出入校管理制度
2014/01/16 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书