首页
所有分类
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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
socket.io学习教程之基本应用（二）
Apr 29 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
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
ICF-SW7600(1) S400(1) S500(1) ICF-SW07(1) S700(1) BCL3000(2) 低放电路(1) H-501(1) PL450(1) PL990(2)
You might like
颠覆常识！无色透明的咖啡诞生了（中日双语）
2021/03/03 咖啡文化
快速配置PHPMyAdmin方法
2008/06/05 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
由prototype_1.3.1进入javascript殿堂－类的初探
2006/11/06 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
Vue.js仿Metronic高级表格（一）静态设计
2017/04/17 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python BS4库的安装与使用详解
2018/08/08 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
设计师珠宝：Ylang 23
2018/05/11 全球购物
工作表现评语
2014/01/19 职场文书
学校三节实施方案
2014/06/09 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
法律专业大学生职业生涯规划书：向目标一步步迈进
2014/09/22 职场文书
质量保证书怎么写
2015/02/27 职场文书
高三语文教学反思
2016/02/16 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python