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 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
JS实现self的resend
Jul 22 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 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
You might like
Smarty中的注释和截断功能介绍
2015/04/09 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
Python实现购物车程序
2018/04/16 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
C/C++程序员常见面试题一
2012/12/08 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
外贸主管求职简历的自我评价
2013/10/23 职场文书
新闻编辑自荐信
2013/11/03 职场文书
自我评价范文点评
2013/12/04 职场文书
个人党性剖析材料
2014/02/03 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
5s标语大全
2014/06/23 职场文书
学生评语集锦
2015/01/04 职场文书
自主招生专家推荐信
2015/03/26 职场文书
廉政承诺书2015
2015/04/28 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android