电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Javascript中的奇葩知識,你知道嗎?

瀏覽:137日期:2023-10-05 09:29:25

久經沙場的前輩們,寫了無數代碼,踩了無數的坑。但有些坑,可能一輩子也踩不到摸不著,因為根本不會發生在業務代碼里~~

1

Function.prototype 竟然是個函數類型。而自定義函數的原型卻是對象類型。

typeof Function.prototype === ’function’; // truefunction People() {}typeof People.prototype === ’object’; // true

所以我們設置空函數可以這么做:

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

一個變量真的會不等于自身嗎?

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

這是目前為止js語言中唯一的一個不等于自己的數據。為什么?因為NaN代表的是一個范圍,而不是一個具體的數值。在早期的 isNaN() 函數中,即使傳入字符串,也會返回true,這個問題已經在es6中修復。

isNaN(’abc’); // trueNumber.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(); // 38

函數表達式(非函數聲明)中的函數名不可覆蓋

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];// 存在,等效于 > -1if (~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; // undefinedhel.getName(); // lucy// 動態的getterHello.prototype.__defineGetter__(’name’, function() { return this._name;});Hello.prototype.__defineSetter__(’name’, function(value) { this._name = value;});hel.name; // lucyhel.getName(); // lucyhel.name = ’jimi’;hel.name; // jimihel.getName(); // jimi13

0.3 - 0.2 !== 0.1 // true

浮點操作不精確,老生常談了,不過可以接受誤差

0.3 - 0.2 - 0.1 <= Number.EPSILON // true14

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(){} >= {} // true18

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); // 4parseInt(10.23); // 1021

1 + null // 11 + undefined // NaNNumber(null) // 0Number(undefined) // NaN22

實參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 // truevoid 1 === undefined // truevoid {} === undefined // truevoid ’hello’ === undefined // truevoid 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’; // trueObject.prototype.toString.call(null); // [object Null]null instanceof Object;// false29

基本類型(null和undefined除外)在操作的時候,引擎會自動為數據包裝成對象,操作完就銷毀對象。

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

所以增加任何數據上去都會被銷毀,除非修改原型鏈

const data = ’abc’;data.x = ’y’;console.log(data.x); // undefineddata.__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; // true31

函數形參帶默認值時,會改變一些認知

function test(a, b = 1) { // 別名同步,非嚴格模式預期可以同步 arguments[0] = 20; console.log(a); // 2}// 檢測函數的形參個數,預期值為:2console.log(test.length); // 1test(123);32

數字都是浮點類型。位運算操作時,js會先把數字轉換到int類型。相對于其他語言,這算是一筆額外的性能開銷。

1 | 0 // 11.234 | 0 // 11.234 | 0.6 // 11 & 1 // 11.23 & 1.456 // 1~1 // -2~1.234 // -233

賦值給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 === Infinity1/-0 === -Infinity

以上就是Javascript中的奇葩知識,你知道嗎?的詳細內容,更多關于JavaScript 奇葩知識的資料請關注好吧啦網其它相關文章!

標簽: JavaScript
主站蜘蛛池模板: 自动钻孔机-全自动数控钻孔机生产厂家-多米(广东)智能装备有限公司 | 旗杆生产厂家_不锈钢锥形旗杆价格_铝合金电动旗杆-上海锥升金属科技有限公司 | 河南彩印编织袋,郑州饲料编织袋定制,肥料编织袋加工厂-盛军塑业 河南凯邦机械制造有限公司 | 自动化改造_智虎机器人_灌装机_贴标机-上海圣起包装机械 | 余姚生活网_余姚论坛_余姚市综合门户网站| 刺绳_刀片刺网_刺丝滚笼_不锈钢刺绳生产厂家_安平县浩荣金属丝网制品有限公司-安平县浩荣金属丝网制品有限公司 | 仓储笼_金属箱租赁_循环包装_铁网箱_蝴蝶笼租赁_酷龙仓储笼租赁 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 上海洗地机-洗地机厂家-全自动洗地机-手推式洗地机-上海滢皓洗地机 | 切铝机-数控切割机-型材切割机-铝型材切割机-【昆山邓氏精密机械有限公司】 | 北京律师咨询_知名专业北京律师事务所_免费法律咨询 | 定制防伪标签_防伪标签印刷_防伪标签厂家-510品保防伪网 | 除甲醛公司-甲醛检测治理-杭州创绿家环保科技有限公司-室内空气净化十大品牌 | 干培两用箱-细菌恒温培养箱-菲斯福仪器| 涿州网站建设_网站设计_网站制作_做网站_固安良言多米网络公司 | LHH药品稳定性试验箱-BPS系列恒温恒湿箱-意大利超低温冰箱-上海一恒科学仪器有限公司 | 贵州成人高考网_贵州成考网| 冷却塔风机厂家_静音冷却塔风机_冷却塔电机维修更换维修-广东特菱节能空调设备有限公司 | 重庆LED显示屏_显示屏安装公司_重庆LED显示屏批发-彩光科技公司 重庆钣金加工厂家首页-专业定做监控电视墙_操作台 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 微型气象仪_气象传感器_防爆气象传感器-天合传感器大全 | 深圳湾1号房价_深圳湾1号二手房源| 【铜排折弯机,钢丝折弯成型机,汽车发泡钢丝折弯机,线材折弯机厂家,线材成型机,铁线折弯机】贝朗折弯机厂家_东莞市贝朗自动化设备有限公司 | 钢木实验台-全钢实验台-化验室通风柜-实验室装修厂家-杭州博扬实验设备 | 长沙印刷厂-包装印刷-画册印刷厂家-湖南省日大彩色印务有限公司 青州搬家公司电话_青州搬家公司哪家好「鸿喜」青州搬家 | 便民信息网_家电维修,家电清洗,开锁换锁,本地家政公司 | 动力配电箱-不锈钢配电箱-高压开关柜-重庆宇轩机电设备有限公司 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | 上海网站建设-上海网站制作-上海网站设计-上海做网站公司-咏熠软件 | 热熔胶网膜|pes热熔网膜价格|eva热熔胶膜|热熔胶膜|tpu热熔胶膜厂家-苏州惠洋胶粘制品有限公司 | 合肥活动房_安徽活动板房_集成打包箱房厂家-安徽玉强钢结构集成房屋有限公司 | 济南ISO9000认证咨询代理公司,ISO9001认证,CMA实验室认证,ISO/TS16949认证,服务体系认证,资产管理体系认证,SC食品生产许可证- 济南创远企业管理咨询有限公司 郑州电线电缆厂家-防火|低压|低烟无卤电缆-河南明星电缆 | 背压阀|减压器|不锈钢减压器|减压阀|卫生级背压阀|单向阀|背压阀厂家-上海沃原自控阀门有限公司 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 标准光源箱|对色灯箱|色差仪|光泽度仪|涂层测厚仪_HRC大品牌生产厂家 | 陕西华春网络科技股份有限公司 | 法兰螺母 - 不锈钢螺母制造厂家 - 万千紧固件--螺母街 | 3D全息投影_地面互动投影_360度立体投影_水幕灯光秀 | 广东银虎 蜂窝块状沸石分子筛-吸附脱硫分子筛-萍乡市捷龙环保科技有限公司 | 生物风-销售载体,基因,质粒,ATCC细胞,ATCC菌株等,欢迎购买-百风生物 | 欧洲MV日韩MV国产_人妻无码一区二区三区免费_少妇被 到高潮喷出白浆av_精品少妇自慰到喷水AV网站 | 旋振筛|圆形摇摆筛|直线振动筛|滚筒筛|压榨机|河南天众机械设备有限公司 | 带压开孔_带压堵漏_带压封堵-菏泽金升管道工程有限公司 | 万烁建筑设计院-建筑设计公司加盟,设计院加盟分公司,市政设计加盟 | 复合肥,化肥厂,复合肥批发,化肥代理,复合肥品牌-红四方 |