弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
本文实例讲述了弱类型语言javascript开发中的一些坑。分享给大家供大家参考,具体如下:
测试1:(未声明变量自动提升为全局变量)
test1();
functiontest1(){
functionsetName(){
name='张三';//此处没有var声明,提升至全局
}
setName();
console.log(name);//'张三'
}
测试2:(函数内部局部变量的变量提升)
test2();
functiontest2(){
vara=1;
functionhaha(){
console.log(a);
vara=1;
}
haha();//undefined
}
测试3:(给window对象挂载属性,作用域提升至全局)
test3();
functiontest3(){
varb=2;
functionhehe(){
window.b=3;//此时的b为全局变量的b
console.log(b);//此时的b是函数test3()里的b为2
}
hehe();
}
测试4:(变量提升,局部作用域的综合)
test4();
functiontest4(){
c=5;
functionheihei(){
varc;
window.c=3;
console.log(c);//函数heihei内的c为undefined
console.log(window.c);//3
}
heihei();
}
测试5:(数组的长度的问题)
test5();
functiontest5(){
vararr=[];
arr[0]='1';
arr[1]='b';
arr[9]=100;
console.log(arr.length);//10
}
测试6:(等与全等的问题)
test6();
functiontest6(){
vara=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();
functiontest7(){
console.log(typeof1);//number
console.log(typeof"hello");//string
console.log(typeoftypeof"hello");//string
console.log(typeof!!"hello");//boolean
console.log(typeof/[0-9]/);//object
console.log(typeof{});//object
console.log(typeofnull);//object
console.log(typeofundefined);//undefined
console.log(typeof[1,2,3]);//object
console.log(toString.call([1,2,3]));//[objectArray]
console.log(typeoffunction(){});//function
}
测试8:(parse函数相关)
test8();
functiontest8(){
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();
functiontest9(){
functionbar(){
returnfoo;
foo=10;
functionfoo(){};
}
console.log(typeofbar());//'function'
}
测试10:(作用域与函数提升)
test10();
functiontest10(){
varfoo=1;
functionbar(){
foo=10;
console.log(typeoffoo);
return;
functionfoo(){};
}
bar();//number
console.log(foo);//1
}
测试11:(变量提升与函数提升)
test11();
functiontest11(){
console.log(typeofa);//function
vara=3;
functiona(){};
console.log(typeofa);//number
}
测试12:(arguments对象)
test12();
functiontest12(){
functionfoo(a){
console.log(a);//1
arguments[0]=2;
console.log(a);//2
console.log(arguments.length);//3
}
foo(1,3,4);
}
测试13:(中间函数名,直接使用会报错)
test13();
functiontest13(){
varfoo=functionbar(name){
console.log("hello"+name);
}
foo("world");
console.log(bar);//此处会报错barisnotdefined
}
测试14:(在js中定时器,最后执行,涉及到的知识点是事件循环和事件队列)
test14();
functiontest14(){
functionfoo(){
console.log('Iamfoo');
}
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程序设计有所帮助。