青春木鱼的博客

String() 和 toString() 都可以转换为字符串类型，但是toString()不可以转换null 和 undefined，因为null 和 undefined 没有自己的包装对象，不能访问对象的toString() 方法，包装对象的属性引用结束，这个新创建的临时对象就会被销毁了。

在JavaScript中，自定义DOM事件可以通过`CustomEvent`或Event构造函数来创建，并可以使用`dispatchEvent`方法来触发。

JavaScript 中的 new Date() 方法用于创建一个新的 Date 对象，该对象表示当前日期和时间。Date 对象提供了许多方法和属性，可以用于获取和设置日期和时间信息。

Object.defineProperty只能遍历对象属性进行劫持，Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的。在 Vue 中，Object.defineProperty 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。Object.defineProperty 只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。

每个对象拥有一个原型对象，对象以其原型为模板，从原型继承属性和方法。当然 原型对象 也可能拥有原型，并从中继承属性和方法，依此类推，这种关系被称为原型链。准确地说，这些属性和方法定义在Object的构造器函数(constructor functions)之上的prototype属性上，而非对象实例本身。

性能优化，是每一个开发者都会遇到的问题，特别是现在越来越重视体验，以及竞争越来越激烈的环境下，对于我们开发者来说，只完成迭代，把功能做好是远远不够的，最重要的是把产品做好，让更多人愿意使用，让用户用得更爽，这不也是我们开发者价值与能力的体现吗？重视性能问题，优化产品的体验，比起改几个无关痛痒的 bug 要有价值得多。

JS中的global、window以及document对象的区别

JS中的事件对象event和window.event的区别：window.event‌是Internet Explorer特有的事件对象，不支持其他浏览器。event‌遵循W3C标准，是大多数现代浏览器支持的事件对象。在标准兼容的浏览器中，事件对象作为参数传递给事件处理函数。

在实现Vue移动端适配方面，主要依赖于视口单位（Viewport units）、Flexible.js、PostCSS插件、以及媒体查询（Media Queries）这几个关键技术和策略。其中，Flexible.js是一种广泛采用的解决方案，因为它能够动态改变根元素的字体大小，进而影响整个应用的布局。

垃圾回收机制也称Garbage Collection简称GC。在JavaScript中拥有自动的垃圾回收机制，通过一些回收算法，找出不再使用引用的变量或属性，由JS引擎按照固定时间间隔周期性的释放其所占的内存空间。在C/C++中需要程序员手动完成垃圾回收。

reject是用来抛出异常的，catch是用来处理异常的；reject是Promise的方法，而then和catch是Promise实例的方法（Promise.prototype.then 和 Promise.prototype.catch）。

如何缓存 JavaScript、CSS 文件是一个关注点，因为这能显著提升网站性能、减少服务器负载、节省带宽。简而言之，缓存是指浏览器存储网页资源的一种机制，使得用户在访问同一页面时，无需重新下载相同的资源。特别地，对于JavaScript和CSS文件，一旦缓存，就可以在用户的后续访问中使用本地副本，这样可以加快页面加载速度、改善用户体验。其中，最常用的缓存实现方式包括设置HTTP缓存标头，如Cache-Control和Expires，以及使用服务工作器（Service Workers）。

JS中获得鼠标位置的属性有哪些？

规范JavaScript的注释方法包括使用单行注释、多行注释、使用JSDoc风格的注释以及采用一致的注释习惯。其中，使用JSDoc风格的注释是为了提高代码的可读性和维护性，通过在函数和变量声明之前添加规范化的注释，为代码的每一部分提供清晰的文档说明。这种做法不仅有助于团队成员之间的沟通，也便于未来的代码维护和更新。

软件制作的流程主要包含需求分析、系统设计、编码实现、测试验证、部署上线和维护更新。其中，需求分析是基础，它决定了软件的功能和性能；通过与用户的沟通，明确软件要解决的问题和要实现的目标，以及预期的用户体验。这个阶段的成果通常是需求规格说明书，它将指导后续开发工作。

JavaScript的内存回收优化关键在于理解内存生命周期、减少内存泄露以及合理运用内存管理手段。具体方法包括：避免全局变量的滥用、使用局部变量以便回收、减少对闭包的不当使用、解绑无用的事件监听器、避免不必要的大型数据结构、使用WeakMap和WeakSet以便垃圾回收、利用Chrome DevTools定位内存问题。其中，解绑无用的事件监听器尤为重要，因为忘记解除绑定的事件监听器可能导致DOM元素无法被回收，从而产生内存泄露。这意味着即便相关DOM已从文档中移除，由于仍然存在引用（事件监听器），它的内存仍

在JavaScript中，常用的模块化规范有以下几种：CommonJS规范：主要用于服务器端编程，是Node.js采用的模块化规范。通过require方法加载模块，通过module.exports和export对象输出模块。AMD规范：主要用于浏览器端编程，是RequireJS采用的模块化规范。通过定义方。ES6模块规范：是ECMAScript 6采用的模块化规范，是JavaScript官方标准。通过export关键字输出模块，通过import。

在实际应用中，如果客户端不支持Cookie或禁用Cookie功能，那么服务器就无法获取Session的ID属性，也无法获取与该客户端对应的Session对象。为了解决这个问题，URL重写技术被引入到Session机制中。在无法得知客户端是否支持Cookie功能时，将Seesion的ID属性追加到URL地址的后面，从而实现会话跟踪功能。

在现代的网页设计中，为了提高用户体验和网站性能，图片懒加载已经成为一个常见的技术。图片懒加载可以减少初始加载时间，延迟加载图片直到用户滚动到它们所在的位置。另外，为了进一步提升用户体验，添加淡入效果可以使页面更加平滑和吸引人。在本文中，我们将学习如何使用JavaScript实现图片懒加载的淡入效果。

要实现图片的懒加载，核心的方法包括：利用JavaScript监听滚动事件、通过getBoundingClientRect()判断图片是否进入可视区域、使用Intersection Observer API、结合data属性暂存图片地址。在现代浏览器中，推荐使用Intersection Observer API来实现图片的懒加载，因为它相比传统的事件监听方式更为高效且易于维护。

JS | JS之深入理解滚动大小scroll系列属性

‌客户区client系列属性主要包括clientWidth和clientHeight两个属性。‌‌clientWidth属性‌：此属性返回一个元素的宽度值，包括元素的内容和内边距，但不包括边框、外边距和滚动条部分。返回值是一个整数，单位是像素。此属性是只读的‌。‌clientHeight属性‌：此属性返回一个元素的高度值，包括元素的内容和内边距，但不包括边框、外边距和滚动条部分。返回值也是一个整数，单位是像素。此属性是只读的‌。‌这两个属性的主要用途是获取元素的可视区域大小，不包括滚动条等隐

偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。当然，还有一个偏移参照——定位父级offsetParent。

IntersectionObserver是一种浏览器提供的API，用于监测元素与其祖先元素或视窗的交叉状态。‌ 它通过异步观察目标元素是否可见，来判断目标元素与视窗或其祖先元素的交叉比例，因此也被称为“交叉观察器”。IntersectionObserver的核心功能是判断元素是否进入、离开或部分可见于视窗，这通常用于实现如懒加载、无限滚动等功能‌

在前端开发过程中，我们经常需要获取HTML元素的尺寸和位置信息。getBoundingClientRect()方法就是一个非常重要的工具，它可以帮助我们获取元素的大小及其相对于视口的位置。

e.target和e.srcElement的主要区别在于它们分别属于不同的浏览器对事件对象属性的支持。‌ 在IE浏览器中，使用event.srcElement属性来获取触发事件的元素，而在Firefox及其他现代浏览器中，则使用event.target属性。尽管两者作用相似，但为了实现跨浏览器兼容性，通常会将两者结合使用，例如通过逻辑判断来选择适当的属性‌。​

构造函数的子类有prototype属性。‌ 子类通过继承机制继承了父类的属性，包括prototype属性。子类的prototype属性不仅存在，而且其__proto__属性指向父类，而子类prototype属性的__proto__属性指向父类的prototype属性‌。

JS中判断数组的6种方法，你知道几个？

document.write()是 JavaScript 中用于向文档中插入内容的方法。它可以在文档加载过程中或在脚本执行时动态地将任意内容写入到 HTML 文档中。需要注意的是，document.write()方法会在页面上直接插入内容，如果在页面加载完成后使用该方法，它会覆盖整个页面内容。因此，在大多数情况下，推荐使用更安全和强大的 DOM 操作方法来修改页面结构，如 createElement()、appendChild() 等。此外，当使用document.write()方法时，要注意确保它在正

Ajax请求通常被设计为无需后退的，因为它们是异步的，不会导致页面刷新。但如果你想要用户能够通过浏览器的后退按钮回到之前的页面状态，你需要考虑以下几种方法。①使用同步请求：这样用户就可以点击后退按钮回到之前的页面，但这样会阻碍用户体验。②使用局部刷新：在Ajax请求成功后，手动更新页面的部分内容，而不是替换整个页面。这样用户点击后退按钮时，可以回到前一个页面状态。③使用pushState和replaceState API：这两个HTML5的History API可以改变浏览器地址栏而不重新加载页面。

history对象保存了用户从打开窗口那一刻的上网历史记录。出于安全限制，开发人员无法读取用户的历史记录，但是可以通过history提供的方法，在不知道实际URL的情况下实现后退和前进

‌FOUC（Flash of Unstyled Content）是指网页在加载过程中，由于CSS样式加载延迟或加载顺序不当，导致页面出现闪烁或呈现出未样式化的内容的现象。‌这种现象通常发生在HTML内容已经加载，但CSS样式表尚未加载或加载顺序不正确时，导致页面短暂地以无样式状态显示，随后样式表加载完成，页面才呈现出预期的样式。这种用户体验不佳的现象，即被称为FOUC。总之，FOUC 是一种常见的 Web 开发问题，可以采取内嵌样式表、预加载样式表、延迟加载样式表、使用样式表框架或者使用样式表链接的 med

使用HTML5可以在本地存储用户的浏览数据。使用的主要目的是为了克服Cookie带来的一些限制，当数据需要被严格控制在客户端上时，无需持续的将数据发回服务器。主要目标：1.提供一种在Cookie之外存储会话数据的途径；2.提供一种存储大量可以跨会话存在的数据的机制。

外部引入 CSS 有2种方式，link 和 @import。就结论而言，强烈建议使用 link ，慎用 @import 方式。

什么是前端工程化？简单来说，前端工程化可以提升开发体验、提高开发效率和质量、提升应用的访问性能，一切以提高效率、降低成本、质量保证为目的的手段都属于工程化。前端工程化不等同于Webpack，它主要包含从编码、发布到运维的整个前端研发生命周期，把软件工程相关的方法和思想应用到前端开发。

settimeout的特点是，它只执行一次，如果想要再次执行，需要重新调用settimeout。另外，settimeout的延迟时间并不是准确的，它只是表示最早可能执行的时间，实际执行的时间可能会受到其他代码的影响，比如浏览器的事件循环，或者其他的定时器。settimeout和setinterval的区别如下：settimeout只执行一次，而setinterval会不断重复执行，直到被清除。settimeout和setinterval的延迟时间和执行间隔都不是准确的，它们会受到其他代码和浏览器的影响

JavaScript的Math.pow()方法用于计算一个数的幂。‌这个方法接受两个参数：‌第一个参数（‌base）‌是底数，‌第二个参数（‌exponent）‌是指数。‌Math.pow()方法返回base的exponent次方的结果。‌这个方法在所有主要浏览器中都得到支持，‌并且自JavaScript 1.0版本以来就一直存在。‌

JQuery ​与Vue.js的主要区别在于它们的设计理念、工作原理、侧重点、DOM操作方式、数据驱动、组件化、生态系统、学习曲线以及虚拟DOM的使用。

Vue.js是一个渐进式的JavaScript框架，‌这意味着开发者可以根据项目的需求逐步引入和使用框架的各种功能，‌同时保持项目的可维护性和可扩展性。‌

这篇文章主要介绍了Vue中ref的用法及演示，ref被用来给元素或子组件注册引用信息。引用信息会被注册在父组件上的$refs对象上，下面来看看文章的详细内容，需要的朋友可以参考一下。