Javascript中的奇葩知识,你知道吗?
久经沙场的前辈们,写了无数代码,踩了无数的坑。但有些坑,可能一辈子也踩不到摸不着,因为根本不会发生在业务代码里~~
1
Function.prototype竟然是个函数类型。而自定义函数的原型却是对象类型。
typeofFunction.prototype==='function';//true functionPeople(){} typeofPeople.prototype==='object';//true
所以我们设置空函数可以这么做:
//OK constnoop=Function.prototype; //OK constnoop=()=>{};
2
一个变量真的会不等于自身吗?
constx=NaN; x!==x//true
这是目前为止js语言中唯一的一个不等于自己的数据。为什么?因为NaN代表的是一个范围,而不是一个具体的数值。
在早期的isNaN()函数中,即使传入字符串,也会返回true,这个问题已经在es6中修复。
isNaN('abc');//true Number.isNaN('abc')//false
所以如果您想兼容旧浏览器,用x!==x来判断是不是NaN,是一个不错的方案。
3
构造函数如果return了新的数据
//不返回 functionPeople(){} constpeople=newPeople();//People{} //返回数字 functionPeople(){ return1; } constpeople=newPeople();//People{} //返回新对象 functionAnimal(){ return{ hello:'world', }; } constanimal=newAnimal();//{hello:'world'}
在实例化构造函数时,返回非对象类型将不生效
4
.call.call到底在为谁疯狂打call?
functionfn1(){ console.log(1); } functionfn2(){ console.log(2); } fn1.call.call(fn2);//2
所以fn1.call.call(fn2)等效于fn2.call(undefined)。而且无论您加多少个.call,效果也是一样的。
5
实例后的对象也能再次实例吗?
functionPeople(){} constlili=newPeople();//People{} constlucy=newlili.constructor();//People{}
因为lili的原型链指向了People的原型,所以通过向上寻找特性,最终在Peopel.prototype上找到了构造器即People自身
6
setTimeout嵌套会发生什么奇怪的事情?
console.log(0,Date.now()); setTimeout(()=>{ console.log(1,Date.now()); setTimeout(()=>{ console.log(2,Date.now()); setTimeout(()=>{ console.log(3,Date.now()); setTimeout(()=>{ console.log(4,Date.now()); setTimeout(()=>{ console.log(5,Date.now()); setTimeout(()=>{ console.log(6,Date.now()); }); }); }); }); }); });
在0-4层,setTimeout的间隔是1ms,而到第5层时,间隔至少是4ms。
7
es6函数带默认参数时将生成声明作用域
varx=10; functionfn(x=2,y=function(){returnx+1}){ varx=5; returny(); } fn();//3
8
函数表达式(非函数声明)中的函数名不可覆盖
constc=functionCC(){ CC=123; returnCC; }; c();//Function
当然,如果设置varCC=123,加声明关键词是可以覆盖的。
9
严格模式下,函数的this是undefined而不是Window
//非严格 functionfn1(){ returnthis; } fn1();//Window //严格 functionfn2(){ 'usestrict'; returnthis; } fn2();//undefined
对于模块化的经过webpack打包的代码,基本都是严格模式的代码。
10
取整操作也可以用按位操作
varx=1.23|0;//1
因为按位操作只支持32位的整型,所以小数点部分全部都被抛弃
11
indexOf()不需要再比较数字
constarr=[1,2,3]; //存在,等效于>-1 if(~arr.indexOf(1)){ } //不存在,等效于===-1 !~arr.indexOf(1);
按位操作效率高点,代码也简洁一些。也可以使用es6的includes()。但写开源库需要考虑兼容性的道友还是用indexOf比较好
12
getter/setter也可以动态设置吗?
classHello{ _name='lucy'; getName(){ returnthis._name; } //静态的getter getid(){ return1; } } consthel=newHello(); hel.name;//undefined hel.getName();//lucy //动态的getter Hello.prototype.__defineGetter__('name',function(){ returnthis._name; }); Hello.prototype.__defineSetter__('name',function(value){ this._name=value; }); hel.name;//lucy hel.getName();//lucy hel.name='jimi'; hel.name;//jimi hel.getName();//jimi
13
0.3-0.2!==0.1//true
浮点操作不精确,老生常谈了,不过可以接受误差
0.3-0.2-0.1<=Number.EPSILON//true
14
class语法糖到底是怎么继承的?
functionSuper(){ this.a=1; } functionChild(){ //属性继承 Super.call(this); this.b=2; } //原型继承 Child.prototype=newSuper(); constchild=newChild(); child.a;//1
正式代码的原型继承,不会直接实例父类,而是实例一个空函数,避免重复声明动态属性
constextends=(Child,Super)=>{ constfn=function(){}; fn.prototype=Super.prototype; Child.prototype=newfn(); Child.prototype.constructor=Child; };
15
es6居然可以重复解构对象
constobj={ a:{ b:1 }, c:2 }; const{a:{b},a}=obj;
一行代码同时获取a和a.b。
在a和b都要多次用到的情况下,普通人的逻辑就是先解构出a,再在下一行解构出b。
16
判断代码是否压缩居然也这么秀
functionCustomFn(){} constisCrashed=typeofCustomFn.name==='string'&&CustomFn.name==='CustomFn';
17
对象===比较的是内存地址,而>=将比较转换后的值
{}==={}//false //隐式转换toString() {}>={}//true
18
intanceof的判断方式是原型是否在当前对象的原型链上面
functionPeople(){} functionMan(){} Man.prototype=newPeople(); Man.prototype.constructor=Man; constman=newMan(); maninstanceofPeople;//true //替换People的原型 People.prototype={}; maninstanceofPeople;//false
如果您用es6的class的话,prototype原型是不允许被重新定义的,所以不会出现上述情况
19
Object.prototype.__proto__===null;//true
这是原型链向上查找的最顶层,一个null
20
parseInt太小的数字会产生bug
parseInt(0.00000000454);//4 parseInt(10.23);//10
21
1+null//1 1+undefined//NaN Number(null)//0 Number(undefined)//NaN
22
实参arguments和形参会保持同步关系
functiontest(a,b,c){ console.log(a,b,c);//2,3,undefined arguments[0]=100; arguments[1]=200; arguments[2]=300; console.log(a,b,c);//100,200,undefined } test(2,3);
如果实参传的个数不足,那么同步关系也会失效。
您也可以用usestrict严格模式来避免这一行为,这样arguments就只是个副本了。
23
void是个固执的老头
void0===undefined//true void1===undefined//true void{}===undefined//true void'hello'===undefined//true voidvoid0===undefined//true
跟谁都不沾亲~~
24
try/catch/finally也有特定的执行顺序
functionfn1(){ console.log('fn1'); return1; } functionfn2(){ console.log('fn2'); return2; } functiongetData(){ try{ thrownewError(''); }catch(e){ returnfn1(); }finally{ returnfn2(); } } console.log(getData()); //打印顺序:'fn1','fn2',2
在try/catch代码块中,如果碰到returnxxyyzz;关键词,那么xxyyzz会先执行并把值放在临时变量里,接着去执行finally代码块的内容后再返回该临时变量。
如果finally中也有returnaabbcc,那么会立即返回新的数据aabbcc。
25
是否存在这样的变量x,使得它等于多个数字?
constx={ value:0, toString(){ return++this.value; } } x==1&&x==2&&x==3;//true
通过隐式转换,这样不是什么难的事情。
26
clearTimeout和clearInterval可以互换使用吗
vartimeout=setTimeout(()=>console.log(1),1000); varinterval=setInterval(()=>console.log(2),800); clearInterval(timeout); clearTimeout(interval);
答案是:YES。大部分浏览器都支持互相清理定时器,但是建议使用对应的清理函数。
27
下面的打印顺序是?
setTimeout(()=>{ console.log(1); },0); newPromise((resolve)=>{ console.log(2); resolve(); }).then(()=>console.log(3)); functioncallMe(){ console.log(4); } (async()=>{ awaitcallMe(); console.log(5); })();
答案是:2,4,3,5,1
主线任务:2,4
微任务:3,5
宏任务:1
28
null是object类型,但又不是继承于Object,它更像一个历史遗留的bug。鉴于太多人在用这个特性,修复它反而会导致成千上万的程序出错。
typeofnull==='object';//true Object.prototype.toString.call(null);//[objectNull] nullinstanceofObject;//false
29
基本类型(null和undefined除外)在操作的时候,引擎会自动为数据包装成对象,操作完就销毁对象。
'abc'.substr(1); (123).toFixed(2);
所以增加任何数据上去都会被销毁,除非修改原型链
constdata='abc'; data.x='y'; console.log(data.x);//undefined data.__proto__.x='z'; console.log(data.x);//'z'
30
数据超过了安全值就变得不安全了
Number.MAX_SAFE_INTEGER+1===Number.MAX_SAFE_INTEGER+2;//true //等价于 2**53===2**53+1;//true
31
函数形参带默认值时,会改变一些认知
functiontest(a,b=1){ //别名同步,非严格模式预期可以同步 arguments[0]=20; console.log(a);//2 } //检测函数的形参个数,预期值为:2 console.log(test.length);//1 test(123);
32
数字都是浮点类型。位运算操作时,js会先把数字转换到int类型。相对于其他语言,这算是一笔额外的性能开销。
1|0//1 1.234|0//1 1.234|0.6//1 1&1//1 1.23&1.456//1 ~1//-2 ~1.234//-2
33
赋值给location可以直接跳转
location='http://baidu.com';
34
你知道new的另一个用法吗?
functionTest(){ console.log(new.target===Test);//true } newTest();
如果实例了子类,那么new.target就不是Test了,通过这个方法可以实现abstractclass的效果
35
+0和-0是有区别的
1/+0===Infinity 1/-0===-Infinity
以上就是Javascript中的奇葩知识,你知道吗?的详细内容,更多关于JavaScript奇葩知识的资料请关注毛票票其它相关文章!