原型和原型链是JavaScript中一个重要且常常被误解的概念。它们在理解对象、继承和属性查找时扮演着关键的角色。 1.原型：JavaScript对象的基础 在JavaScript中，几乎所有的对象都是通过构造函数（constructor）创建的。每个构造函数都有一个特殊的属性称为原型（prototype），它是一个对象，包含了构造函数的属性和方法。当我们创建一个对象时，它会继承构造函数的原型上的属性和方法。 1.1构造函数和原型的关系 让我们通过一个示例来理解构造函数和原型之间的关系： functionPerson(name,age){ this.name=name; this.age=...

背景🌟 我们公司平时在开发的时候，总是会需要开发一些组件库，去提供给组内其他人通用，这样大大提高了复用性，当然大厂会有自己的组件库，不过学无止境嘛，大家可以根据本文学会如何发布npm包！现在一起来吧 01、步骤一注册 打开npm官网，如果没有账号就注册账号，如果有就登陆。 02、步骤二创建文件夹 按需求创建一个文件夹，本文以test为例。 03、步骤三初始化package.json文件 进入test文件夹里面，使用cmd打开命令行窗口，在命令行窗口里面输入npminit初始化package.json文件。也可以在VisualStudioCoode的终端里面使用npminit命令初...

一、背景 js是一种单线程语言，只有一条通道，那么在任务多的情况下，就会出现堵塞，这种情况下就产生了多线程，那么就产生了同步任务和异步任务。 同步任务： 在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。是由js执行栈/回调栈执行的 异步任务： 不进入主线程、而进入任务队列的任务，当主线程中的任务运行完成了，才会从任务队列中取出异步任务，放入主线程中执行 二.宏任务和微任务 微任务和宏任务都是异步任务，它们都属于一个队列 宏任务：script、setTimeout、setInterval、postMessage、MessageChannel、及Nod...

如果你特别想离职:建议尝试精神离职！如果你最近感觉工作压力特别大，但是又不敢轻易离职，不妨试试这7个精神离职法 既可以给自己一些喘息的空间，又能够在这个过程中，去思考自己到底适合怎样的工作模式? 1、认真地敷衍工作 拿出大学期末考试的心态，60分万岁，多一分浪费。分内之事规规矩矩地干好，不给领导 挑刺的机会，但是绝不加班!领导说下班找不到人?笑死，你也就给我发8个小时的工资 2、事不关己，高高挂起 有一个口诀能解决世界上99%的问题，“关你屁事”和“关我屁事”。上班时间，老老实实当好npc的角色，与自己无关的事不要多嘴，少关注，少参与。打工而已，不必上头。 3、学会左耳进右耳出 面对领...

简介 在现代Web应用程序中，埋点上报是一种重要的数据收集和分析手段。本文将介绍前端埋点上报的几种常见方式，并详细阐述如何在项目中运用这些方式进行数据上报，以帮助开发者更好地进行数据收集和分析。 上报方式 在前端中，常见的埋点上报方式有以下几种： 1.图片请求（ImageBeacon）：通过创建一个Image对象，将要上报的数据作为URL参数拼接到一个1x1像素的透明图片URL中，发送一个GET请求来触发上报。 2.XMLHttpRequest或FetchAPI：使用XMLHttpRequest或FetchAPI发送异步请求来上报数据。可以选择使用GET或POST方法，并将数据作为请求体或UR...

前言 从我个人理解来看，设计模式其实就藏在我们平时的代码中，只是有人把它们提、炼出来，赋予了一些专业的名词和定义，下面给大家介绍一个日常项目开发中非常实用的设计模式，也就是策略模式。 策略模式的定义 先来看下策略模式的定义：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。 简单来说就是有多种选择，然后一般只会选择一种。从代码的角度来说就是，定义一系列的if和elseif，然后只会命中其中一个。 举个例子 话不多说，直接来看例子，比如我们需要计算员工工资，员工工资计算规则如下： 高级工：时薪为25块/小时 中级工：时薪为20块/小时 初级工：时薪为15块/小时 按每天10...

闭包是什么？ 闭包是指一个函数可以访问并操作其词法作用域外的变量的能力。 闭包就是能够读取其他函数内部变量的函数。 例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。 在本质上，闭包是将函数内部和函数外部连接起来的桥梁。 特点：函数嵌套，并返回子函数，子函数访问了外变量。 //外部函数 functionouterFunction(){ //内部函数外的变量 varouterVariable='Iamfromouterfunction'; //返回内部函数 functioninnerFunction(){ console...

如何理解HTML语义化？ 根据内容来选择合适的标签优点： 让人更容易读懂（增加代码可读性）。方便团队开发和维护。 方便浏览器爬虫更好的识别内容。（SEO）。 在没有CSS样式下，页面也能呈现出很好地内容结构、代码结构。 src和href的区别 src和href都可以用来引入外部的资源。两者区别如下： src常用于img、video、audio、script元素，当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。它会将资源内容嵌入到当前标签所在的位置 href常用于a、link元素，指向外部资源所在的位置，和当前...

全局的 setTimeout()  方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段，但是需要注意的是，setTimeout 并不是 ECMAScript 标准的一部分，不过几乎每一个JS运行时都支持了这个函数。定时器的使用比较简单，这里不再阐述，我们这篇文章主要聊下关于setTimeout有最小时延的相关知识。 一、为什么定时器有最小时延 其实setTimeout是有最小时延的，这是为什么呢？有很多因素会导致setTimeout的回调函数执行比设定的预期值更久，这里列举一些导致定时器出现时延的原因： 1.函数过...

作用域与闭包 作用域 作用域是当前的执行上下文，值和表达式在其中“可见”或可被访问。如果一个变量或表达式不在当前的作用域中，那么它是不可用的。作用域也可以堆叠成层次结构，子作用域可以访问父作用域，反过来则不行。————MDN 作用域最重要的特点是：子作用域可以访问父作用域，反之则不行。 作用域可细分为4种： 全局作用域：博爱的作用域，任何地方都能被访问到。 模块作用域：一个文件的独立作用域。 函数作用域：每个函数都有它的作用域。 块级作用域：这是ES6引入let和const后出现的作用域。 如下，我"偷取"了You-Dont-Know-JS书里介绍作用域和闭包的示例。  ...

手写ES6数组方法不是为了应付面试，是为了锻炼自己的编程思维，理解这些API的核心。在工作中能更好的去理解使用。从底层思维出发去解决一系列问题，而不是遇到问题靠百度，靠猜，靠蒙。从而也是对自己职业生涯的一种交代。如果一味的觉得没什么意义，那这篇文章就不用往下看了！ forEach方法 写之前，咱们先了解一下forEach其特点 参数一：回调函数 参数二：this指向 返回值：无 Array.prototype.MyForEach=function(fn){//定义数组的原型方法 letarr=this//接收数组本身 letarg=arguments[1]||window//设置第...

性能优化 一、性能指标 要在Chrome中查看性能指标，可以按照以下步骤操作： 打开Chrome浏览器，并访问你想要测试的网页。 使用快捷键F12或右键点击页面并选择“检查”，打开开发者工具。 在开发者工具中，切换到“Performance”（性能）选项卡。 点击开始录制按钮，即红色的圆点按钮。开始加载页面。 等待页面加载完成，然后停止录制，点击红色的圆点按钮或按下快捷键Ctrl+E。 在性能分析结果中，你会看到一些性能指标图表。在“Timings”（时间）图表中，你可以找到各个性能指标的时间点。 常规指标 DCL：DOMContentLoaded事件 L：Onload事件 FPFi...

作为前端工程师，经常需要对axios进行封装以满足复用的目的。在不同的前端项目中使用相同的axios封装有利于保持一致性，有利于数据之间的传递和处理。本文提供两种对axios进行封装的思路。 1.将请求方式作为调用参数传递进来 首先导入了axios,AxiosInstance和AxiosResponse模块，用于创建一个http请求的实例和处理响应结果。 定义了一个getBaseUrl函数，用于获取请求的基础URL。 创建了httpProto实例，使用axios.create方法进行创建。并配置了请求的超时时间为5000ms，不携带凭证，设置请求的Content-Type为applicat...

数组是js中最重要的数据类型之一，掌握数组方法对前端学习和工作都有莫大帮助。数组方法繁多，不便记忆，这里给数组方法分门别类，只对方法功能进行简单的介绍，帮助大家对数组有一个系统全面的了解，日后遇到时再进行重点学习，如有遗漏错误，欢迎在评论区指正。 一、增删改方法 增删改查四大天王是数组中最常见也是最简单的方法，需要留意的是哪些方法会对原数组产生影响，哪些方法不会,查找方法较多，单独说明 下面前五种增删方法都对原数组产生影响 push() unshift() pop() shift() splice() push() push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数...

很喜欢‘万变不离其宗’这句话，希望在不断的思考和总结中找到Vue中的宗，来解答面试官抛出的各种Vue问题，一起加油 一、MVVM原理 在Vue2官方文档中没有找到Vue是MVVM的直接证据，但文档有提到：虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发，因此在文档中经常会使用vm(ViewModel的缩写)这个变量名表示Vue实例。 为了感受MVVM模型的启发，我简单列举下其概念。 MVVM是Model-View-ViewModel的简写，由三部分构成： Model:模型持有所有的数据、状态和程序逻辑 View:负责界面的布局和显示 ViewModel：负责模型和界面之间的交...

原型链继承 原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。例如： functionParent1(){ this.name='parent1'; this.play=[1,2,3] } functionChild1(){ this.type='child2'; } Child1.prototype=newParent1(); console.log(newChild1()); 上面的代码其实有一个潜在的问题，例如： vars1=newC...

在现代前端的面试中，vue和react是面试过程中基本必问的技术栈，其中在聊到Vue响应式话题时，watch和computed是面试官非常喜欢聊的主题，虽然watch和computed它们都用于监听数据的变化，但它们在实现原理、使用场景和行为上有着显著的区别。本文将深入探讨watch和computed的原理和区别，并提供一些面试过程中的建议。 先了解下Vue3响应式 Vue3使用了Proxy作为其底层响应式实现可以监听对象属性的变化并触发相应的更新。当你访问数据时，Vue会建立一个依赖关系，然后在数据发生变化时通知相关的依赖项，从而更新视图。在这个背景下，我们深入探讨watch和comput...

我的处理方式: 一开始查了好多方法，删除node_modules，重新安装，切换node版本等，但是发现并没有用之后来发现是安装依赖包的时候有些包安装失败导致的，只要有针对性的重新安装依赖就可以了 例如： in./node_modules/@intlify/core-base/dist/core-base.cjs如果在项目启动的时候遇到类似的问题，我们观察注意一下上下文的内容 可以看到我遇到的这个问题，首先想到的是core-base安装出了问题，但是我发现我的pageage.json并没有相关内容；然后观察一下上下文会发现vue-i18n出现在下面，既然不是core-base那应该就是vu...

🍀背景 不管你是一年经验还是两年经验，在面试的时候问到js相关的一些高阶知识总是会模棱两可，谈吐不清？本篇文章将通过代码的示例阐述十个高阶js的知识 🍀一、闭包 闭包是指函数中定义的函数，它可以访问外部函数的变量。闭包可以用来创建私有变量和方法，从而保护代码不受外界干扰。 //例1 functionouterFunction(){ constprivateVariable="私有变量"; functioninnerFunction(){ console.log(privateVariable);//内部引用外部变量 } returninnerFunction; } constmyFu...

JavaScript中的Map() JavaScript是一种动态、解释性的编程语言，用于开发web上的动态页面和交互式应用程序。与其他编程语言相比，JavaScript拥有更加灵活的内置数据类型，并且拥有更高级别的调试和错误处理工具。JavaScript的核心特征之一就是其内置的Map()数据结构，本文将详细介绍JavaScript中的Map()。 Map()的定义和基础使用 Map()是JavaScript中内置的一种数据结构，它允许您将键值对映射到任意类型的值。Map()的使用非常简单，您可以通过以下方式创建一个新的Map()实例。 constmyMap=newMap(); 现在...