3.4-前端的10个问题

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绘制成页面。