web前端如何准备面试工作？？

左手的ㄟ右手 2022-03-16 06:58 272阅读 0赞

其实我也不知道要怎么准备面试工作，我一直在准备，时刻准备着面试。既然不知道要怎么准备，那我就看看书吧，顺便推荐你看看。我要推荐一本书，《javascript 忍者秘籍2》，每次阅读都有不一样的收获。之前推荐这本书，只是简单的介绍了里面大概的目录结构。这一次我想对于每一个章节里我不懂的地方，或者说我认为重要的地方说一说。

关于这些知识点网上百度搜一大堆，比我写的好的多了去了，但是我还是要写，别人写的终究是别人的，我自己写了，记住了才是我的。同时也是自己对知识的二次记忆。

首先声明，文章里面所有的图片内容都来自书籍中，一千个读者就有一千个哈利波特，每个人的理解都不一样。我建议你去读读这本书，如果有不对的地方请指出

`JavaScript` 应用能在很多环境中执行。但是 `JavaScript` 最初的运行环境是浏览器环境，而其他运行环境也是借鉴于浏览器环境。

我们需要了解`javaScript` 工作核心原理和浏览器提供的核心 `api`

我们所接触的大部分东西都有他的生命周期，比我们前端三大框架中 `vue` 和 `react`

还一个我没有接触过，就不说了，逃

都有一个从开始到结束的过程。我们的前端页面也是一样的，只是我们平时忽略他罢了。当我们在浏览器地址栏里面输入一串 `url` 开始他的生命周期就已经开始了，当我们关闭网页的时候他的生命周期就结束了。如图所示

作为用户我们所关注的是页面的构建和事件的处理

页面构建又可以分为解析 `HTML` 代码并且构建文档对象模型 `DOM` 和执行 `JavaScript` 代码

注意了 `DOM` 是根据 `HTML` 代码来创建的，但是两者并不是相同的。我们可以把 `HTML` 代码看作浏览器页面 `UI` 构建初始 `DOM` 的蓝图。为了正确构建每个 `DOM`，浏览器还会修复它在蓝图中发现的问题。比如在 `p` 元素里面包裹 `div` 元素，最终渲染的并不是父子关系，而是兄弟关系。

当解析到脚本元素时，浏览器就会停止从 `HTML` 构建 `DOM`，并开始执行 `JavaScript` 代码。为了避免解析 `JavaScript` 代码花费太长时间，而阻塞页面渲染。我们都是建议把`JavaScript` 代码放到 `body` 元素后面.

浏览器暴露给 `JavaScript` 引擎的主要全局对象是 `window` 对象，它代表了包含着一个页面的窗口。 `window` 对象是获取所有其他全局对象、全局变量（甚至包含用户定义对象）和浏览器 `API` 的访问途径。全局 `window` 对象最重要的属性是 `document`，它代表了当前页面的 `DOM`。

包含在函数内的代码叫作函数代码，而在所有函数以外的代码叫作全局代码。 执行上下文也分两种 全局执行上下文和函数执行上下文；当 `JavaScript` 程序开始执行时就已经创建了全局上下文；而函数执行上下文是在每次调用函数时，就会创建一个新的

页面构建完了之后变进入第二个阶段，事件处理

浏览器执行环境的核心思想基于：同一时刻只能执行一个代码片段，即所谓的单线程执行模型。采用事件队列来跟踪发生但是尚未执行的事件

[函数具体介绍请看这][Link 1]

`JavaScript` 解析器必须能够轻易区分函数声明和函数表达式之间的区别。如果去掉包裹函数表达式的括号，把立即调用作为一个独立语句 `function() {}(3)`， `JavaScript` 开始解析时便会结束，因为这个独立语句以 `function` 开头，那么解析器就会认为它在处理一个函数声明。每个函数声明必须有一个名字（然而这里并没有指定名字），所以程序执行到这里会报错

问： `var samurai = (() => "Tomoe")();` 和 `var ninja = (() => {"Yoshi"})();` 分别返回什么？

函数具有属性，而且这些属性能够被存储任何信息，我们可以利用这个特性来做很多事情；例如：

//储存函数,利用函数具有属性，而且这些属性能够被存储任何信息
    let store = {
      nextId:1,
      cache:{},
      add(fn){
        if(!fn.id && typeof fn =='function'){
          fn.id=this.nextId++
          this.cache[fn.id]=fn
          return true
        }
      }
    }
    //记忆函数
    function isPrime(value){
      if(!isPrime.answers){
        isPrime.answers = {}
      }
      if(!isPrime.answers[value]){
        console.log(1)
        return isPrime.answers[value] = value
      }
      console.log(3)
      return isPrime.answers[value]
    }
    isPrime(2)
    复制代码

Number、String 和 Boolean，三个构造器是两用的，当跟 new 搭配时，它们产生对象，当直接调用时，它们表示强制类型转换。

parseInt 和 parseFloat 精致转化

我们在给函数传参数的时候，除了有我们显示传入的实参之外，其实还包含了两个隐士参数 `this` 和 `arguments`。`this` 表示被调用函数的上下文(在什么环境下调用，就指向什么）。`arguments` 表示函数调用过程中传递的所有参数

`arguments` 是伪数组，在 `es6` 中有一个剩余参数的概念，剩余参数是一个真正的数组

特例： 箭头函数的 `this` 与声明所在的上下文的相同，无论何时在哪调用，只和声明的地方有关系（定义时的函数继承上下文）

闭包：允许函数访问并操作函数外部的变量，`windows` 就是一个最大的闭包（回调函数是另一种常见的使用闭包的情景）

`promise` 模拟一个请求， `axios` 实现原理，应该就是用他，我并没有阅读过源码我猜测的。

function getJSON(url){
        return new Promise((resolve,reject)=>{//创建并返回一个新的promise对象
            const request = new XMLHttpRequest()//创建一个XMLHttprequest对象
            request.open('GET',url)//初始化请求
            request.onload=function(){//“注册一个onload方法，当服务端的响应后会被调用”
                    try{
                    if(this.status==200){//“即使服务端正常响应也并不意味着一切如期发生，只有当服务端返回的状态码为200（一切正常）时，再使用服务端的返回结果”
                      resolve(JSON.parse(this.request))//“尝试解析JSON字符串，倘若解析成功则执行resolve,并将解析后的对象作为参数传入”
                    }else{
                        reject(this.status+' '+ this.statusText)
                    }
                }catch(e){
                    reject(e.message)//“如果服务器返回了不同的状态码，或者如果在解析JSON字符串时发生了异常，则对该promise执行reject方法”
                    }
            }
            request.onerror=function(){//“如果和服务器端通信过程中发生了错误，则对该promise执行reject方法”
              reject(this.status+' '+ this.statusText)
            }
            request.send()//发送请求
        })
    }
    getJSON("data/ninjas.json").then(ninjas => {
    
    }).catch(e => fail("Shouldn't be here:" + e));   //←--- 使用由getJSON函数创建的promise来注册resolve和reject回调函数”
    
    复制代码

如果你看到了最后，打扰一下，我想再来一个小小广告，哈哈 坐标上海，有前端的坑吗？不介意我是18届毕业生，不介意我工作一年，主要是 vue 。react 可以只是没有vue那么熟悉和深入。哈哈哈。如果有合适的请推荐，找工作好难好麻烦呀

[Link 1]: https://juejin.im/post/5aadbc31f265da239530c3c1