弱类型语言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程序设计有所帮助。

(0)

相关推荐

  • 基于js粘贴事件paste简单解析以及遇到的坑

    在用户执行粘贴操作的时候,js能够获得剪切板的内容,本文讨论一下这个问题. 目前只有Chrome支持获取剪切板中的图片数据.还好需要这个功能的产品目前只支持Chrome和Safari,一些Chrome的新特性是可以尽情使用了,还是能够覆盖到大部分用户的.所以本文只讨论Chrome如何使用和如何阻止Safari,原理大概了解了,再研究其他浏览器相关的问题就容易多了. paste事件 可以用js给页面中的元素绑定paste事件的方法,当用户鼠标在该元素上或者该元素处于focus状态,绑定到paste

  • JavaScript字符串转数字的5种方法及遇到的坑

    String转换为Number有很多种方式,我可以想到的有5种! parseInt(num); // 默认方式 (没有基数) parseInt(num, 10); // 传入基数 (十位数) parseFloat(num) // 浮点数 Number(num); // Number 构造器 ~~num //按位非 num / 1 // 除一个数 num * 1 // 乘一个数 num - 0 // 减去0 +num // 一元运算符 "+" 选择哪一种呢?什么时候选择它?为什么选择这种

  • Javascript中构造函数要注意的一些坑

    前言 最近在家看书:<你不知道的Javascript>,看到构造函数调用时会绑定this,就顺便打开控制台输了一些代码,详细测试了一下. 构造函数简单的讲,即定义出来专供new 式调用的函数. 如: function A(b) { this.b = b || 'bbb'; } 然后你就可以通过new ,来构建一个 A 的实例: var a = new A('B') 但是,一个首要的坑是,构造函数与一个普通函数并无不同,如果你故意不使用new,或忘记用new,都会得到奇怪的错误: var aa

  • 使用PHP json_decode可能遇到的坑与解决方法

    前言 最近在做网站 的时候用到了json_decode函数,发现了一个问题,现在总结分享出来供大家参考学习,话不多说了,来一起看看详细的介绍吧. 场景: 某项目客户反馈,输出的结果 JSON 中有个要求为对象的数据字段,在某些情况下返回的是 [] 而不是 {}:数据由公司其他部门提供,查看原始数据的时候,没有发现任何问题:后来因为要加入某些预处理,在获取到其他部门的 JSON 数据之后进行解码并对某个字段进行处理:然而,在处理完之后再次使用 JSON 输出,发现结果已经不是我们想要的了. 原始数

  • JS大坑之19位数的Number型精度丢失问题详解

    More 本项目仅供爬取体验,每次访问都会实时爬取数据,所以数据返回速度会比较慢,实际操作应该是定时爬取数据然后将数据存进数据库,数据从数据库返回从而提高数据返回效率. 但项目很基础,可以作为以上各个node模块最基础的练手使用,希望可以帮到大家

  • JavaScript代码编写中各种各样的坑和填坑方法

    坑"这个字,在此的意思是"陷阱".由于 JavaScript "弱语言"的性质,使得其在使用过程中异常的宽松灵活,但也极为容易"中招".这些坑往往隐藏着,所以必须擦亮双眼,才能在学习与应用 JS 的道路上走的一帆风顺. 一.全局变量 JavaScript 通过函数管理作用域.在函数内部声明的变量只在这个函数内部,函数外面不可用.另一方面,全局变量就是在任何函数外面声明的或是未声明直接简单使用的. "未声明直接简单使用"

  • JS面试题大坑之隐式类型转换实例代码

    1.1-隐式转换介绍 在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算 这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换 例如1 > "0"这行代码在js中并不会报错,编译器在运算符时会先把右边的"0"转成数字0`然后在比较大小 1.2-隐式转换规则 转成string类型: +(字符串连接符) 2..转成number类型:++/--(自增自减运算符

  • JavaScript中使用typeof运算符需要注意的几个坑

    typeof是一个运算符,它对操作数返回的结果是一个字符串,有6种(只针对ES,不包含HOST环境对象). 1.'undefined' 2.'boolean' 3.'string' 4.'number' 5.'object' 6.'function' 因为它本身是运算符,它不是函数,使用时没必要加个小括号. 复制代码 代码如下: if (typeof(obj) === 'undefined') {     // ... } typeof用来判断类型,它有几个坑 1. 对null返回是'objec

  • 对象题目的一个坑 理解Javascript对象

    这一篇的例子,主要是来引起对Javascript对象的理解及注意的.其实是一种面试时的一个坑,实际项目中也是很少用得到,但是为了提高警惕性,我们来看这个例子: 代码名称 var first = {}; var second = {k:"second"}; var third = {k:"third"}; first[second] = 100; first[third] = 200; console.log(first[second])//这里会输出什么内容呢? 如

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

    本文实例讲述了弱类型语言javascript开发中的一些坑.分享给大家供大家参考,具体如下: 测试1: (未声明变量自动提升为全局变量) test1(); function test1() { function setName() { name = '张三'; // 此处没有var声明,提升至全局 } setName(); console.log(name);// '张三' } 测试2: (函数内部局部变量的变量提升) test2(); function test2() { var a = 1;

  • 弱类型语言javascript中 a,b 的运算实例小结

    本文实例讲述了弱类型语言javascript中 a,b 的运算.分享给大家供大家参考,具体如下: 下面有七个闭包小函数,用来测试 a,b 的 输出结果 测试1:(当a为true,b为false的时候,输出的是false) !function() { var a = true,b = false; console.log((a,b) +' test1'); // false test1 }(); 测试2:(当a为true,b为true的时候,输出的是true) !function() { var

  • PHP弱类型语言中类型判断操作实例详解

    本文实例讲述了PHP弱类型语言中类型判断操作.分享给大家供大家参考,具体如下: 1.php一个数字和一个字符串进行比较或者进行运算时,PHP会把字符串转换成数字再进行比较.PHP转换的规则的是:若字符串以数字开头,则取开头数字作为转换结果,若无则输出0. 例如:123abc转换后应该是123,而abc则为0,0==0这当然是成立的.具体可以参考官方手册:如果比较一个整数和字符串,则字符串会被转换为整数 $a = ($b=4)+5; echo $a; //9 echo '<p>'; var_du

  • C语言多线程开发中死锁与读写锁问题详解

    目录 死锁 读写锁 死锁 有时,一个线程需要同时访问两个或更多不同的共享资源,而每个资源又都由不同的互斥量管理.当超过一个线程加锁同一组互斥量时,就有可能发生死锁: 两个或两个以上的进程在执行过程中,因争夺共享资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁. 死锁的几种场景: 忘记释放锁 重复加锁(重复加相同的锁) 多线程多锁,抢占锁资源 //多线程多锁,抢占锁资源 #include <stdio.h> #include <pt

  • 在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法

    easyUI是jquery的一个插件,是民间的插件.easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码.html代码和Css样式.我们在导入easyUI库后,可以直接复制粘贴里面的代码,从而简单轻便地初步设置网页. 首先导入easyUI函数库: <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

  • javascript 开发之百度地图使用到的js函数整理

     javascript 开发之百度地图使用到的js函数整理 接项目用到的地图,客户要求用百度地图,没办法只好用百度地图,这里总结一下,写的一些函数,注释比较详细! //创建和初始化地图函数: function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMarker();//向地图中添加marker } //创建地图函数: function createMap(){ var m

  • Java语言多线程终止中的守护线程实例

    Java中线程分为两种类型:用户线程和守护(服务)线程.通过Thread.setDaemon(false)设置为用户线程;通过Thread.setDaemon(true)设置为守护线程;不设置则默认为用户线程. 结束单线程用 Thread.interrupt() 方法,多线程结束则需要设置守护线程.当不存在用户线程时,守护线程就会全部终结(可以理解为:守护线程是服务线程,用户线程是被服务线程,用户线程(被服务线程)全都没有了,服务线程便没有存在意义而自动终结) 例子: class StopThr

  • IOS 开发中画扇形图实例详解

    IOS 开发中画扇形图实例详解 昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了. 首先我们需要了解一个uiview的方法 -(void)drawRect:(CGRect)rect 我们知道了这个方法,就可以在自定义UIView的子类的- (void)drawRect:(CGRect)rect里面绘图了,关于drawrect的调用周期,网上也是一找一大堆,等下我会整理一下,转载一篇供你们参考.

  • Android 开发中使用Linux Shell实例详解

    Android 开发中使用Linux Shell实例详解 引言 Android系统是基于Linux内核运行的,而做为一名Linux粉,不在Android上面运行一下Linux Shell怎么行呢? 最近发现了一个很好的Android Shell工具代码,在这里分享一下. Shell核心代码 import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.

  • Echarts在Taro微信小程序开发中的踩坑记录

    背景 近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路. 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,如下: echarts-for-weixin--echarts微信小程序版本 wx-charts--基于微信小程序的图表库 对比两款图表库优缺点刚好相反. echarts-for-weixin:功能强大,但体积非常大 wx-charts:功能相对简单,但体积小 由于笔者对e

随机推荐