1 什么是作用域
1 理解:
1 就是一块独立的区域空间
2 一个作用域内的代码和变量, 对该作用域外部的环境, 毫无影响
2 存在作用域的地方: js文件, script标签, 函数内部, ES6的大括号
3 关于作用域的生命周期:
1 全局作用域: 进入页面创建, 关闭页面销毁
2 局部作用域: 函数执行的时候创建, 执行完毕销毁
4 作用域链:
1 内部作用域可以访问外部作用域, 且遵守就近原则
2 作用域 a内部创建作用域b, b可以访问a中的变量, a不可访问b中的变量
3 如上关系, 层层嵌套的作用域, 就被称之为作用域链
2 this指向的方法有哪些？它们有什么区别
1 bind 方法:
1 用于函数表达式的后面, 参数为想要指向的对象
2 只改变 this指向, 并不会调用函数
2 call 方法:
1 用于函数表达式的后面, 参数为想要指向的对象, 或方法调用传递的实参
2 改变this指向的同时, 且会执行函数
3 apply 方法:
1 用于函数表达式的后面, 参数为想要指向的对象, 或方法调用传递的实参 (注意参数为一个数组)
2 改变this指向的同时, 且会执行函数
4 注意事项: 声明式命名函数, 调用改变 this指向的相关方法, 是通过函数名, 才可以调用的
5 他们之间的区别:
1 bind 和 其他俩个方法的区别: 只会改变 this 指向, 不能调用函数, 以及传参
2 call 和 apply 的区别: apply 的实参是以数组的形式传递的
3 什么是闭包, 闭包的应用
1 产生原因:
1 俩个相互嵌套的函数, 内部函数作用域访问了外部函数作用域中的变量
2 当内部函数被 return到外部, 声明变量接收且执行的时候
3 这个函数会在执行体处访问它所在环境的外部函数的变量
4 这个访问的过程, 或者被访问的函数, 就叫做闭包
2 作用:
1 延申了变量的作用范围
2 实现封装, 属性私有化 (防止污染全局变量)
3 危害:
1 正常情况那个外部函数在不执行的时候, 内部变量是销毁状态的,
2 闭包会导致原有作用域链不释放, 变量未被销毁, 造成内存泄漏 (即使内存占用过多)
4 闭包的应用:
1 React 中的高阶函数 (执行函数返回值是另外一个函数)
4 什么是原型, 什么是原型链
1 原型: 就是指开发中的俩个原型对象
----------------------------------------------------------------------------------------
1 函数对象都有 prototype 原型属性, 它是 JS语言中定义的原型对象
2 所有对象都有 __proto__ 原型属性, 它是主流浏览器自带的 (并不是用来给开发者操作的)
----------------------------------------------------------------------------------------
2 原型链:
----------------------------------------------------------------------------------------
1 描述: 就是多个原型之间的特殊的访问关系
2 原型之间的关系:
1 作用描述: 一个对象可以访问它原型链上的所有方法
2 访问关系: 普通对象的 __proto__ 指向, 该对象构造器的 prototype
3 原型链的末端:
1 Object 是跟构造器
2 Object.prototype 就是原型链的末端 (该原型对象没有 __proto__ 了, 为 null)
3 简单描述一个原型链:
1 例如创建了一个字符串: let str = '我好累阿'
2 str.__proto__ == String.prototype
3 String.prototype.__proto__ == Object.prototype
----------------------------------------------------------------------------------------
5 熟悉面向对象吗? 能聊聊 JS 中的继承吗
1 面向对象
----------------------------------------------------------------------------------------
2 它的核心概念: 类和对象
1 类的描述: 类是一组相关属性和行为的集合, 可以看成某一类事物的模板; 是具体对象的抽象概念的集合
2 对象描述: 是某一大类的一个具体的对象, 是带有自身属性和方法的集合, 对象是类的具体某一个
3 面向对象的特点:
1 封装:
2 继承:
3 多态:
4 面向对象和面向过程的区别:
1 面向对象:
1 把事物分解为一个个对象, 分析每个对象所需要属性和功能, 然后创建该类对象的类
2 我们可以封装很多不同的类来实例化很多不同的对象
3 分析这些不同对象作用, 然后分工合作, 实现复杂的行为或功能
4 优点是: 开发效率高, 可维护性高, 灵活可复用, 适合开发较大的项目
2 面向过程:
1 分析出解决问题的步骤 --> 然后使用函数一步一步实现这些步骤
2 性能比面向对象好, 适合于跟硬件联系很紧密的情况
5 用到的场景: 模块化开发 + 封装插件
----------------------------------------------------------------------------------------
2 JS 中的继承
----------------------------------------------------------------------------------------
1 混合继承:
1
2
3
2 class类继承:
1
2
3
----------------------------------------------------------------------------------------
6 什么是浏览器事件循环机制(轮训机制) 以及任务列队中的 宏任务\微任务？
1 JS引擎会从上到下依次执行所有代码
2 事件循环
-----------------------------------------------------------------------------------
1 先执行执栈中的同步任务 -> 把遇到的异步任务交给异步处理进程 -> 然后由异步处理进程决定放入任务队列的时间
2 等执行栈中的同步任务执行完毕 -> 再依次读取任务列队中等待的异步任务 -> 放入执行栈中开始执行
3 主线程 -> 执行栈 -> 不断重复获取任务列队的任务并执行, 这种循环的机制被称为 --> 事件循环 (或轮训机制)
-----------------------------------------------------------------------------------
3 知识点:
1 对于定时器, 只有等待时间过了, 才会被异步进程写到任务列队里面
2 对于事件, 只有触发了, 才会被异步进程写到任务列队里面
3 在事件列队中会优先执行微任务区的微任务, 然后执行宏任务,
4 ajax只要请求到数据就放在第一位执行 (ajax不是微任务, 也不是宏任务)
5 常见宏任务: 定时器
6 常见微任务: Promise.
7 谈谈 Promise
1 简单描述:
1 Promise 是ES6对异步编程的一种解决方案
2 Promise 是一个构造函数, 用来创建一个Promise对象的
3 Promise 简单说就是一个容器, 里面保存着一个尚未完成且预计在未来完成的异步操作
4 Promise对象代表一个异步操作
pending（进行中）
fulfilled（成功） [房饭熬的]
rejected（失败）
5 Promise 对象的状态改变有两种
1 从 pending 变为 fulfilled
2 从 pending 变为 rejected
6 有了Promise对象, 就可以将异步操作以同步操作的流程表达出来, 可解决回调地狱
2 async 和 await: [爱晒你嗯可] / [əˈweɪt]
---------------------------------------------------------------------------------
1 简单描述: async + await 的函数中,
1 async 用来表示函数里有异步操作
2 await 表示紧跟在后面的表达式需要等待结果
3 async 函数返回一个 Promise 对象, 可以使用then方法添加回调函数
4 async 函数内部 return语句返回的值, 会成为then方法回调函数的参数
5 async 有多种使用方式
---------------------------------------------------------------------------------
8 谈谈 ES6
1 用到的字面量对象增强写法, 比较好用
2 定义变量的 let 和 const 也比较规范
------------------------------------------------------------------------------------------
1 定义
1 let name = "zxc" 定义变量
2 const name = "CAN" 定义常量
2 let 特点
1 在一个作用域下不能声明相同的变量名 错误示例: {
let a = 2; let a = 3}
2 可识别块级作用域 所以不能在外部访问 --> 错误示例: {
let a = 2;} console.log(a)
3 变量的声明不被提升
4 let声明的变量不会添加到 window对象下
3 const 基于 let增加的特点
1 声明的同时必须赋值
2 赋值后它值的地址不能改变
3 通常命名大写
4 在ES6开发中, 优先使用const, 如果需要改变某个标识符的时候就使用 let (会让代码尽可能的规范)
------------------------------------------------------------------------------------------
3 模板字符串也极大的方便了, 我们在 JS 中灵活的操作字符串
4 ... 运算符, 以及结合 解构赋值, 也极大地方便了我们的一些操作
5 箭头函数的使用也极大的方便了我们的操作
6 还有 class 类, 基于原型继承的, 语法糖
9 Cookie 和 localStorage 的区别
1 cookie 简单描述: 是由web服务器存储在用户电脑硬盘上的一个小的文本文件
2 localStorage 简单描述: 在本地存储一些数据, 需要的时候就可以去拿了
-----------------------------------------------------------------------------------------
localStorage 如何设置有效期:
1 在存储数据的时候, 会加一条, 希望删除此缓存时间的, 时间戳进去,
2 然后每次打开页面, 用到该存储的时候, 都会先判断一下设置的时间戳跟当前的时间戳大小
3 从而判断是否删除当前的, localStorage 数据
-----------------------------------------------------------------------------------------
3 cookie 和 localStorage 的相同点:
-----------------------------------------------------------------------------------------
1 说明:
1 跨页面, 同域名, 共享数据
2 都是用于存储一些用户信息的
-----------------------------------------------------------------------------------------
4 cookie 和 localStorage 的不同:
-----------------------------------------------------------------------------------------
1 cookie 可存储空间小 4K左右 -- localStorage 存储空间大 20M左右
2 cookie 没有方便操作的 API -- localStorage 有
3 cookie 存储的数据是有有效期的 -- localStorage 永久保存
4 cookie 适合存储小而敏感的数据 (浏览器对该文件有响应的保护) -- localStorage 很容易被别人获取到
5 cookie 在每次发起 http 请求的时候, 都会跟着发送给服务器 (增加了数据流量) -- localStorage 不会
-----------------------------------------------------------------------------------------
10 事件机制 (事件委托) – 事件流
1 事件发生时会在元素节点之间按照特定的顺序传播 -- 分为冒泡和捕获
2 冒泡: 开始由最具体的元素触发, 然后逐级向上传播到 document的最顶层节点
3 绑定事件在祖先元素上, 子元素可以通过冒泡触发这个事件, 来代替直接给子元素绑定事件的情况
4 默认不存在冒泡的事件: blur focus mouseenter mouseleave
11 怎么解决跨域问题的
1 描述:
-------------------------------------------------------------------------------------------
1 概念: 当前网站去访问其他网站的数据, 的这种行为 (俩个域名之间的联系)
2 目的: 是浏览器的安全机制, 禁止 Ajax从一个域名请求另外一个域名上的数据 (保护隐私信息)
3 产生: 不同源的请求就是跨域 (同源: 是相同的 -> 协议、域名、端口)
-------------------------------------------------------------------------------------------
2 跨域解决方案:
-------------------------------------------------------------------------------------------
1 jsonp: 利用 script 等标签的跨域能力, 去请求数据资源
2 服务端代理: 后端去请求其它域名下的数据, 给自己的前端去使用
3 CORS 跨域资源共享: 需要浏览器, 和数据站点, 全部支持的情况 (W3C 标准)
-------------------------------------------------------------------------------------------
12 GET请求 和 POST请求的区别
1 本质上 GET和POST, 都是HTTP协议中的两种发送请求的方法
2 但是有序各种限制和规定, 使的俩者在使用上有了很多不一样的地方 (如下)
1 GET请求可以传送的数据量小 (因为会受到 url 的长度限制) -- POST 则不受限制
2 GET在浏览器回退时是无害的, 而POST会再次提交请求
3 GET请求只能进行url编码, 而POST支持多种编码方式
3 总结: 如果请求很简短用GET, 如果请求数据比较多就用 POST
13 响应状态码
2开头 -- 表示成功
200 -- 表示服务器已成功处理了请求
202 -- 表示服务器已接受请求 -- 但未处理
3开头 -- 请求被重定向，要完成请求，需要进一步操作
300 – 针对请求，服务器可执行多种操作；
301 – 请求的网页已永久的移动到新的位置，服务器返回此响应时，会自动将请求转到新位置；
302 – 临时移动；
304 – 未修改；
4开头 -- 表示请求错误
400 – 语法错误，服务器无法处理；
401 – 未授权，请求要求身份验证；
403 – 服务器拒绝请求；
404 – 服务器找不到请求的网页；
405 – 禁用请求中的方法
5开头 -- 表示服务器错误，服务器在尝试处理请求时，发生内部错误
500 – 服务器遇到错误，无法完成请求；
501 – 服务器不具备完成请求的功能；
502 – 服务器作为网关或代理，从上游服务器收到无效响应；
503 – 服务器目前无法使用；
504 – 服务器作为网关或代理，没有及时从上游服务器接收到请求；
505 – 服务器不支持请求中的HTTP协议版本；
14 移动端适配方案 (要了解怎么实现的说的上来)
1 配置代码
--------------------------------------------------------------------
;(function (document, window) {
let designWidth = 750;
let deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / designWidth * 100 + 'px';
window.onresize = function () {
document.documentElement.style.fontSize = deviceWidth / designWidth * 100 + 'px';
}
})(document, window)
15 关于移动端的一些解决方案
1 移动端开发的方案选择
----------------------------------------------------------------------------------------------
1 单独制作移动端页面
1 简单流式布局
2 rem 配合媒体查询
3 通过 JS 配置文件实现移动端适配
2 响应式PC端页面
1 媒体查询
----------------------------------------------------------------------------------------------
16 说说你对文档碎片的理解
1 轻量级节点, 虚拟的节点对象, 常作为仓库使用, 不存在于 DOM 树上
2 将多个需要插入的新节点放在文档碎片上, 再插入文档中可以优化 DOM 操作
3 否则大量操作 DOM 会降低效率
17 浏览器的垃圾回收机制
1 当我们打开一个页面时候, 我们的变量会开辟空间, 放在内存中
2 关闭页面的时候, 销毁变量, (不关闭一直存在)
3 函数内的变量, 用完就销毁, 全局的会一直存在, 所以我们推荐少使用全局变量
18 构造函数
1 用于创建特定类型的对象
2