Javascript高级面试

快来打我* 2022-04-02 04:12 257阅读 0赞

## 原型 ##

## 异步 ##

#### 一、什么是单线程，和异步有什么关系 ####

单线程：只有一个线程，同一时间只能做一件事  
  
原因：避免DOM渲染的冲突  
解决方案：异步

> 为什么js只有一个线程：避免DOM渲染冲突

*  浏览器需要渲染DOM
 *  JS可以修改DOM结构
 *  JS执行的时候，浏览器DOM渲染会暂停
 *  两端JS也不能同时执行(都修改DOM就冲突了)
 *  webworker支持多线程，但是不能访问DOM

> 解决方案存在的问题

*  问题一：没按照书写方式执行，可读性差
 *  问题二：callback中不容易模块化

#### 二、什么是event-loop ####

>  *  事件轮询，JS实现异步的具体解决方案
>  *  同步代码，直接执行
>  *  异步函数先放在异步队列中
>  *  待同步函数执行完毕，轮询执行异步队列的函数

setTimeout(function(){
        console.log(1);
    },100);              //100ms之后才放入异步队列中，目前异步队列是空的
    setTimeout(function(){
        console.log(2);  //直接放入异步队列
    })
    console.log(3)       //直接执行
    
    //执行3之后，异步队列中只有2，把2拿到主线程执行，2执行完之后，异步队列中并没有任务，所以一直轮询异步队列，直到100ms之后1放入异步队列，将1拿到主线程中执行

$.ajax({
        url:'./data.json',
        success:function(){        //网络请求成功就把success放入异步队列
            console.log('a');
        }
    })
    
    setTimeout(function(){
        console.log('b')
    },100)
    
    setTimeout(function(){
        console.log('c');
    })
    console.log('d')
    
    //打印结果：
    //d    //d   
    //c    //c  
    //a    //b   
    //b    //a   
    
    //真实环境不会出现dacb

#### 三、是否用过jQuery的Deferred ####

>  *  jQuery1.5的变化
>  *  使用jQuery Deferred
>  *  初步引入Promise概念

> jQuery1.5之前

> jQuery1.5之后

>  *  无法改变JS异步和单线程的本质
>  *  只能从写法上杜绝callback这种形式
>  *  它是一种语法糖，但是解耦了代码
>  *  很好的提现：开放封闭原则(对扩展开放对修改封闭)

##### 使用jQuery Deferred #####

//给出一段非常简单的代码，使用setTimeout函数
    var wait = function(){
        var task = function(){
            console.log('执行完成');
        }
        setTimeout(task,2000)
    }
    
    wait();
    
    //新增需求：要在执行完成之后进行某些特别复杂的操作，代码可能会很多，而且分好几个步骤

##### 使用dtd.promise() #####

>  *  可以jQuery1.5对ajax的改变举例
>  *  说明如何简单的封装、使用deferred
>  *  说明promise和Defrred的区别

要想深入了解它，就需要知道它的前世今生

#### 四、Promise的基本使用和原理 ####

##### 基本语法回顾 #####

##### 异常捕获 #####

//规定：then只接受一个函数，最后统一用catch捕获异常

##### 多个串联 #####

##### Promise.all和Promise.race #####

//Promise.all接收一个promise对象的数组
    //待全部完成后，统一执行success
    Promise.all([result1, result2]).then(datas => {
            //接收到的datas是一个数组，依次包含了多个promise返回的内容
            console.log(datas[0]);
            console.log(datas[1]);
    })
       
    //Promise.race接收一个包含多个promise对象的数组
    //只要有一个完成，就执行success
    Promise.race([result1, result2]).then(data => {
        //data即最先执行完成的promise的返回值
        console.log(data);
    })

##### Promise标准 #####

>  *  三种状态：pending,fulfilled,rejected
>  *  初始状态：pending
>  *  pending变为fulfilled,或者pending变为rejected
>  *  状态变化不可逆

promise必须实现then这个方法  
then()必须接收两个函数作为标准  
then

#### 五、介绍一下async/await(和Promise的区别、联系) ####

#### 六、总结一下当前JS结局异步的方案 ####

## 虚拟DOM ##

>  *  vdom 是 vue 和 React 的核心，先讲哪个都绕不开它
>  *  vdom 比较独立，使用也比较简单
>  *  如果面试问到 vue 和 React 和实现，免不了问 vdom

#### 问题 ####

##### \- vdom 是什么？为何会存在 vdom？ #####

> 什么是vdom

*  virtual dom,虚拟DOM
 *  用JS模拟DOM结构
 *  DOM变化的对比，放在JS层来做(图灵完备语言:能实现各种逻辑的语言)
 *  提高重绘性能

> DOM

> 虚拟DOM:

{
        tag: 'ul',
        attrs: {
            id: 'list'
        },
        children: [{
                tag: 'li',
                attrs: { className: 'item' },
                children: ['item1']
            },
            {
                tag: 'li',
                attrs: { className: 'item' },
                children: ['item2']
            }
        ]
    }
    
    //className代替class,因为class是js的保留字

浏览器最耗费性能就是DOM操作  
  
现在浏览器执行JS性能非常低

> 设计一个需求场景

> 用jQery实现
> 
> 遇到的问题
> 
>  *  vdom 的如何应用，核心 API 是什么
>  *  介绍一下 diff 算法

##### 说一下使用 jquery 和使用框架的区别 #####

> jQuery 实现 todo-list
> 
> vue 实现 todo-list
> 
> jQuery 和框架的区别

*  数据和视图的分离，解耦（开放封闭原则）
 *  以数据驱动视图，只关心数据变化，DOM 操作被封装

##### 说一下对 MVVM 的理解 #####

>  *  MVC
>  *  MVVM
>  *  关于`ViewModel`

## MVVM和vue ##

## 组件化和React ##

## hybrid ##

未完待续，每日更新