面试-补充记忆

[qugemingzizhenmafan]

缓存

强缓存（根据响应头处理后续请求是否拿缓存而不再经过服务器）

Expires

失效时间，跟本机时间比较

Cache-Control（优先级高于 Expires）

• max-age，头中的 Date 表示消息发送的时间，表示当前资源在 Date ~ Date + max-age的值 这个时间内有效 例子：Cache-Control:max-age=3600
• no-cache 不使用本地缓存。需要使用协商缓存。
• no-store直接禁止浏览器缓存数据，每次请求资源都会向服务器要完整的资源， 类似于 network 中的 disabled cache。
• public 可以被所有用户缓存，包括终端用户和 cdn 等中间件代理服务器。
• private 只能被终端用户的浏览器缓存。

  协商缓存（由服务器来确定缓存资源是否可用）

  第一次请求返回的响应头携带 Last-Modified 或 Etag，后续请求则会带上对应的请求字段 If-Modified-Since 或 If-None-Match。

  Last-Modified

  文件修改时间

  Etag

  文件唯一标识

  优先级

  Cache-Control > expires > Etag > Last-Modified

[qugemingzizhenmafan]

箭头函数

跟普通函数区别

• this 指向定义时的 this
• 不能使用 call()/bind()/apply() 等改变 this 指向的方法
• 没有 arguments 变量
• 没有原型

  为什么不能 new

  构造函数是通过 new 关键字来生成对象实例，对象实例的 this 是指向自己的， 而箭头函数的 this 一直指向定义时候的 this。

[qugemingzizhenmafan]

EventLoop(事件循环)

循环顺序

• 一个宏任务（包含同步js）
• 所有微任务，包括微任务本身产生的
• DOM渲染（可能跳过） ...循环

  微任务

• process.nextTick
• MutationObserver
• Promise

  宏任务

• 同步js代码
• I/O(键鼠事件)
• setTimeout、setInterval
• setImmediate
• requestAnimationFrame

[qugemingzizhenmafan]

原型 & 原型链

原型 prototype

最开始设计 js 的时候，不想引入类的概念，只有构造函数，但不能共享共有属性方法，所以引入 prototype 共享共有属性方法。

原型链

函数的原型链对象constructor指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针proto,该指针是指向上一层的原型对象，而上一层的原型对象的结构依然类似。因此可以利用proto一直指向Object的原型对象上，而Object原型对象用Object.prototype. proto = null表示原型链顶端。（如此形成了js的原型链继承）

继承

原型链问题

• 当原型链中包含引用类型值的原型时, 该引用类型值会被所有实例共享（子类修改父类的东西）;
• 在创建子类型(例如创建Son的实例)时, 不能向超类型(例如Father)的构造函数中传递参数.

  构造函数绑定

  使用call或apply方法，将父对象的构造函数绑定在子对象上

  　function Cat(name,color) {
  　　Animal.apply(this, arguments);
  　}
  // Cat的原型链往上是Object

  解决了原型链问题，但随之而来的问题是

• 方法都在构造函数中定义, 因此函数复用也就不可用了.

• 而且超类型(如Father)中定义的方法,对子类型而言也是不可见的. 考虑此,借用构造函数的技术也很少单独使用.

  组合继承

  使用原型链实现对原型属性和方法的继承, 通过借用构造函数来实现对实例属性的继承.

  function Cat(name, color) {
  Animal.apply(this, arguments);
  }
  Cat.prototype = new Animal();
  // 注意，Cat.prototype.constructor 等于 Animal

  最常用的继承模式. 而且, instanceof 和 isPrototypeOf( )也能用于识别基于组合继承创建的对象.

  prototype模式(常见)

  function object(o) {
  function F() {};
  F.prototype = o;
  return new F();
  }
  // 后续有了object.create()

  原型式继承中, 包含引用类型值的属性始终都会共享相应的值, 就像使用原型模式一样.

  寄生式继承

  var clone = object(original); // 通过调用object函数创建一个新对象
  clone.sayHi = function() { // 以某种方式来增强这个对象
  alert("hi");
  };
  return clone; // 返回这个对象

  使用寄生式继承来为对象添加函数, 会由于不能做到函数复用而降低效率;这一点与构造函数模式类似.

  寄生组合式继承

  不必为了指定子类型的原型而调用超类型的构造函数

  function subClass(name, color) { superClass.apply(this, arguments); }
  function extend(subClass, superClass) {
  var prototype = object(superClass.prototype); // 创建对象
  prototype.constructor = subClass; // 增强对象
  subClass.prototype = prototype; // 指定对象
  
  // 另一种方式
  var F = function() {};
  F.prototype = superClass.prototype;
  subClass.prototype = new F(); 
  subClass.prototype.constructor = subClass;
  }

  集寄生式继承和组合继承的优点于一身, 是实现基于类型继承的最有效方法. (extend的高效率体现在它没有调用superClass构造函数,因此避免了在subClass.prototype上面创建多余的属性. ) (于此同时,原型链还能保持不变; 因此还能正常使用 instanceof 和 isPrototypeOf() 方法.)

[qugemingzizhenmafan]

call apply bind

改变函数的 this 指向

• call 第二个参数开始按顺序传入函数的参数
• apply 第二个参数是数组，里面是函数的参数
• call 和 apply 是立即执行函数，bind 是返回绑定后的函数

[qugemingzizhenmafan]

HTML & CSS

html5

HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构

优点

• 在没CSS样式的情况下，页面整体也会呈现很好的结构效果
• 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
• 有利于SEO，搜索引擎爬虫会根据不同的标签来赋予不同的权重

  css

  选择器

  id选择器(#myid) 类选择器(.myclass) 属性选择器(a[rel="external"]) 伪类选择器(a:hover, li:nth-child) 标签选择器(div, h1,p) 相邻选择器（h1 + p） 子选择器(ul > li) 后代选择器(li a) 通配符选择器(*)

优先级

!important 内联样式（1000） ID选择器（0100） 类选择器/属性选择器/伪类选择器（0010） 元素选择器/伪元素选择器（0001） 关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

盒模型 & box-sizing属性

盒模型包括 content + padding + border + margin

• content-box（标准盒模型）：给定的 width 只包含 content
• border-box（IE/怪异盒模型）: 给定的 width 包含 content + padding + border

CSS实现三角

width、height 为 0，四个 border 设置长度，三个是透明色，一个带有颜色。

[qugemingzizhenmafan]

JS、TS、ES6

数据类型

基本类型

number，string，boolean，null，undefined，symbol

引用类型

object，function

判断类型

• typeof（typeof ）
• instanceof（1 instanceof Number）
• Object.prototype.toString.call()（Object.prototype.toString.call(1)）

var && let && const

var

变量提升，var a = 1； 相当于 var a；a = 1;

相等

• === 严格相等，会比较两个值的类型和值
• == 不严格(抽象)相等，比较时，会先进行类型转换，然后再比较值 平时开发应该使用严格相等，因为更准确规范。 es6中部署了一个新的方法Object.is来比较两个值严格相等，它与严格比较运算符（===）基本一致，不同之处只有两个：一是+0不等于-0，二是NaN等于自身（这两个相反的情况就是 === 的缺点）。

作用域和作用域链

作用域

变量与函数的可访问范围

• 全局作用域：代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。
• 函数作用域：在固定的代码片段才能被访问

  作用

  最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

  作用域链

  使用变量回到代码所处的函数的作用域中取值。如果在当前作用域中没有查到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

new运算符的实现机制

• 首先创建了一个新的空对象
• 设置原型，将对象的原型设置为函数的prototype对象。
• 让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性）
• 判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。

  u = {}
  u.__proto__ = User.prototype
  obj = User.call(u)
  return typeof obj === 'object' ? obj : u;   

Promise

console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

防抖节流

防抖

function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn(...args), delay); 
    }
}

节流

function throttle(fn, delay) {
    let lastTime = 0;
    return (...args) => {
        const nowTime = Date.now();
        if (nowTime - lastTime > delay) {
            fn(...args);
            lastTime = nowTime;
        }
    }
}

[qugemingzizhenmafan]

工作用到的ES6新语法

• let

• 函数参数的默认值

• 箭头函数

• rest参数（将多个参数变成一个数组）

• 扩展运算符是三个点（对数组和对象都可用）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列

• 解构赋值

• 模板字符串

• promise

• async await

• class extends 装饰器 implement

• import export

• Number.MAX_SAFE_INTEGER

• ?. ??（左边为false、0时，??不取右边值，||会取右边值）

• Array.from生成一个数组，Array 实例的.find() .findIndex() .fill()这些方法

• ES5数组的一些方法对空位的处理不一致，ES6明确将数组的空位转为undefined。

• ES6 允许在属性名和值的变量名一致时，可简写成一个名

• ES6 允许字面量定义或使用对象时，可把表达式放在方括号内，作为对象的属性名

• Set（类似数组，元素中没有重复的值）

• Map（属性值可以是对象，更完善的hash结构）

• Proxy（vue2的defineProperty改成了vue3的Proxy）

• Reflect（将Object对象的一些明显属于语言内部的方法放到Reflect对象上 常用.set()方法）

• Symbol