学学学无止境

web前端常见的面试题汇总(一）

web前端常见的面试题汇总

文章目录

- - web前端常见的面试题汇总
  - - 1. 什么是事件？IE和火狐的事件机制有什么区别？如何阻止事件冒泡
    - - 1.1 事件
        
        1.2 事件机制
        
        1.3 如何阻止冒泡事件
    - 2.三种事件模型是什么？
    - - 2.1 第一种是最早的DOM0模型
        
        2.2 第二种是IE事件模型
        
        2.3 第三种是DOM2级事件模型
    - 3. 事件委托是什么？
    - 4. new操作符具体干了什么？如何实现的？
    - 5.对于json的了解?
    - 6.延迟加载的方式有哪些（优化js）？
    - - 6.1 引入问题
      - 6.2 解决问题
      - 6.2.1 让js最后加载
        
        6.2.2 defer属性
        
        6.2.3 async属性
        
        6.2.4 总结defer与async的异同以及使用场景
        
        6.2.5 使用动态创建DOM的方式
        
        6.2.6 使用定时器setTimeout的方式
        
        6.2.7 使用jQuery中的getscript函数
    - 7. Ajax是什么？如何创建一个Ajax？
    - 8.解决Ajax中浏览器缓存问题
    - 9.同步和异步的区别
    - 10. 如何解决跨域问题
    - 11.简单谈一下cookie？
    - 12.JS中几种模块化规范
    - 13 Require.js的核心原理是什么？
    - 14.ECMScript6中怎样写class，为什么会出现class？
    - 15. document.write和innerHTML的区别
    - 16.javascript中类数组对象的定义
    - 17.类数组对象转换为数组对象的常见的方法
    - 18.数组中有哪些原生的方法，举例以下？
    - 19. 哪些操作会造成内存泄漏
    - - 19.1意外的全部变量的使用
      - 19.2被遗忘的定时器或回调函数
      - 19.3脱离DOM的引用
      - 19.4闭包
      - 20. 如何判断当前脚本运行在浏览器（browser）还是在node环境种？
      - 21.移动端的点击事件有延迟，时间是多少，为什么会有？怎么解决这个问题？
      - 移动端的点击延迟
        
        怎么解决点击延迟
      - 22. 什么是“前端路由”？什么时候适合使用”前端路由”?“前端路由”有哪些优缺点？
      - 23.检测浏览器版本有哪些方式？
      - 24. 什么是Ployfill
      - 25.使用JS实现获取文件扩展名
      - 26. 介绍以下js中的节流和防抖
      - 26.1 节流（通过设置perTime与nowTime）
        
        26.2 防抖（通过定时器）
      - 27. Object.is()与原来的比较操作符“===” 与“\==”的区别
      - 28.浏览器中的事件循环机制（Event Looping）
      - 29.instanceof的原理
      - 30. 手写封装一个jsonp
      - 31.有几种方式可以实现存储功能？分别有什么有优缺点？什么是Service Worker？
      - 31.1 实现的存储功能
        
        31.2 什么是Service Worker
      - 32.浏览器中的缓存机制
      - 32.1 缓存位置
        
        32.2 缓存策略
        
        32.3 实际场景应用缓存策略
      - 33. 插入几万个DOM，如何实现页面不卡顿？
      - 34.什么情况下会产生渲染堵塞？
      - 35. 重绘和回流
      - 36. 减少重绘和回流
      - 37. 什么是XSS攻击？如何防止XSS攻击？
      - 1.XSS攻击
        
        2. 如何防止
      - 38. 什么是CSRF攻击？如何防范CSRF攻击？
      - 1. CSRF攻击
        
        2. 如何防范
        
        验证Referer
        
        SameSite
        
        CSRF Token
      - 29. 什么是点击劫持？如何防范点击劫持？
      - 30. 性能优化
      - 1.在请求以及文件大小方面
        
        2.对于代码优化相关
      - 31. Webpack的性能优化
      - 3.减少webpack的打包时间
      - 32. 路由原理（什么是前端路由？两种实现方式有什么区别？）
      - 1. 前端路由
      - 33. 开发中常见的几种Content-Type
      - 34.什么时MVVM、MVC？有什么区别？
      - 34.1 说明
        
        34.2 MVC
        
        34.3 MVVM

1. 什么是事件？IE和火狐的事件机制有什么区别？如何阻止事件冒泡

1.1 事件

事件是用户操作网页时发生的交互动作。如click/move等。事件即可以由用户触发的动作产生，也可以是文档加载，窗口滚动和大小调整。
事件被封装到一个event对象中，event对象中包含了该事件发生时的所有信息（event的属性），以及可以对该事件进行操作（event的方法）

1.2 事件机制

1）IE：IE浏览器支持冒泡事件
2）火狐：狐火浏览器支持冒泡事件和捕获事件

1.3 如何阻止冒泡事件

1）在IE浏览器中使用：event.cancleBubble=true;
2）在火狐浏览器中使用：event.stopPropagation();

2.三种事件模型是什么？

2.1 第一种是最早的DOM0模型

该模型时所有浏览器都兼容的；

2.2 第二种是IE事件模型

该模型包括两个阶段，一是事件处理阶段，二是事件冒泡阶段；
在事件的处理阶段会先执行目标元素绑定的监听函数
在事件的冒泡阶段即是从目标元素冒泡到document，一次检查节点是否绑定了事件监听函数，如果绑定了则执行；
这种事件模型由attachEvent(type:加了on的事件类型，handler：监听事件函数）
PS：可以添加多个监听函数，会按照顺序依次执行

2.3 第三种是DOM2级事件模型

该模型包括三个阶段：一是事件捕获阶段，二是事件处理阶段，三是事件冒泡阶段
捕获阶段是指事件从document向下传播到目标元素，依次检查节点是否绑定了监听函数，若有则执行；后面的两个阶段和IE事件模型相同
该事件的绑定函数是addEventListener(type:不带on的事件类型，handler：事件监听函数，false|true)------第三个参数表示是否在捕获阶段执行监听事件

3. 事件委托是什么？

是什么：事件委托是基于浏览器的事件冒泡机制，因为事件在冒泡的过程中可以上传到父节点，并且父节点可以同个事件对象获取到目标节点，因此可以将子节点的监听函数绑定在父节点上，由父节点监听函数统一处理多个元素的事件，这种方式称为事件代理（委托）；
做什么：
-使用事件代理可以不用为每个子元素都绑定一个监听事件，这样减少了内存的消耗；
-使用事件代理可以实现事件的动态绑定，比如新增一个子节点，我们并不需要单独为其添加监听事件，它所发生的事件会交给父元素中的监听函数来处理

4. new操作符具体干了什么？如何实现的？

/*构造函数中有个默认返回值，即return this---不写返回值时，默认返回该对象*/
 function Func(){
    }
  var func=new Func()

1）首先是创建了一个空对象

var obj = new OBject()

2）设置原型链，即是使这个实例对象的原型proto指向构造函数Func的原型Func（这时便创建了obj对象的原型链：obj —>Func.prototype—>Object.prototype—>null

obj.__proto__=Func.prototype

3）改变this的指向，即是使构造函数Func中this的指向指向所创建的对象obj，并指向构造函数体

var result=Func.call(this)

4）判断构造函数的返回值，当返回值为值类型时，返回所创建的对象；如果时引用类型，就返回这个引用类型的对象

if(typeof(result)==='object'){
	//如果返回值为引用类型，则返回该引用类型
	func=result;
}else{
	//如果值是值类型，则返回所创建的对象
	func=obj;	
}

5.对于json的了解?

json是一个基于文本的轻量级的数据交换格式，它可以被任何编程需要读取和作为数据格式来传递；
我们将JSON作为前后段数据交互的方式，在前端我们将一个符合JSON格式的数据结构转换为JSON字符串，然后将其传递给后端，后端通过JSON格式的字符串解析后生成对应的数据结构，从此以来实现了前后端的数据传递；
由于JSON的语法是基于js的，因此很容易将json数据格式与js对象弄混淆，但是需要注意json格式的数据与js对象不是一回事，不如json格式的属性不允许出现函数，不允许出现NaN值等，（json格式的属性需要弄’‘引号，而js对象不需要）
在js中提供了两种方法来实现js数据结构和json格式的转换处理；
1）JSON.stringify函数，该函数通过传入一个符合JSON格式的数据结构，将其转换为一个JSON格式字符串。在前端向后端发送数据时，可以调用该函数将数据结构对象转换为JSON格式的数据，然后后端再将该数据解析成数据结构的数据进行存储；
2）JSON.parse()，这个函数是将JSON格式的字符串转换为js数据结构，如果传入的数据不符合JSON格式，那么会抛出错误；------当我们接收到后端发送过来的JSON格式的数据时，便可以使用该函数来将JSON格式的数据转换成js数据结构，以此进行数据的访问

总结：
---------js数据结构---->JSON-------->js数据结构--------
一个特点：基于文本的轻量级的数据交换格式
两个方法（JSON.stringify() JSON.parse() )

在向后端发送数据时，先使用JSON.stringify(data)将数据转换成JSON格式的数据，后端解析JSON个数的数据生成js数据结构，进而再将数据进行存储
前端接收到后端发送过来的数据时，使用JSON.parse(data)将数据转换成为js格式的数据，进而进行数据的读取；

6.延迟加载的方式有哪些（优化js）？

6.1 引入问题

js的加载、解析和执行会组设页面的渲染过程，因此我们希望将js脚本能够尽可能的延迟加载，提高页面的渲染速度；
对于js的优化（js的延迟加载），就是等待页面完全加载完成之后再加载js脚本，好处是有助于提高页面的加载速度
之所以要优化是因为HTML元素是按其在页面中出现的次序调用的，如果用javascript管理页面上的dom（使用文档对象模型），那么当js加载于操作的HTML之前时，便会出现代码错误。也就是说，我们写了js语句来获取DOM对象，但是由于DOM结构还没加载完成，因此获取到的时空对象，举例如下：

<head>
    <script type="text/javascript">
        var ul = document.getElementsByTagName('ul')[0]; //获取ul
        var list = ul.getElementsByTagName('li');
        for(var i =0;i<list.length;i++){
            ul.appendChild(document.createElement('li'));
        }
    script>
head>
<body>
<ul>
    <li>111li>
    <li>222li>
    <li>333li>
ul>
body>
html>

报错如下：

出错原因：这就是因为js加载执行于DOM结构之前，所以获取不到。简单的解决办法是把

6.2 解决问题

js中延迟加载的流种方式

让js最后加载
defer属性
async属性
动态创建Dom方式
调用jQuery中的getscript()方法
使用定时器方式延迟加载

6.2.1 让js最后加载

实现：

让js最后加载就是将js脚本代码放在文档底端，实现js脚本代码的最后加载

问题：

当项目中有大量的js代码时，可能会带来显著的性能消耗

6.2.2 defer属性

实现：

说明：

使用defer属性的原理即是，使得带有defer属性的js脚本在页面完全加载之后再执行js脚本代码，便不会阻塞页面的加载
多个defer属性的脚本按照页面中出现的顺序执行

6.2.3 async属性

实现：

说明：

使用async属性，使得HTML和js脚本一并加载（异步），即不会阻塞页面的解析；即浏览器遇到async时不会阻塞页面的解析，而是直接下载和解析

问题：

由于使用async的脚本也是加载完成之后立即执行的，这个时候如果文档还没解析完成的话同样会堵塞，并且多个acsync属性的脚本的执行时顺序是不可预测的；
所以当多个js脚本代码独立，且不依赖于页面的任何脚本时，使用async最优！

6.2.4 总结defer与async的异同以及使用场景

相同点:

不会堵塞页面的加载
不适用于内部的js（即是再页面中引入外部文件时使用）
这两个属性的js脚本代码不能使用document.write()方法

2）不同点

defer是HTML4中script的属性
async是HTML5中script中的属性
使用了defer属性的脚本代码是在页面完全加载完毕之后再执行
使用了async属性的脚本代码和页面一并加载（异步），当该js脚本下载完成时立即执行

3）使用场景

如果脚本需要等待页面解析，且依赖于其他js脚本，那么使用defer属性，使用时将脚本按所需顺序放置于html中
如果脚本不需要等待页面解析，且不依赖于其他脚本，那么使用async；即表示使用了async的你脚本会在下载完成后立即执行，也会在window.onload执行之前执行

6.2.5 使用动态创建DOM的方式

实现：

即我们可以对文档的加载事件设置事件监听，当文档加载完成后再动态创建script标签引入js脚本
代码如下：

//这些代码应被放置在标签前(接近HTML文件底部)
<script type="text/javascript">
//创建script标签引入js脚本
function downloadJSAtOnload(){
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild(element); 
}
//为文档的加载事件设置监听
if (window.addEventListener) //添加监听事件
    window.addEventListener("load",downloadJSAtOnload,false);   //事件在冒泡阶段执行
else if (window.attachEvent) 
    window.attachEvent("onload",downloadJSAtOnload);
else 
    window.onload =downloadJSAtOnload;
</script>

6.2.6 使用定时器setTimeout的方式

代码如下：

<script type="text/javascript">
  function A(){
    $.post("/lord/login",{name:username,pwd:password},function(){
      alert("Hello World!");
    })
  }
  $(function (){
    setTimeout("A()",1000); //延迟1秒
  })
</script>

6.2.7 使用jQuery中的getscript函数

getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。
语法：jQuery.getScript(url,success(response,status))
url（必写）：将要请求的 URL 字符串
success(response,status)（可选）：规定请求成功后执行的回调函数。
其中的参数
response - 包含来自请求的结果数据
status - 包含请求的状态（“success”, “notmodified”, “error”, “timeout” 或 “parsererror”）

//加载并执行 test.js：
$.getScript("test.js");
//加载并执行 test.js ，成功后显示信息
$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

延迟js加载的6中方式

7. Ajax是什么？如何创建一个Ajax？

详细解析看我写的写篇文章：深入了解XMLHttpRequest对象
是什么：

我的理解时Ajax是一种进行异步通信的方法，Ajax的核心是XMLHttpRequest对象。使用Ajax方法请求数据，可以使得页面不重新刷新或者跳转的情况下加载更新数据。
其通过直接由js脚本向服务器发送http请求，然后服务器返回响应数据，更新网页相应的部分

怎么创建：
1）首先是创建一个异步调用对象，即XMLHttpRequest()对象；
2）然后调用open()方法建立与服务器的连接，open()方法接收三个参数，第一个参数是method即请求的方法（get、post、put等），第二个参数是请求url，第三个参数接收一个布尔值，用来表示是否发送异步请求；此时嗲用open()方法并不是真正的向服务器发送了请求，而是一个准备阶段；
3）在发送请求前，我们可以为这个对象添加一些信息和监听函数，比如可以通过setRequestHeader方法来添加请求头信息等。一个XMLHttpRequest对象一共有五种状态，为这个对象状态的变化添加监听函数。由于向服务器发送了请求之后，响应状态时一直在改变的，且每一次改变，都会触发触发onreadstatechange事件，通常情况下对readySteta=4时进行判断，代表服务器返回的数据全部接收完成；同时判断服务器的响应状态码大于等于200或者小于300时代表返回值横穿，我们便可以对服务器返回的数据进行相应的处理。进而对页面进行更新；（以上也可以使用onload事件进行判断）
3）当对象的属性和监听函数设置完成之后，调用send()方法，向服务器发送请求。send()方法可以接收参数作为发送的数据体，该参数类型可以为json、blob等，当你不需要向服务器发送数据时，传入null值；

创建：

	//一般实现
    const xhr = new XMLHttpRequest();
    xhr.open('get', '/server', true);
    //设置响应类型
    xhr.responseType = 'json'
    //设置请求头信息
    xhr.setRequestHeader('MyHeader', 'MyValue');
    //设置请求失败监听函数
    xhr.onload = function () {
      console.log('请求失败了...')
    }
    //为XMLHttpRequest对象的状态设置监听事件（监听onreadystatechange）
    xhr.onreadystatechange = function () {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status >= 200 && this.status < 300) {
        //响应正常
        console.log(this.responseText)
      } else {
        console.log(this.statusText)
      }
    }
    //发送请求
    xhr.send(null);

8.解决Ajax中浏览器缓存问题

说明：

Ajax能提高页面的加载速度主要原因是通过Ajax减少了重复数据的载入，也即在载入数据的同时将数据缓存到内存中，一旦数据被加载，只要没有刷新页面，这些数据就会一直被缓存在内存中。
当提交的URL与历史的URL一致时，就不需要提交给服务器，即不需要从服务器中获取数据，这样虽然降低了服务器的负载，提高了用户的的体验，但不能及时更新数据。
为了保证读取的数据是最新的，需要禁止其缓存功能

解决思路：
1.禁掉缓存
2.更新请求URL（但不是改变URL），因为只要URL不变，那么浏览器就不会取检查服务器是否已经更新，那么浏览器用的数据仍是换粗中的数据

解决：
1）在ajax发送请求前加上

//本质是让缓存过期
anyAjaxObj.setRequestHeader("If-Modified-Since","0");

2）在ajax发送请求前加上

//本质是设置不允许产生缓存
anyAjaxObj.setRequestHeader("Cache-Control","no-cache");

3）在URL上加上一个随机数，

"fresh"=Math.random()

4）在URL上加上时间戳

"nowtime"=+new Date().getTime();
//如：request.jsp?q=q&date=(new Date()).getTime()
//运用实例：
//例如在用户登录验证的时候，点击验证码更新，只需要在发送验证码的请求上加上时间戳或者随机数的形式以更行URL，那么就可以请求得到新的数据
//又如短信发送的状态，如果隔几秒查询以此，URL不变的话，显示出来的状态则不会发生改变

5）如果是使用jQuery，直接适应$.ajacSetuo({cache:false})。这样页面的所有ajax就会执行这条语句就不需要保存缓存记录；

9.同步和异步的区别

同步就是值当一个进程在执行某个请求的时候，当这个请求需要等待一定的时间才能返回数据，那么这个进程就会一直处于等待状态，直到这个请求返回信息才继需往下执行
异步是指当在一个进程中执行某个请求时，且这个请求也需要等待一定的时间才能返回，而此时这个进程会继续往下执行，即不会堵塞等待信息的返回，

通俗的讲，同步是值客户端向服务端发送请求，在等待客户端响应请求时，客户端不能进行其他操作，直到服务器返回请求；
异步就是客户端向服务器发送请求，在等待服务端响应的时候，客户端不必等到服务端响应结束，可以进行其他操作；

10. 如何解决跨域问题

详细解析可以参看我写的这篇文章：前端常见的跨域解决方法

11.简单谈一下cookie？

详细解析可以查看我写的这篇文章：聊一聊cookie

在这里主要描述一下面试时应该如何回答：

我的理解是，cookie是服务端用来维护会话状态信息的数据。当浏览器向服务器发送带有验证的请求时，服务器进行验证，生成cookie；然后服务器响应请求，并通过响应头的set-Cookie字段将生成的cookie返回给浏览器，那次浏览器提取cookie，然会将其保存在本地内存中。当下次再请求时，则将已经验证的cookie发送至服务器，服务器验证通过便响应请求；这样一来便可以实现一些用户登录状态等功能；
cookie的大小一般为4kb，并且只能够被同源的页面共享访问
服务器可以适应set-Cookie的相应头来配置cookie信息，一个cookie包括了5个属性。分别为expires、domain、path、secure、HttpOnly。其中expries定义的cookie的期限，domain是域名、path是路径，domain和path共同约束了cookie可以被哪些url访问。secure定义cookie是否在安全协议下发送，HttpOnly规定cookie只能被服务器反问，浏览器的js不能访问cookie。
在发送xhr跨域请求时，cookie不会自动添加到请求头部（Request Header），但是可以通过服务器和客户端进行限行设置

12.JS中几种模块化规范

对于CommonJS、AMD、CMD以及ES6 Module模块规范详细解析可以参考我写的这篇文章：JS中的几种模块化规范
在这里再总结一下：

第一种是Commonjs模块化规范：CommonJS模块化规范，它通过Require来引入模块，通过module.exports来定义模块的输出接口。其主要在服务端使用（比如Nodejs），因为其原理是同步加载，再服务端js代码都是存储在本地内存的，所以读取较快。而在浏览器中的模块的加载往往是需要通过网络请求，往往是需要通过异步加载的方式实现；
第二种是AMD方案：AMD方案使用的原理是异步加载模块，且其遵循的是依赖前置，即在定义模块时就要定义相关的依赖，并且这些模块会在加载完成之后直接执行，require.js实现了AMD规范
第三种是CMD模块，CMD模块加载模块的原理也是异步加载的，其遵循的是就近原则，对于需要加载的模块使用reqire path引入即可，并且模块的执行也是遇到requie才执行。
第四种是ES6 Module模块，其使用export形式定义模块，使用import的方式导入模块，ES6模块的加载时在编译时加载

13 Require.js的核心原理是什么？

概念
requireJS时基于AMD模块化加载规范，使用回调函数来解决模块化加载问题
原理
requireJS是使用script元素，通过script元的的src属性来引入模块
特点
实现js文件的异步加载
管理模块之间的依赖，便于代码的编程和维护

总：requireJS的核心原理是通过动态创建script脚本来异步引入模块，然后对每个脚本的load事件进行监听，如果每个脚本都加载完成了，再调用回调函数执行模块！

14.ECMScript6中怎样写class，为什么会出现class？

1.class的基本语法
创建类实例对象不同于构造方法，需要使用new关键字来创建

class Point{
	constrctor(){}
}

let p=new Point();

2.class是ES6新增的语法，我的理解是为了补充js中缺少的一些面向对象语言的特性。通过class可以有利于我们更好的组织代码，但class还是具有原型继承的思想，比如class中属性和方法可以添加在原型上，为所有类的实例对象所共享；

再详细一点关于ES6中class的说明可以参考我写的这篇文章：
ES6中的class

15. document.write和innerHTML的区别

使用document.write的内容会替代掉整个文档的内容，即会重写整个页面
使用innerHTML只是替代指定元素的内容，只会重写页面中部分内容
使用
document.write(‘xxxx’);
element.innerHTML=“xxxx”;

16.javascript中类数组对象的定义

1）类对象：拥有length属性和若干索引属性的对象都可以被称为类数组；
2）类数组对象和数组对象类似，只是类数组对象不能使用数组对象特有的方法（若想使用，需要将类数组对象转换为数组对象）
3）常见的数组是对象：arguments、DOM方法返回结果（NodeList、HTMLCollection）

17.类数组对象转换为数组对象的常见的方法

Array.prototype.slice.call(类数组);
[].slice.call(类数组);
Array.from(类数组）
[…类数组]----扩展运算符

    function fun() {
      console.log('arguments', arguments);

      //Array.prototype.slice.call(类数组);
      const arr1 = Array.prototype.slice.call(arguments)
      console.log('arr1', arr1)

      //[].slice.call(类数组);
      const arr2 = [].slice.call(arguments)
      console.log('arr2', arr2)

      //Array.from
      const arr3 = Array.from(arguments)
      console.log('arr3', arr3)

      //扩展运算符
      const arr4 = [...arguments]
      console.log('arr4', arr4)
    }

    fun(1, 2, 3, 4)

18.数组中有哪些原生的方法，举例以下？

数组和字符串的转换方法：toString(),join()，其中join可以接收特定字符串参数，将作为将数组转换为字符串时的分割符
数组尾部操作的方法：pop(),push()
数组首部操作方法：unshift(),shift()
数组重排序的方法：reverse(),sort()，其中sort几首一个函数作为参数，该函数规定了排序的方式
数组中的迭代方法：every(),forEach(),filter(),map()
数组中查找特定索引的方法：indexOf(),indexLastOd()
数组链接方法：concat()，返回的是拼接好的数组，不影响原数组
数组中截取方法：slice()，用于截取数组的一部分返回，不影响原数组
数组插入方法：splice()，影响原数组

19. 哪些操作会造成内存泄漏

19.1意外的全部变量的使用

即当我们使用一个未声明的变量时，实质上意外的创建了一个全局变量，而这个变量会一直留在内存中无法被收回

示例1：
Javascript处理未定义变量的方式比较宽松：未定义的变量会在全局对象创建一个新变量，在浏览器中，全局变量时window。

function foo(arg) { 
    bar = "this is a hidden global variable"; 
}

真相是：

function foo(arg) { 
    window.bar = "this is an explicit global variable"; 
}

函数foo内部忘记使用var，意外创建了一个全局变量，而使这个变量一直保存在内存中；

示例2：
另一种意外的全局变量可能由this创建：

function foo() { 
    this.variable = "potential accidental global"; 
} 
 
// Foo 调用自己，this 指向了全局对象（window） 
// 而不是 undefined 
foo();

如何避免这种情况呢？

在javascript文件头部加上’use strict‘，可以避免此类错误的发生。使用严格模式解析javascript，避免意外的全局变量

19.2被遗忘的定时器或回调函数

即当我们设置了定时器如setInterval，而忘记取消它的时候，如果循环函数有对外局部变量的引用的话，那么这个变量会一直保存再保存着

19.3脱离DOM的引用

即是当我们获取一个DOM元素的引用的时候，而后面这个DOM元素被删除，我由于我们一直保留着这个元素的引用，所以它也无法被回收

19.4闭包

闭包的不合理使用，从而导致某些变量一直被留在内存中

20. 如何判断当前脚本运行在浏览器（browser）还是在node环境种？

if(typeof window !== 'undefined'){
	console.log('browser');
}
if(typeof global !== 'undefined'){
	console.log('node');
}

或者


this===window?console.log('browser'):console.log('node');

通过判断Global对象是否未window，使window则允许再浏览器种，如果为undefined，则当前脚本运行再node环境下

21.移动端的点击事件有延迟，时间是多少，为什么会有？怎么解决这个问题？

移动端的点击延迟

移动端的点击延迟时间是300ms，因为移动端有默认的双击缩放操作，浏览器通过判断用户第一个此点击与第二次点击的时间，来确认用户是否是需要进行双击缩放的操作。（即浏览器点击后要等待300ms，看用户有没有下一次点击，来判断是不是双击）

怎么解决点击延迟

1）使用meta标签来禁用页面的缩放
ps：但是这种方式的缺点是牺牲了页面的缩放，我们不想要的只是双击双击缩放行为，我们还是希望能够通过双指来实现缩放的，

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

2）调用FastClick库
FastClick库的相关介绍：FastClick是专门为解决移动端浏览器300毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touched事件的时候，会通过DOM自定义事件立即触发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉，实现如下：

//引入fastclick
<script src="js/fastclick.min.js"></script>

// 原生js初始化
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

总：使用FastClick是最好的方案，不存在点击创投现象（对于点击穿透不熟悉的可以自行查一下资料）
可以参考这篇文章：https://blog.csdn.net/qq_42532128/article/details/106176195

22. 什么是“前端路由”？什么时候适合使用”前端路由”?“前端路由”有哪些优缺点？

1.前端路由：前端路由就是把路由对应的内容或者页面的任务交给前端来做，以前是通过服务器根据url的不同返回不同的页面实现的。
2.使用：在单页面应用中，大部分页面结构不变，只改变内容的使用。
3.一般有两种形式的前端路由，一是hash模式（#），二是pushState的方式
4.优缺点：

优点：用户体验好，不需要每次都从服务器获取，快速展现给用户
缺点：单页面无法记住之前滚动的位置，无法在前进、后退的时候记住滚动的位置

23.检测浏览器版本有哪些方式？

有两种方式：
1.通过检测window.navigator.userAgent的值，但是这种方式不是很可靠，因此这个值可以被改变（如早期的ei会伪装userAgent的值为Mozilla来躲过服务器的检测）
2.可以通过功能检测，根据每个浏览器独有的特性进行判断，如ie下独有的ActiveAObject

24. 什么是Ployfill

Ployfill的作用是为了解决API的兼容问题，比如在不同的浏览器中，支持的API有所差异，但是若想在不支持某API的浏览器中实现这个功能，则需要引入Ployfill（当然也可以自己写）
举个例子：（有些旧的浏览器不支持Number.isNan方法mPloyfill可以是这样的：）

  if(!Number.isNaN){
      Number.isNaN=function(num){
      //（假如浏览器没有Number.isNan方法，那么就给它添加上去）
        return (num!=num)
      }
    }

25.使用JS实现获取文件扩展名

方式1（使用split与pop方法）



<head>
<script type="text/javascript">
function fnGetExtension() {
  //通过id获得文件输入元件 
  var fileInput = document.getElementById('myFile');
  //获得文件名
  var fileName = fileInput.files[0].name;

  //获得文件扩展名 
  var fileExtension = fileName.split('.').pop();
  alert(fileExtension);
}
script>
head>
<body>
<form action="/uploadFile" onsubmit="return false;">
  <input id="myFile" type="file" name="file">
  <button onclick="fnGetExtension()">获得扩展名button>
form>
body>
html>

方式2 使用正则表达式

###Vue部分
https://zhuanlan.zhihu.com/p/111310865

26. 介绍以下js中的节流和防抖

26.1 节流（通过设置perTime与nowTime）

节流技术是用于设定在固定事件内，执行特定的功能代码，如果同一单位事件内某事件被多次触发，那么只有一次生效（节流可以用在scroll函数的事件监听上，通过事件节流来降低事件调用的频率）

26.2 防抖（通过定时器）

在时间触发n秒后再执行回调，如果这n秒内事件又被触发，则重新计时
比如在搜索功能时，用户输入关键字搜索，不用每次输入都发送请求显示数据，只有等待用户停止输入后等待一定的时间（确保用户不再输入），再执行特定功能的代码。
所用的技术是定时器，和闭包技术

1.防抖的实现

   //防抖的实现
    function debounce(fun, wait) {
      let timer = null;
      //所以下面的匿名函数适应的函数外部的变量，这里是闭包的作用
      return function () {
      //清空计时器是为了当事件又被触发时，重新计时
        clearInterval(timer)
        timer = setInterval(() => {
          fun.apply(this)

        }, wait)
      }
    }

    var result = debounce(fun1, 1000)
    result()

2.节流的实现


    function limtfun(fun, wait) {
      var perTime = 0;
      return function () {
        var nowTime = new Date()
        if (nowTime - perTime > wait) {
          fun.call(this)
          perTime = nowTime//由于闭包的原因，这里的nowTime不会被清空
        }
      }
    }

27. Object.is()与原来的比较操作符“===” 与“==”的区别

“==”两等号在进行比较时，若两边的类型不一致，则会进行隐式的类型转换（比如‘1’->1、true->1,false->0、{}->[Object Object]
三等号比较时不进行隐式类型转换，类型和值有一不同则会返回false
而Object.is()则是在三等好的判别基础上做了特殊的处理，使得-0和+0不再相当，而NaN与NaN会返回true
Object.is()被认为具有特殊用途，但不能说时Object.is()比其他的相等对比更加严格或者宽松

28.浏览器中的事件循环机制（Event Looping）

JS在执行的过程中会产生一个执行环境，js的代码在这个执行环境中按顺序执行，当遇到异步代码时，会被挂起到事件队列中（Task），对于这个队列中的任务则会涉及到微任务和宏任务，当执行栈的为空时，由于事件循环机制，就会从事件队列中拿出需要执行的代码到执行栈中执行，此时执行的循序时先执行微任务，当微任务执行完毕之后，再执行宏任务。

29.instanceof的原理

instanceof可以正确判断对象的类型
用于判断某个实例是否属于某个构造函数
在继承关系中用来判断一个实例是否属于它的父类型或者祖先类型的实例；
实现原理是通过判断实例对象的原型属性__proto__和构造函数或者父类的原型对象prototype是否相等，循环遍历，相等则返回true；（简单的说就是只要左边的变量原型链上有右边变量的prototype属性即可）

1）语法

var obj=new Object()
obj instanceof Object  //true

2)底层原理

   function myInstanceof(left, right) {
      left = left.__proto__;
      right = right.prototype;
      while (true) {
        if (left === null || left === undefined) {
          return false
        }
        if (left === right) {
          return true
        }
        //即上面均不满足时，继续往原型链上查找
        left = left.__proto__;
      }
    }

参考文章：https://zhuanlan.zhihu.com/p/105487552

30. 手写封装一个jsonp

  function jsonp(url, data, callback) {
      //产出随机的回调函数名（因为可能有多个请求，这里可以区别开来）
      var funcName = 'jsonp_' + Date.now() + Math.random().toString().substr(2, 5);
      //如果存在其他传入参数，需要进行拼接
      if (typeof data === 'object') {
        var tempArr = [];
        for (var key in data) {
          var value = data[key];

          tempArr.push(key + '=' + value)
        }
        //将数组以&拼接成字符串，如name=h$age=21
        data = tempArr.join('&')
      }
      var script = document.createElement('script')
      script.src = url + '?' + data + 'callback=' + funcName
      document.body.appendChild(script);
      //这里得到请求的数据，在回调函数中执行处理
      window[funcName] = function (data) {
        callback(data)
      }
    }

    //使用
    jsonp('http:127.0.0.1:3000/api', {}, function (res) {
      console.log(res)
    })

参考文章：
https://blog.csdn.net/weixin_40483654/article/details/106434990

31.有几种方式可以实现存储功能？分别有什么有优缺点？什么是Service Worker？

31.1 实现的存储功能

实现存储功能：Cookie、localStorage、sessionStorage、indexDB

特性	Cookie	localStroage	sessionStorage	indexDB
数据生命周期	一般由服务器生成，可以设置过期事件	除非被清理，否则一直存在	页面关闭时就被清理	除非被清理，否则一直存在
数据存储大小	4kb	5mb	5mb	无限
与服务端的通信	会一直携带在请求头	不参与下	不参与	不参与

PS：没有大量的数据需求的话，可以使用localStorage和sessionStorage，对于不怎么改变的数据，尽量使用localStorage。

31.2 什么是Service Worker

Service Worker是运行在浏览器背后的独立线程，一般可以用来实现缓存功能，使用Service Worker的话，传输协议必须使用HTTPS。
使用Service Worker实现缓存一般分为三个步骤：
1）首先要注册Service
2）监听install，拿到需要缓存的文件
3）下次用户访问的时候就可以通过拦截请求方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据

32.浏览器中的缓存机制

缓存可以是性能优化中简单高效的一种方式
对于一个数据请求，分为3个阶段，分为网络请求、后端处理、浏览器响应。浏览器缓存可以帮助我们在第一和第三步中优化性能。比如直接使用缓存而不发请求，或者发请求但后端的数据与前端一致，那么就没有必要再将数据回传回来，这样就减少可数据响应。

接下来我们将通过以下几个方面来探讨浏览器的缓存机制

缓存位置
缓存策略
实际场景应用缓存策略

32.1 缓存位置

我知道的浏览器的缓存位置有Service Worker、网络请求，并且有各自的优先级，当一次查找缓存并且都没有命中的时候，才会请求网络。

32.2 缓存策略

通常浏览器的缓存策略可以分为两种：强缓存和协商缓存。并且这两种缓存策略都是通过设置 HTTP Header 来实现的

1）强缓存（有两种设置方式）

Expires：缓存受限于本地的时间
Cache-Control：通过max-age来设置缓存的时间期限

2）协商缓存（两种设置方式）
简单的说，如果缓存过了，就需要发起请求验证资源是否更新。即当浏览器发送请求验证时，如果资源没有发生改变，那么服务器就返回304状态码，并更新浏览器的缓存有效期。（相当于浏览器和服务器进行协商，是否返回新的数据）

Last-Modified
Last-Modified表示本地文件最后修改日期，当 Last-Modified的值发送给服务器，循环服务器在该日期后资源是否有变更，有则返回新的资源，否则返回304状态码
ETag
当ETag的值发送给服务器，询问该资源是否有更新，有则返回新的资源（并且ETag的资源比Last-Modified高）

32.3 实际场景应用缓存策略

一般来说，现在都会使用工具来打包代码，那么我们可以对文件名进行哈希处理，只有当代码修改之后生产新的文件名。基于此，我们就可以给代码设置缓存有效期一年Cache-Control：max-age=3153600，这样只有html文件中引入的文件名发生了改变，才回去下载新的代码，否则就一直使用缓存。

33. 插入几万个DOM，如何实现页面不卡顿？

使用分页技术
若不分页，则使用虚拟滚动技术（比如elment-ui中的scrollbar可以实现）

虚拟滚动：原理时只渲染可视区域内的内容，非可视区的则不渲染，当用户在滚动的时候就实时去替换渲染的内容。

34.什么情况下会产生渲染堵塞？

我们知道，在浏览器的渲染线程和JS引擎线程时互斥的，因此在渲染时，若遇到script标签时，则此时会渲染会停止下来，等待script代码加载完毕，再从暂停的地方重新渲染。也就是说，当你想首屏渲染越快，那么就不应该再首屏加载js文件，也就是建议将script标签放在body标签底部的原因。当然，你也可以给script标签添加defer或者async属性，那么此时的script可以放在任意位置，因为此时js文件会并行下载，若时defer，会等待页面渲染结束才执行，而async会在加载完毕之后立即执行。
只是defer和async表示js文件的加载和解析不会阻塞渲染。‘

35. 重绘和回流

重绘是节点更改了外观而不影响布局，比如更改元素的color属性
回流是改变了节点的布局或者几何属性，比如改变元素的宽高等属性
回流必然发生重绘，重绘不一定引发回流。

36. 减少重绘和回流

1.使用transform替换top
2.使用visibility替换display：none，因为前者只会引发重绘，而后者会引发回流
3.少用table布局，因为table布局很小的一个改动会引发整个table的重新布局
4.将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。（比如video标签，浏览器会自动将该节点变为图层）

37. 什么是XSS攻击？如何防止XSS攻击？

1.XSS攻击

XSS（Cross-Site Scripting）—跨站脚本攻击，简称XSS，是一种代码注入攻击，攻击者通过在目标网址注入恶意脚本，使之在用户的的浏览器上运行。利用这些恶意脚本，攻击者获取用户敏感信息如Cookie、SessionID等，进而危害数据安全
XSS的本质：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行

2. 如何防止

由于问题的源头是js代码的注入，那么我们便想办法不让js生效
方式1：使用转义字符
即需要注意两头的防范：
1）输入
在提交表单时，前端最好将文本内容转成html实体编码，也就是过滤掉

你可能感兴趣的:(Web前端面试题,JavaScript)

移动端城市区县二级联动选择功能实现包 good2know
本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
用代码生成艺术字：设计个性化海报的秘密
本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录二倍速播放前端 vue.js
1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
12. 什么是事件委托 yqcoder 前端面试-CSS css 面试
总结事件委托（EventDelegation）是JavaScript中一种重要的事件处理机制，它利用了事件冒泡的特性，将事件的处理程序绑定到父元素或祖先元素上，而不是直接绑定到具体的子元素上。什么是事件委托？事件冒泡：在DOM中，事件通常会从触发元素开始，然后逐级向上冒泡到其父元素、祖先元素，直到window对象。核心思想：事件委托的核心思想是利用事件冒泡机制，在父元素上监听事件，而不是在每个子元
关于前端的性能优化
性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
时间组件库Day.js那些事前端小白花 javascript 开发语言 ecmascript
一、简介1.什么是Day.jsDay.js是一个轻量级，易于使用的JavaScript日期库，提供了强大的日期和时间处理功能，与Moment.js的API设计相似，但具有更高的性能和更小的体积。Day.js官网https://day.js.org/docs/zh-CN/installation/installation2.优势a.特点轻量级：Dayjs的压缩后大小只有2KB左右，远小于Moment
JavaScript正则表达式去除括号但保留内容与去除括号与内容 Selicens javascript 正则表达式
项目上碰到一个需求，是取多个递增文件的文件名，类似于test(1).txt、test(2).txt，但是不需要括号，只要test1、test2这种格式，最开始想到的办法就是js里的replace替换，先上一个比较笨但是也能实现效果的例子letname="test(1).txt"letdata=name.split('.')[0].replace('(','').replace(')','')con
网络安全第14集不灭锦鲤 web安全安全
前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后
25年不倒的“犀牛书“：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？阿蒙Armon javascript 开发语言 ecmascript
25年不倒的"犀牛书"：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？当一本技术书能连续畅销25年，历经7次迭代仍稳坐领域第一梯队，它必然藏着超越时代的硬实力。《JavaScript权威指南（原书第7版）》就是这样一部传奇——豆瓣9.4分的封神之作，程序员口中的"犀牛书"，从网景时代到ES2020，它始终是JavaScript开发者的终极参考书。如果你还在为原型链、闭包、异步编
什么是JSON，如何与Java对象转化 doublez234 java json spring spring boot
JSON概念JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它易于人阅读和编写，同时也易于机器解析和生成。JSON基于JavaScript（ECMAScript（欧洲计算机协会制定的js规范））编程语言的一个子集，但它是一种独立于语言的数据格式，被广泛应用于各种编程语言和平台之间的数据交换。JSON的主要特点：轻量级：JSON格式非常简洁，只包含必要的数据信
APP开发入门：了解主流的编程语言 agi大模型 Python 职业与职场程序员开发语言数据分析编程语言
前言在过去的几年里，有许多程序员开始学习和使用编程语言。这其中包括C、C++、Java和Python。尽管有许多语言可供选择，但大多数程序员都会选择最容易学习的编程语言。如今，有很多编程语言供选择。程序员们在学习这些语言时可以自由地选择他们喜欢的方式，因为他们的目标是构建任何软件，而不仅仅是创建一个应用程序。你可以在Linux上学习C/C++、Java、Python、C#或JavaScript，你
探秘CommonJS：Node.js模块化核心解析
CommonJS是JavaScript的模块化规范，主要应用于服务器端环境（尤其是Node.js），其核心目标是解决代码组织、依赖管理和作用域隔离问题。以下是其核心要点：一、核心特性同步加载模块通过require()同步加载并执行，后续代码需等待模块加载完成后执行，适用于I/O快速的服务器环境（如本地文件读取）。作用域隔离每个文件视为独立模块，模块内定义的变量、函数默认私有（不污染全局作用域），仅
壹脉销客AI电子名片源码核心架构
为什么选择源码部署AI电子名片？在数字化转型浪潮中，越来越多的企业意识到拥有自主可控的电子名片系统的重要性。源码部署相比SaaS服务具有三大核心优势：数据完全自主-客户信息存储在企业自有服务器深度定制自由-可根据业务需求二次开发长期成本优化-一次部署永久使用壹脉销客AI电子名片源码核心架构壹脉销客提供的企业级电子名片解决方案采用前后端分离架构：前端技术栈（小程序端）javascript//小程序a
vue 进入一个页面，然后离开这个页面他就重新加载 Java&Develop vue vue
vue进入一个页面，然后离开这个页面他就重新加载这个代码导致的注释即可window.location.reload();window.location.reload()是JavaScript中的一个方法，用于强制刷新当前页面（重新加载页面内容）。其作用类似于用户手动点击浏览器的刷新按钮，但可以通过代码精确触发。核心作用：刷新页面重新加载当前显示的文档（即重新请求当前URL的资源）。可选参数控制缓存
[python][flask]flask静态资源
在Flask中，静态资源（如图片、CSS文件、JavaScript文件等）通常存储在项目的static文件夹中。Flask会自动为静态资源提供服务，使得你可以通过URL访问这些文件。以下是关于Flask中静态资源的使用方法和一些高级配置。1.默认静态文件夹Flask默认会将项目根目录下的static文件夹作为静态资源目录。例如，如果你的项目结构如下：my_flask_app/│├──app.py├
JavaScript对象与Math对象完全指南 hui函数 Javascript javascript 前端开发语言
JavaScript对象与Math对象完全指南对象基础概念与操作对象是什么？数据集合：包含相关数据和功能的容器结构组成：属性：描述对象特征的变量（名词性）方法：对象可执行的操作（动词性，本质是函数）对象创建与访问//创建对象letperson={ //属性 name:"张三", age:28, profession:"软件工程师", //方法 introduce(){ return`大家好，我
深入理解JavaScript作用域与编译过程君子心理作用域编译 JavaScript 变量提升闭包
背景简介在编程领域，作用域和编译过程是理解语言机制的关键概念。JavaScript作为一种广泛使用的语言，其作用域规则和编译机制尤其值得我们深入探讨。本文将基于《你不懂JS》系列书籍中的相关内容，解析JavaScript的作用域系统、函数闭包以及编译过程，帮助读者获得更深层次的理解。作用域是什么？在JavaScript中，作用域定义了变量和函数的可访问范围。编写程序时，我们会频繁使用变量来存储和操
掌握JavaScript对象与函数：深入理解原型与作用域土城三富 JavaScript 对象原型链函数作用域
掌握JavaScript对象与函数：深入理解原型与作用域背景简介在探索JavaScript的世界时，我们经常遇到对象和函数这两个核心概念。对象是JavaScript中最为基本的结构之一，而函数则是实现代码复用、封装和模块化的主要工具。本文将基于给定的书籍章节内容，深入探讨对象的更新机制、原型继承以及函数的多样性及其调用模式，同时分享对全局变量使用的思考。更新对象在JavaScript中，对象的属性
JavaScript函数使用模式与作用域的深入解析
JavaScript函数使用模式与作用域的深入解析JavaScript作为一门灵活且功能强大的编程语言，其函数的使用和作用域的特性是学习和开发中的关键点。本篇博客将深入解析JavaScript函数的几种使用模式，以及作用域的重要概念。构造器模式在JavaScript中，函数可以作为构造器（constructor）使用，当用new关键字调用时，函数会返回一个新对象。为了区分构造器函数和其他普通函数，
掌握JavaScript函数和作用域：提高代码复用性捕风捉你 javascript 开发语言 ecmascript
在JavaScript编程中，函数是一个核心概念，它不仅能帮助我们将代码组织得更加清晰，还能提高代码的复用性。理解函数的定义与调用、掌握作用域的概念，对于编写高效和可维护的代码至关重要。本文将通过创建一个计时器应用的案例，帮助你全面掌握JavaScript中的函数和作用域知识。任务目标通过本教程，你将学习并掌握：函数的声明与调用函数表达式的使用作用域的概念及其在函数中的应用闭包的原理及实践学习内容
JavaScript 函数与作用域前端人类学 JavaScript -行为 javascript 函数作用域闭包递归作用域链
Hi，我是布兰妮甜！JavaScript是一种动态类型语言，它支持面向对象编程和函数式编程。函数是JavaScript的核心组成部分之一，而作用域则决定了变量的可见性和生命周期。本文将详细介绍JavaScript中的函数定义、调用、参数传递、闭包、递归以及作用域链的概念。文章目录一、函数基础二、作用域基础三、闭包四、递归五、作用域链六、总结一、函数基础1.定义函数函数声明函数可以通过函数声明的方式
深入理解作用域【JavaScript】陆仟 Web前端开发 javascript
一、作用域的内部原理JavaScript的作用域机制是理解变量如何被访问和存储的重要概念。下面详细介绍作用域的内部原理，包括编译、执行、查询、嵌套和异常处理这五个步骤。1.编译在JavaScript的执行过程中，首要的步骤是编译。尽管JavaScript是解释性语言，但现代JavaScript引擎（如V8）在执行代码前会先进行编译。编译阶段主要完成以下几项工作：词法分析：将源代码分解成语法单元（t
即便你已经在浏览器中启用了 JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由 JavaScript 冲突
即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干
技术文章大纲：Anaconda插件开发挑战赛引言介绍Anaconda在数据科学和PythonUH开发中的重要性 aadwje eclipse ide
即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干
深入分析 Node.js 的 V8 引擎如何在内部处理 JavaScript 代码，包括内存管理和垃圾回收机制。海派程序猿 node.js javascript 开发语言
各位观众老爷们，晚上好！今天咱们就来聊聊Node.js的大心脏——V8引擎，看看它到底是怎么把咱们写的JavaScript代码给“消化”掉的。别害怕，今天咱不搞那些生涩难懂的学院派理论，尽量用大白话，外加一些“栗子”，保证让你听得津津有味。V8引擎：JavaScript的超级翻译官首先，简单介绍一下V8。V8是Google开发的高性能JavaScript和WebAssembly引擎，用C++写的。
Tailwind CSS 响应式设计实战指南 qcidyu 用户体验代码优化移动优先网站布局前端开发 Tailwind CSS 响应式设计
title:TailwindCSS响应式设计实战指南date:2024/6/13updated:2024/6/13author:cmdragonexcerpt:这篇文章介绍了如何运用TailwindCSS框架创建响应式网页设计，涵盖博客、电商网站及企业官网的布局实例，包括头部导航、内容区域、侧边栏、页脚及轮播图等组件的响应式实现。同时，探讨了与JavaScript框架集成、CSS预处理器配合、设计
JavaScript核心概念全解析
目录1.作用域(1)局部作用域(2)全局作用域2.垃圾回收(1)引用计数法(2)标记清除法3.闭包(1)作用(2)风险4.变量提升(1)var(2)let和const(3)const5.函数提升(1)函数声明(2)函数表达式6.函数参数(1)动态参数(2)剩余参数(3)展开运算符7.必须加分号的两种情况(1)立即执行函数(2)使用数组的时候8.箭头函数(1)特点9.Symbol10.生成器函数11
IntelliJ IDEA 高效开发指南：从基础操作到高级技巧 zqmgx13291 intellij-idea java ide
一、IDEA概述与环境配置1.1IDEA的核心优势智能代码辅助：基于上下文的代码补全（Ctrl+Space）、方法参数提示、错误实时检测全栈开发支持：内置Java/Python/JavaScript等20+语言支持，框架集成（SpringBoot/Vue/React）工具链集成：版本控制（Git/SVN）、数据库（MySQL/PostgreSQL）、容器（Docker/K8s）一站式开发性能优化：
【前端】JavaScript 的事件循环 (Event Loop) 不懂可否前端前端 javascript 开发语言
JavaScript的事件循环(EventLoop)是其实现异步编程的核心机制，即使JS是单线程语言，它也能高效处理I/O、网络请求、计时器等非阻塞操作。以下是其工作原理的精要解析：核心概念单线程执行JS引擎（如V8）只能顺序执行一个任务。异步行为需要靠宿主环境（浏览器/Node.js）提供的事件循环调度。任务队列(TaskQueue)所有异步操作完成后对应的回调函数会进入队列等待执行。队列类型包
统一思想认识永夜-极光思想
1.统一思想认识的基础,才能有的放矢原因: 总有一种描述事物的方式最贴近本质,最容易让人理解. 如何让教育更轻松,在于找到最适合学生的方式. 难点在于,如何模拟对方的思维基础选择合适的方式. &
Joda Time使用笔记 bylijinnan java joda time
Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法： /** * DateTime变化（增减） */ @Tes
FileUtils API eksliang FileUtils FileUtils API
转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。非常的好用。
各种新兴技术不懂事的小屁孩技术
1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。现在构建系统常用到maven工具，现在有更容易上手的gradle，搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
tomcat6的https双向认证酷的飞上天空 tomcat6
1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
托管虚拟桌面市场势不可挡蓝儿唯美
用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
spring学习——xml文件的配置 a-john spring
在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
HDU 4342 History repeat itself 模拟 aijuans 模拟
来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
java中最常用jar包的用途 asia007 java
java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法. w
ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法百合不是茶 js json编码返回异常
一:ajax获取自定义Struts框架中的json编码出现以下问题: 1,强制flush输出 json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面却没有跳转到错误页面 3, ajax中的dataType的json 改为text 会
JUnit使用的设计模式 bijian1013 java 设计模式 JUnit
JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。
Linux常用命令（摘录） sunjing crond chkconfig
chkconfig --list 查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080 查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量安装编译器 yum install -y gcc
【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
Anychart图表系列五之事件监听白糖_ chart
创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
Web前端相关段子 braveCS web前端
Web标准：结构、样式和行为分离使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
编程之美-24点游戏 bylijinnan 编程之美
import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
主页面子页面传值总结 chengxuyuancsdn 总结
1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
[网络与经济]互联网+的含义 comsci 互联网+
互联网+后面是一个人的名字 = 网络控制系统互联网+你的名字 = 网络个人数据库每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
oracle 创建视图 with check option daizj 视图 view oralce
我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。然后我们来看一下视图包含的结果： select * from testv
ToastPlugin插件在cordova3.3下使用 dibov Cordova
自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。 ToastPlugin.java package&nbs
C语言22个系统函数 dcj3sjt126com c function
C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
开发一个类的流程 dcj3sjt126com 开发
本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
java 并发 shuizhaosi888 java 并发
能够写出高伸缩性的并发是一门艺术在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
Spring Security（11）——匿名认证 234390216 Spring Security ROLE_ANNOYMOUS 匿名
匿名认证目录 1.1 配置 1.2 AuthenticationTrustResolver 对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajax nodejs express
一、前言通过上节学习，我们已经 ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务及 mongodb的存取，但写着写着，web端就
在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks java html struts checkbox
第一种方法：获取结果String类型在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。以下是实现的代码：前台 HTML 代码：
003.Kafka基本概念 nweiren hadoop kafka
Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：消息源（Message）的分类。 Partition： Topic物理上的分组，一
Linux环境下安装JDK roadrunners jdk linux
1、准备工作创建JDK的安装目录： mkdir -p /usr/java/ 下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html 把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
Linux忘记root密码的解决思路 tomcat_oracle linux
1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除　　例如: 　　ro
跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonp jquery 框架 UI html5
postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他