服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - 编程技术 - 前端的十个问题,你知道几个?

前端的十个问题,你知道几个?

2023-12-15 14:27读心悦 编程技术

造成变量提升的现象,是因为使用var关键字声明的变量,变量提升的时候,只有声明在提升,变量赋值并没有提升,在变量初始化之前访问该变量,就会返回undefined。使用let或者const声明变量,就形成暂时性死区,在let或者const声明

01、null和undefined

undefined是全局对象的一个属性,当一个变量没有赋值或者访问一个对象不存在的属性,这时候都是undefined。

null:表示是一个空对象。在需要释放一个对象的时候,直接赋值为null即可。

02、箭头函数

箭头函数是ES6新增的,简化函数的定义。箭头函数没有自身的this,所以this是从外部获取的,也就是继承了外部的执行上下文。

箭头函数不能作为构造函数,如果通过call()或者apply()调用箭头函数的时候,不需要绑定this,直接传入参数即可。

03、call、apply和bind的作用

bind、call和apply都是改变函数this的指向。 bind在改变this的时候,返回的是一个改变执行上下文的函数,不会立即执行。 call和apply在改变this指向同时也执行该函数。 bind只有一个参数,call和apply可接收多个参数,第一个参数是this的指向。apply的第二参数是一个数组。

04、函数的this

this是函数的执行上下文,分为全局执行上下文和函数执行上下文。

this在严格模式下,指向的是undefined,非严格模式下默认指向window。

函数的this,在函数被调用的时候,指向的是函数的调用者,也就是谁调用,就指向谁。

如果通过new 构造函数创建一个新的对象,那么构造函数的中的this指向新对象本身。

普通函数不继承this,箭头函数没有this,它是继承外部的this。

05、变量提升

变量提升是指js的变量和函数在编译的时候提升到最前面。

造成变量提升的现象,是因为使用var关键字声明的变量,变量提升的时候,只有声明在提升,变量赋值并没有提升,在变量初始化之前访问该变量,就会返回undefined。使用let或者const声明变量,就形成暂时性死区,在let或者const声明变量之前访问变量会报错。

06、map和forEach的区别

map有返回值,可以开辟新的空间,return返回一个长度和原数组长度一样的新数组。

forEach函数没有返回值,返回的undefined。

map的处理速度比forEach快,返回新数组,这样方便链式调用其他数组方法,比如filter、reduce等等。

07、怎么理解事件循环、微任务和宏任务

浏览器的事件循环是执行js代码的时候,遇见同步任务,直接推进调用栈中执行,遇到异步任务时候,将异步任务挂起,等到异步任务有返回之后再推到任务队列中。

当调用栈中所有的同步任务执行完成,将任务队列中的任务按照顺序执行。重复执行这一系列的行为就是事件循环。

异步任务又分为宏任务和微任务。宏任务就是任务队列中的任务,每一个宏任务中包含一个微任务队列;

微任务:就是等宏任务中的主要功能执行完成后,渲染引擎并没有立即执行下一个宏任务,而是执行当前宏任务中的微任务。

宏任务包含:script标签内的代码、定时器、Ajax请求

微任务:Promise

08、跨站点请求伪造CSRF

攻击者盗用用户的身份,以用户的身份发起恶意请求。但是对于服务器来说,这个请求是合理的。

预防CSR攻击方法:

  1. 使用验证码,强烈要求用户和应用进行交互
  2. 在http中referer字段,检查是否是从正确的域名访问过来,它记录了http请求的来源地址
  3. 使用token验证,在http请求头中添加token字段,在服务器端设置一个拦截器来验证token,如果token无效,那么拒绝访问

09、XSS攻击

XSS攻击是脚本攻击,攻击者通过向web页面插入script代码,在用户浏览这个页面时候,执行script的脚本代码,达到攻击的目的。

预防:对数据进行严格的输出编码,比如URL编码、css编码、JavaScript编码。

10、浏览器如何渲染页面的

浏览器从服务器获取到html后,将html转化为DOM树,再将css样式转化为对应的stylesheet,根据DOM树和stylesheet绘制成页面。

原文地址:https://mp.weixin.qq.com/s/7LunVVZMEHmeiYRgd0oM8Q

延伸 · 阅读

精彩推荐
  • 编程技术前端开发者应该关注的十个技术趋势

    前端开发者应该关注的十个技术趋势

    前端开发是指通过编码和其他应用程序(如 HTML,CSS 和 JavaScript)为 Web 网站开发用户界面。本文就 2021 至 2022 年,前端开发的发展趋势进行预测和讨论。...

    前端之巅4422022-01-24
  • 编程技术chatgpt 1020 错误码成功解决的三种方案(推荐)

    chatgpt 1020 错误码成功解决的三种方案(推荐)

    造成1020错误的主要原因是代理问题,当打开代理时,登录该网站会直接显示上述错误“Access denied Error code 1020”,怎么解决这个问题呢,下面小编给大家带...

    GIS 数据栈7082023-05-23
  • 编程技术14 个非常实用的CSS属性技巧

    14 个非常实用的CSS属性技巧

    学习一些好的实用的 CSS 技巧,可以帮助我们提供工作效率。因此,今天这篇文章,我将跟大家分享一些很棒的CSS知识技巧,希望对你有用。...

    web前端开发9222022-11-01
  • 编程技术汇编语言无效指令错误概述

    汇编语言无效指令错误概述

    此错误仅适用于奔腾 处理器、奔腾处理器与MMX技术、奔腾OverDrive处理器 和奔腾OverDrive处理器带有MMX技术。 奔腾Pro处理器, 奔腾II处理器和i486及更早版本处...

    编程技术网9602022-08-28
  • 编程技术Hadoop 数据迁移用法详解

    Hadoop 数据迁移用法详解

    需要将数据源集群的/etc/hosts中的hadoop节点拷贝到目标集群所有节点的/etc/hosts中,保证新集群所有节点可以ping同老集群所有节点;...

    Java大数据与数据仓库9012021-06-09
  • 编程技术关于HTML的语义化标签和无语义化标签

    关于HTML的语义化标签和无语义化标签

    这篇文章主要介绍了关于HTML的语义化标签和无语义化标签,语义化的标签,旨在让标签有自己的含义,让浏览器认识这个标签所传达的信息,是干什么的有...

    贵小蟀9292023-04-14
  • 编程技术Verilog 设计方法及流程详解

    Verilog 设计方法及流程详解

    这篇文章主要为大家介绍了Verilog 设计方法及流程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...

    向阳逐梦4072023-04-12
  • 编程技术大数据之分布式协调神器:Zookeeper选举

    大数据之分布式协调神器:Zookeeper选举

    分布式系统设计成主从节点主要是为了保障数据一致性,主从设计是一种最直观的数据一致性保障机制。...

    大数据左右手5412021-08-26