首页
所有分类
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 相关文章推荐
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
微信小程序实现日历功能
Nov 27 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
如何在JavaScript中使用localStorage详情
Feb 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
sortInts(1) Pool(1) Hudi(1) Apache(17) Flutter(2) WebSockets(3) Tkinter(4) 数据重复(1) feDisplacementMap(1) Navigator(1)
You might like
php调用Google translate_tts api实现代码
2013/08/07 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
php compact 通过变量创建数组
2016/11/15 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
漂亮的widgets，支持换肤和后期开发新皮肤
2007/04/23 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css，后台是c#)
2010/06/02 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
python执行get提交的方法
2015/04/29 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
美国钻石商店：Zales
2016/11/20 全球购物
Maje德国官网：法国女性成衣品牌
2017/02/10 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
上课打牌的检讨书
2014/02/15 职场文书
英语专业求职信
2014/07/08 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
七一慰问简报
2015/07/20 职场文书
学生病假条范文
2015/08/17 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
python中__slots__节约内存的具体做法
2021/07/04 Python
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
MySQL池化框架学习接池自定义
2022/07/23 MySQL