前端面试4

手写ajax

let xhr = new XMLHttpRequest();
xhr.open('get', 'xxx.php', true);
xhr.send(null);
xhr.onreadystatechange = function() {
    if (xhr.readystate == 4) {
        if (xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
};

script标签中async与的defer的区别

• 没添加属性：浏览器遇到script的时候，会立即加载并执行脚本，执行完毕后再进行后面的标签
• 添加async属性：加载和执行该脚本的过程会与之后解析后面的标签的过程同步进行，异步加载与执行
• 添加defer属性：加载脚本的过程与之后解析后面的标签同步进行，但执行脚本会在解析完标签后才执行。异步加载，延迟执行

https协议的工作原理

客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤，如图所示。

客户使用https url访问服务器，则要求web 服务器建立ssl链接。

web服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回或者说传输给客户端。

客户端和web服务器端开始协商SSL链接的安全等级，也就是加密等级。

客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。

web服务器通过自己的私钥解密出会话密钥。

web服务器通过会话密钥加密与客户端之间的通信。，

cookie的samesite的用途

用来限制第三方 Cookie，从而减少安全风险。

strict： 完全禁止第三方 Cookie ， 跨站点时，任何情况下都不会发送 Cookie

lax：大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。

none：关闭samsite，但是前提是cookie设置secure

设置cookie，获取cookie，删除cookie

设置

function setCookies(name, value, seconds) {
    seconds = seconds || 0;
    let expires = "";
    if (seconds != 0) {
        let date = new Date();
        date.setTime(date.getTime() + (seconds * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    document.cookie = name + '=' + escape(value) + expires + '; path=/';
}

获取

function getCookies(name) {
    if (document.cookie.length > 0) {
        let start = document.cookie.indexOf(name + '=');
        if (start != -1) {
            start = start + name.length + 1;
            let end = document.cookie.indexOf(';', start);
            if (end == -1) end = document.cookie.length;
            return unescape(document.cookie.substring(start, end).replace(/\"/g, ""));
        }
    }
    return null;
}

删除

function clearCookie(name) {
    setCookie(name, "", -1);
}

强缓存，协商缓存

强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互， cache-control，expires

协商缓存：浏览器发送请求到服务器，服务器判断是否可使用本地缓存， last-modifed，ETag

设计模式

• 工厂模式：解决多个相似问题的设计模式。 在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象
• 单例模式：只能被实例化一次的模式，后面实例化的对象都是第一次的对象
• 发布者订阅模式：发布者不会把信息发送给特定接受者，而是将发布的信息分为不同的类别，订阅者只接受对应的信息

手写instanceof

function myInstance(first, second) {
    let proto = first.__proto__;
    let prototype = second.prototype;
    if (proto == null)
        return false;
    else if (proto == prototype)
        return true;
    else 
        return myInstance(proto, second);
}

实现数组的map方法

Array.prototype.myMap = function(fn, thisValue) {
     let res = []
     thisValue = thisValue||[]
     let arr = this
     for(let i in arr) {
        res.push(fn(arr[i]))
     }
     return res
 }

数组扁平化

let a = [1,[2,3,[4,[5]]]]; 
a.flat(Infinity); // [1,2,3,4,5]  a是4维数组