首页
统计
友链
关于
Search
1
git操作
43 阅读
2
提交github仓库操作
17 阅读
3
C语言经典一百题(附源代码)
16 阅读
4
一篇搞定this指向问题!
9 阅读
5
JS-什么是事件循环?
7 阅读
前端
面试
算法
学习
踩坑日记
登录
Search
标签搜索
git
算法
指针原来是套娃的
累计撰写
14
篇文章
累计收到
0
条评论
首页
栏目
前端
面试
算法
学习
踩坑日记
页面
统计
友链
关于
搜索到
5
篇与
的结果
2024-09-26
详谈JavaScript发展史
JavaScript发展史 1995年Navigator公司为了可以控制浏览器行为,将某些不宜在服务端完成的操作放到客户端完成,开发了可以嵌入网页的脚本语言JavaScript,并在1996年将JavaScript正式内置在了他们的产品Navigator 2.0 浏览器中。同年,它的竞争对手微软公司,copy了JavaScript,改名叫做JScript,并搭载在IE3.0浏览器中。 Navigator为了抵制微软,规范JavaScript语言,决定将JavaScript提交给国际标准化组织ECMA(European Computer Manufacturers Association),希望为JavaScript定制一套国际标准。至此,我们熟悉的ES标准(ECMAScript)出现。 ES只是一套标准,理论上js可以运行在各种环境里,浏览器只是它的一种环境,但是具体运行还要靠各大厂商实现。ES1.0 ES1.0在1997年发布,基于JavaScript和Jscript制定了一些规范。主要规定了ECMAScript的以下组成部分: 语法, 类型, 语句, 关键字, 保留字, 操作符, 对象;ES2 ES2在1998年发布,对ES1进行了一些小的修订和澄清,但未引入重大新功能。ES3 1999年12月,ECMAScript 3.0版发布,成为JavaScript的通行标准,得到了广泛支持。可以说这一版才是对该标准第一次真正的修改,新增了对正则表达式、新控制语句、try-catch异常处理的支持,并围绕标准的国际化做出了一些小的修改,修改内容包括字符串处理、错误定义和数值输出;第3版也标志着ECMAScript成为了一门真正的编程语言,所有的现代浏览器完全支持 ECMAScript 3。 主要更新和新增功能如下:正则表达式:ES3引入了正则表达式支持,这是处理字符串的一个非常强大的工具。 新的控制语句:switch 和 try...catch 语句,提供了更复杂的控制流选项。 错误处理:引入了try...catch和throw语句,用于异常处理。 新的字符串方法:例如charAt(), charCodeAt(), concat(), indexOf(), lastIndexOf(), slice(), substring(), toLowerCase(), toUpperCase(), 和split()。 新的数组方法:例如concat(), join(), pop(), push(), reverse(), shift(), slice(), sort(), splice(), 和unshift()。 国际化支持:增加了对Unicode的基本支持,以及一些国际化相关的函数。 更严格的错误检查:ES3对某些类型错误进行了更严格的检查,例如在赋值时类型不匹配。 行为一致性:对一些语言特性进行了规范,以确保不同实现之间的行为一致性。 保留字:ES3规范定义了更多的保留字,以避免在未来版本的JavaScript中出现命名冲突。ES4阶段 在ES3发布后的十年里,web开发逐渐兴起,各种更新讨论踊跃而出,ECMA TC39重新召集相关人员共同谋划,结果,出台后的标准几乎是在第3版的基础上完全定义了一门新语言;第4版不仅包含了强类型变量、新语句和新的数据结构、真正的类和经典继承,还定义了与数据交互的新方式。 技术专家委员会成员包括 Microsoft、Mozilla、Google 等大公司;各方对于是否通过这个标准,发生了严重分歧;以 Yahoo、Microsoft、Google 为首的大公司,反对 JavaScript 的大幅升级,主张小幅改动;以 JavaScript 创造者 Brendan Eich 为首的 Mozilla 公司,则坚持当前的草案; 由于各方意见不统一,ES4未能成为正式标准,在ES3发布后的10年里,ES标准并未做大更新。ES5 2009年12月3日,ECMAScript 5.0版正式发布;第5版力求澄清第3版中已知的歧义并添加了新的功能,包括原生JSON对象、继承的方法和高级属性定义,以及严格模式;随着时间的推移,所有的现代浏览器已经完全支持 ES5; 除了ECMAScript的版本,很长一段时间中,Netscape公司(以及继承它的Mozilla基金会)在内部依然使用自己的版本号,这导致了JavaScript有自己不同于ECMAScript的版本号;1996年3月,Navigator 2.0内置了JavaScript 1.0;JavaScript 1.1版对应ECMAScript 1.0,但是直到JavaScript 1.4版才完全兼容ECMAScript 1.0; JavaScript 1.5版完全兼容ECMAScript 3.0,目前的JavaScript 1.8版完全兼容ECMAScript 5;严格模式 JSON.stringify和JSON.parse getters/setters 数组方法扩展(如forEach、map、reduce等) 不可变对象(Object.freeze) 函数.bind方法等重要特性 可以认为,ES5也只是新引入了一些API,真正对前端发展引起巨大变化的,是2015年发布的ES6标准。ES6 2009年,Node.js项目诞生,创始人为Ryan Dahl,它标志着JavaScript可以用于服务器端编程,从此网站的前端和后端可以使用同一种语言开发; 随着开发项目的变大,模块化已经在修订中成为势在必行的内容,在ES6支持模块化之前,社区中讨论出了一套commonjs标准,标准出来后,直接被NodeJs支持。 ECMAScript 6.0(简称ES6)的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。因此,在2015年发布的ES6做了如下更新:类 模块化 解构赋值 箭头函数 模板字符串 for…of循环 let/const块级作用域 Promise Map/Set Proxy Reflect等ES6+ 为了让标准的升级成为常规流程,任何人在任何时候,都可以向标准委员会提交新语法的提案,然后标准委员会每个月开一次会,评估这些提案是否可以接受,需要哪些改进;如果经过多次会议以后,一个提案足够成熟了,就可以正式进入标准了; 这就是说,标准的版本升级成为了一个不断滚动的流程,每个月都会有变动; 标准委员会最终决定,标准在每年的 6 月份正式发布一次,作为当年的正式版本;接下来的时间,就在这个版本的基础上做改动,直到下一年的 6 月份,草案就自然变成了新一年的版本;这样一来,就不需要以前的版本号了,只要用年份标记就可以了;所以在ES6以后,后面就是ES2016、ES2017等等...
2024年09月26日
3 阅读
0 评论
0 点赞
2024-09-13
一篇搞定this指向问题!
大佬说,要搞定this指向问题就要理解谁有this,this又指向什么东西。重点记住一句话:this是存在执行上下文中的 指向的是一个对象执行上下文 分三种 全局执行上下文 函数执行上下文 和 eval执行上下文即this只有全局、函数(箭头函数不存在this)、eval中存在,指向一个对象,在浏览器环境下全局this指向window对象请理解上面内容,尝试做一下下面几道题(浏览器环境 非严格模式)1a = 100; const obj = { a: 1, b: () => { const a = 10; console.log(this.a); }, }; obj.b();2a = 100; function b() { var a = 1000; const c = () => { var a = 1; console.log(this.a); }; c(); } b();3a = 100; function b() { const c = () => { var a = 1; console.log(this.a); }; c(); } const obj = { a: 1000, m: b, }; obj.m();4a = 100; const b = { a: 1, c: function () { var a = 1000; console.log(this.a); }, }; const m = b.c; m();5a = 100; const b = { a: 1, c: function () { var a = 1000; console.log(this.a); (function () { console.log(this.a); })(a); }, }; b.c(); const m = b.c; m();6a = 100; const b = { a: 1, c: () => { var a = 1000; console.log(this.a); }, }; const m = b.c; m();请思考一下我们再解释哦!这里的难度是循序渐进的,因为浏览器环境和Node环境内全局this有些不一样,所以我们先讨论浏览器环境下的输出。看一下第一题:a = 100; const obj = { a: 1, b: () => { const a = 10; console.log(this.a); }, }; obj.b();还记的一开始说的话吗?this存在于执行上下文中,只有全局和函数还有eval拥有this,他指向的是一个对象。同时,箭头函数是没有自己的this的。先说答案:在浏览器环境下输出为100b是一个箭头函数,没有自己的this,所以再往外找,是obj调用的b()函数,但是对象也没有this,再向外找,obj.b()是在全局下调用,所以这里打印的this是全局的this,浏览器环境下,全局this指向全局window对象,所以打印的this.a实际是window.a 值为100。这里的重点就是,对象是没有this的。我们把这六道题一一对一下,就会清楚整个的执行原理了。第二题和第一题由有一些区别,不过只有搞清楚谁的this,指向哪个对象,也很简单。a = 100; function b() { var a = 1000; const c = () => { var a = 1; console.log(this.a); }; c(); } b();this是谁的?最内层的c函数是箭头函数没有this,外面b函数拥有this,所以不用再往外找了。第一点,当前打印的this是b函数的。this指向的谁?b函数是在全局下调用的,所以指向的对象是全局的window对象,这里打印的this.a也是全局的window.a不清楚的话我们再看第三题!a = 100; function b() { const c = () => { var a = 1; console.log(this.a); }; c(); } const obj = { a: 1000, m: b, }; obj.m();this是谁的?在b函数内调用的c函数,因为c是箭头函数没有this,所以向上层寻找,b是一个函数,拥有this。找到了,打印的this是b函数所拥有的this。一开始说过,this指向一个对象,这个对象就是调用该函数的对象,在这里是obj调用的,所以b函数的this指向obj对象,打印的this.a是obj.a,值为1000。这三道题看完是不是清晰一些了?请带着你的理解再思考一下第四题!a = 100; const b = { a: 1, c: function () { var a = 1000; console.log(this.a); }, }; const m = b.c; m();this是不是c函数的?都不用往外找了,m()运行的时候是在全局下调用的,所以c函数的this指向全局对象window,打印值为100。不要被b.c迷糊了哦越来越熟练了,下面看第五题:a = 100; const b = { a: 1, c: function () { var a = 1000; console.log(this.a); (function () { console.log(this.a); })(a); }, }; b.c(); const m = b.c; m();这个有两次调用,每次调用会打印两次,所以一共有四次打印,没有异步情况,从上往下看就好了。先看b.c(),这里的this是c函数的this,调用者是b,所以指向b对象,先打印一个1。然后进入立即执行函数里,不要被传入的a迷糊了,立即执行函数是在全局下执行的,这里的this是全局的变量,打印100。m赋值了b.c这个函数,所以m就是c函数了,已经和b没有任何关系了,这里的this是c函数的this,调用在全局里,所以指向全局对象,打印100。立即执行函数同上,打印一百。最后结果就是1 100 100 100第六题!a = 100; const b = { a: 1, c: () => { var a = 1000; console.log(this.a); }, }; const m = b.c; m();有上面的铺垫相信这道题可以直接秒了。c是箭头函数没有this,向外面找,m()在全局下执行,this为全局this,指向全局对象,打印100。为什么在最后放一个这么简单的题呢?其实我想借这个第六问说一下另一种情况。上面的截图都是在浏览器环境下执行的,如果改成Node环境呢?Node环境的this和浏览器的this有什么区别?浏览器情况说完了,下面再说一下Node环境中的打印。我们知道,浏览器环境下全局对象是window对象,全局this指向了window对象。这里就是最大的区别,在Node环境中全局对象是global对象,而全局的this指向的却不是全局对象global。在cjs模块下,全局this === module.exports === exports它指向的是导出对象,所以涉及全局的部分会和浏览器有所差别。因为没有导入该模块,所以这里的导出都是空对象,a挂载到了全局对象global里。但是this不指向global对象呀,{}空对象里没有a,所以打印为undefined。把后缀名改成mjs,就切换到了ES模块,在ES模块执行这个代码,全局this为undefined,undefinde中根本没有a,所以this.a会报错。这就是Node和浏览器不同的地方,差别只在涉及全局this部分,如第三道题,不涉及全局this,打印值和浏览器环境中是一样的。以上!
2024年09月13日
9 阅读
0 评论
0 点赞
2024-09-06
奇怪的HTTP状态码
此文记录一下开发中遇到的状态码400系列401 请求未授权 没有权限405 请求方法不对 本来是post请求 但是后端自己测试的时候改成了接收get请求 导致返回405413 请求实体过大 上传超过服务器所能处理范围的数据时,服务器会拒绝处理该请求,并返回413状态码。在调试上传Excel大文件时,报错413。422 请求格式不对 与后端约定请求参数不符 服务器收到请求但无法处理500系列503 服务器不可用 服务器维护ing 无法处理请求
2024年09月06日
2 阅读
0 评论
0 点赞
2024-08-19
实体字符 entity
实体字符指需要在页面上显示的特殊字符写法:&字母; 或 &数字;常用字符举例:& & U+00026 < < U+0003C > > U+0003E " " U+00022 ' ' U+00027 U+000A0 – – U+02013 — — U+02014 © © U+000A9 ® ® U+000AE ™ ™ U+02122 ≈ ≈ U+02248 ≠ ≠ U+02260 £ £ U+000A3 € € U+020AC ° ° U+000B0MDN解释:https://developer.mozilla.org/en-US/docs/Glossary/Character_reference全部实体:https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references
2024年08月19日
4 阅读
0 评论
0 点赞
2024-07-24
JS-什么是事件循环?
首先,浏览器是一个多进程多线程的应用程序浏览器内部工作极其复杂,为了避免相互影响,为了减少连环崩溃的几率,当启动浏览器后,它会自动启动多个进程。可以在浏览器的任务管理器中查看当前的所有进程其中,最主要的进程有:浏览器进程主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。网络进程负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。渲染进程渲染进程启动后,会开启一个渲染主线程,主线程负责执行 HTML、CSS、JS 代码。默认情况下,浏览器会为每个标签页开启一个新的渲染进程,以保证不同的标签页之间不相互影响。在渲染进程上会执行js代码,为了防止发生冲突,JavaScript被设计成了单线程的语言,意味着同一时间内只能做一件事,但是这并不意味着单线程就是阻塞,而实现单线程非阻塞的方法就是事件循环。这是一个非常巧妙的方法:在最开始的时候,渲染主线程会进入一个无限循环每一次循环会检查消息队列中是否有任务存在。如果有,就取出第一个任务执行,执行完一个后进入下一次循环;如果没有,则进入休眠状态。其他所有线程(包括其他进程的线程)可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时,如果主线程是休眠状态,则会将其唤醒以继续循环拿取任务这样一来,就可以让每个任务有条不紊的、持续的进行下去了。若干解释何为异步?代码在执行过程中,会遇到一些无法立即处理的任务,比如:计时完成后需要执行的任务 —— setTimeout、setInterval网络通信完成后需要执行的任务 -- XHR、Fetch用户操作后需要执行的任务 -- addEventListener如果让渲染主线程等待这些任务的时机达到,就会导致主线程长期处于「阻塞」的状态,从而导致浏览器「卡死」渲染主线程承担着极其重要的工作,无论如何都不能阻塞!因此,浏览器选择异步来解决这个问题使用异步的方式,渲染主线程永不阻塞面试题:如何理解 JS 的异步?参考答案:JS是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,而渲染主线程只有一个。而渲染主线程承担着诸多的工作,渲染页面、执行 JS 都在其中运行。如果使用同步的方式,就极有可能导致主线程产生阻塞,从而导致消息队列中的很多其他任务无法得到执行。这样一来,一方面会导致繁忙的主线程白白的消耗时间,另一方面导致页面无法及时更新,给用户造成卡死现象。所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时,比如计时器、网络、事件监听,主线程将任务交给其他线程去处理,自身立即结束任务的执行,转而执行后续代码。当其他线程完成时,将事先传递的回调函数包装成任务,加入到消息队列的末尾排队,等待主线程调度执行。在这种异步模式下,浏览器永不阻塞,从而最大限度的保证了单线程的流畅运行。任务有优先级吗?任务没有优先级,在消息队列中先进先出但消息队列是有优先级的根据 W3C 的最新解释:每个任务都有一个任务类型,同一个类型的任务必须在一个队列,不同类型的任务可以分属于不同的队列。在一次事件循环中,浏览器可以根据实际情况从不同的队列中取出任务执行。浏览器必须准备好一个微队列,微队列中的任务优先所有其他任务执行https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint随着浏览器的复杂度急剧提升,W3C 不再使用宏队列的说法在目前 chrome 的实现中,至少包含了下面的队列:延时队列:用于存放计时器到达后的回调任务,优先级「中」交互队列:用于存放用户操作后产生的事件处理任务,优先级「高」微队列:用户存放需要最快执行的任务,优先级「最高」添加任务到微队列的主要方式主要是使用 Promise、MutationObserver例如:// 立即把一个函数添加到微队列 Promise.resolve().then(函数)浏览器还有很多其他的队列,由于和我们开发关系不大,不作考虑面试题:阐述一下 JS 的事件循环参考答案:事件循环又叫做消息循环,是浏览器渲染主线程的工作方式。在 Chrome 的源码中,它开启一个不会结束的 for 循环,每次循环从消息队列中取出第一个任务执行,而其他线程只需要在合适的时候将任务加入到队列末尾即可。过去把消息队列简单分为宏队列和微队列,这种说法目前已无法满足复杂的浏览器环境,取而代之的是一种更加灵活多变的处理方式。根据 W3C 官方的解释,每个任务有不同的类型,同类型的任务必须在同一个队列,不同的任务可以属于不同的队列。不同任务队列有不同的优先级,在一次事件循环中,由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列,微队列的任务一定具有最高的优先级,必须优先调度执行。面试题:JS 中的计时器能做到精确计时吗?为什么?参考答案:不行,因为:计算机硬件没有原子钟,无法做到精确计时操作系统的计时函数本身就有少量偏差,由于 JS 的计时器最终调用的是操作系统的函数,也就携带了这些偏差按照 W3C 的标准,浏览器实现计时器时,如果嵌套层级超过 5 层,则会带有 4 毫秒的最少时间,这样在计时时间少于 4 毫秒时又带来了偏差受事件循环的影响,计时器的回调函数只能在主线程空闲时运行,因此又带来了偏差
2024年07月24日
7 阅读
0 评论
0 点赞