首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Javascript中的奇葩知识,你知道吗?

Posted in Javascript onJanuary 25, 2021

久经沙场的前辈们，写了无数代码，踩了无数的坑。但有些坑，可能一辈子也踩不到摸不着，因为根本不会发生在业务代码里～～

1

Function.prototype 竟然是个函数类型。而自定义函数的原型却是对象类型。

typeof Function.prototype === 'function'; // true

function People() {}
typeof People.prototype === 'object';   // true

所以我们设置空函数可以这么做：

// OK 
const noop = Function.prototype;
// OK
const noop = () => {};

2

一个变量真的会不等于自身吗？

const x = NaN;
x !== x // true

这是目前为止js语言中唯一的一个不等于自己的数据。为什么？因为NaN代表的是一个范围，而不是一个具体的数值。
在早期的 isNaN() 函数中，即使传入字符串，也会返回true，这个问题已经在es6中修复。

isNaN('abc');    // true
Number.isNaN('abc') // false

所以如果您想兼容旧浏览器，用 x !== x 来判断是不是NaN，是一个不错的方案。

3

构造函数如果return了新的数据

// 不返回
function People() {}
const people = new People();  // People {}

// 返回数字
function People() {
 return 1;
}
const people = new People();  // People {}

// 返回新对象
function Animal() {
 return {
  hello: 'world',
 };
}
const animal = new Animal(); // { hello: 'world' }

在实例化构造函数时，返回非对象类型将不生效

4

.call.call 到底在为谁疯狂打call？

function fn1() {
 console.log(1);
}

function fn2() {
 console.log(2);
}

fn1.call.call(fn2); // 2

所以 fn1.call.call(fn2) 等效于 fn2.call(undefined)。而且无论您加多少个 .call，效果也是一样的。

5

实例后的对象也能再次实例吗？

function People() {}

const lili = new People();      // People {}
const lucy = new lili.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函数带默认参数时将生成声明作用域

var x = 10;

function fn(x = 2, y = function () { return x + 1 }) {
 var x = 5;
 return y();
}

fn();  // 3

8

函数表达式（非函数声明）中的函数名不可覆盖

const c = function CC() {
 CC = 123;
 return CC;
};

c(); // Function

当然，如果设置var CC = 123，加声明关键词是可以覆盖的。

9

严格模式下，函数的this是undefined而不是Window

// 非严格
function fn1() {
 return this;
}
fn1(); // Window

// 严格
function fn2() {
 'use strict';
 return this;
}
fn2(); // undefined

对于模块化的经过webpack打包的代码，基本都是严格模式的代码。

10

取整操作也可以用按位操作

var x = 1.23 | 0; // 1

因为按位操作只支持32位的整型，所以小数点部分全部都被抛弃

11

indexOf() 不需要再比较数字

const arr = [1, 2, 3];

// 存在，等效于 > -1
if (～arr.indexOf(1)) {

}

// 不存在，等效于 === -1
!~arr.indexOf(1);

按位操作效率高点，代码也简洁一些。也可以使用es6的includes()。但写开源库需要考虑兼容性的道友还是用indexOf比较好

12

getter/setter 也可以动态设置吗？

class Hello {
 _name = 'lucy';
 
 getName() {
  return this._name;
 }
 
 // 静态的getter
 get id() {
  return 1;
 }
}

const hel = new Hello();

hel.name;    // undefined
hel.getName(); // lucy

// 动态的getter
Hello.prototype.__defineGetter__('name', function() {
 return this._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语法糖到底是怎么继承的？

function Super() {
 this.a = 1;
}

function Child() {
 // 属性继承
 Super.call(this);
 this.b = 2;
}
// 原型继承
Child.prototype = new Super();

const child = new Child();
child.a; // 1

正式代码的原型继承，不会直接实例父类，而是实例一个空函数，避免重复声明动态属性

const extends = (Child, Super) => {
 const fn = function () {};
 
 fn.prototype = Super.prototype;
 Child.prototype = new fn();
 Child.prototype.constructor = Child;
};

15

es6居然可以重复解构对象

const obj = {
 a: {
  b: 1
 },
 c: 2
};

const { a: { b }, a } = obj;

一行代码同时获取a和a.b。
在a和b都要多次用到的情况下，普通人的逻辑就是先解构出a，再在下一行解构出b。

16

判断代码是否压缩居然也这么秀

function CustomFn() {}

const isCrashed = typeof CustomFn.name === 'string' && CustomFn.name === 'CustomFn';

17

对象===比较的是内存地址，而>=将比较转换后的值

{} === {} // false

// 隐式转换 toString()
{} >= {} // true

18

intanceof 的判断方式是原型是否在当前对象的原型链上面

function People() {}
function Man() {}
Man.prototype = new People();
Man.prototype.constructor = Man;

const man = new Man();
man instanceof People;  // true

// 替换People的原型
People.prototype = {};
man instanceof People;  // 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和形参会保持同步关系

function test(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);

如果实参传的个数不足，那么同步关系也会失效。
您也可以用use strict严格模式来避免这一行为，这样arguments就只是个副本了。

23

void是个固执的老头

void 0 === undefined     // true
void 1 === undefined     // true
void {} === undefined     // true
void 'hello' === undefined  // true
void void 0 === undefined   // true

跟谁都不沾亲~~

24

try/catch/finally也有特定的执行顺序

function fn1() {
 console.log('fn1');
 return 1;
}

function fn2() {
 console.log('fn2');
 return 2;
}

function getData() {
 try {
  throw new Error('');
 } catch (e) {
  return fn1();
 } finally {
  return fn2();
 }
}

console.log(getData());

// 打印顺序: 'fn1', 'fn2', 2

在try/catch代码块中，如果碰到return xxyyzz;关键词，那么xxyyzz会先执行并把值放在临时变量里，接着去执行finally代码块的内容后再返回该临时变量。
如果finally中也有return aabbcc，那么会立即返回新的数据aabbcc。

25

是否存在这样的变量x，使得它等于多个数字？

const x = {
 value: 0,
 toString() {
  return ++this.value;
 }
}

x == 1 && x == 2 && x == 3;  // true

通过隐式转换，这样不是什么难的事情。

26

clearTimeout 和 clearInterval 可以互换使用吗

var timeout = setTimeout(() => console.log(1), 1000);
var interval = setInterval(() => console.log(2), 800);

clearInterval(timeout);
clearTimeout(interval);

答案是：YES。大部分浏览器都支持互相清理定时器，但是建议使用对应的清理函数。

27

下面的打印顺序是？

setTimeout(() => {
 console.log(1);
}, 0);

new Promise((resolve) => {
 console.log(2);
 resolve();
}).then(() => console.log(3));

function callMe() {
 console.log(4);
}

(async () => {
 await callMe();
 console.log(5);
})();

答案是：2, 4, 3, 5, 1

主线任务：2，4
微任务：3，5
宏任务：1

28

null是object类型，但又不是继承于Object，它更像一个历史遗留的bug。鉴于太多人在用这个特性，修复它反而会导致成千上万的程序出错。

typeof null === 'object';       // true
Object.prototype.toString.call(null); // [object Null]
null instanceof Object;        // false

29

基本类型（null和undefined除外）在操作的时候，引擎会自动为数据包装成对象，操作完就销毁对象。

'abc'.substr(1);
(123).toFixed(2);

所以增加任何数据上去都会被销毁，除非修改原型链

const data = '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

函数形参带默认值时，会改变一些认知

function test(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的另一个用法吗？

function Test() {
 console.log(new.target === Test); // true
}

new Test();

如果实例了子类，那么new.target就不是Test了，通过这个方法可以实现abstract class的效果

35

+0 和 -0 是有区别的

1/+0 === Infinity
1/-0 === -Infinity

以上就是Javascript中的奇葩知识,你知道吗?的详细内容，更多关于JavaScript 奇葩知识的资料请关注三水点靠木其它相关文章！

Javascript中的奇葩知识,你知道吗?

- Author -

原罪

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
js调试系列 初识控制台
Jun 18 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
详解react服务端渲染（同构）的方法
Sep 21 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 #Vue.js
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 #Javascript
vue keep-alive的简单总结
Jan 25 #Vue.js
JS实现简易日历效果
Jan 25 #Javascript
javascript代码实现简易计算器
Jan 25 #Javascript
js简单粗暴的发布订阅示例代码
Jan 23 #Javascript
JS中循环遍历数组的四种方式总结
Jan 23 #Javascript
森海(1) YB217(1) PL-365(1) YB400(2) 直流胆(1) 东方红(1) MX500(1) 再生机(1) YB235(1) 1 Tube Radio(1)
You might like
windows xp下安装pear
2006/12/02 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
删除重复数据的算法
2006/11/23 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
python中查看变量内存地址的方法
2015/05/05 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
python实现最大优先队列
2019/08/29 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Python celery原理及运行流程解析
2020/06/13 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
英国最大的奢侈品零售网络商城：Flannels
2016/09/16 全球购物
西班牙美妆电商：Perfume’s Club（有中文站）
2018/08/08 全球购物
MyHeritage美国：家族史研究和DNA测试的领先服务
2019/05/27 全球购物
美国在线和移动免费会员制批发零售商：Boxed（移动端的Costco）
2020/01/02 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
审核会计岗位职责
2013/11/08 职场文书
就业自荐信
2013/12/04 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
股东合作协议书
2014/04/14 职场文书
老师对学生的评语
2014/04/18 职场文书
倡导文明标语
2014/06/16 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
大学生个人简历自荐信
2015/03/06 职场文书