js高级原理自我问答,看到就是赚到~

278 阅读9分钟

1.什么是面向对象

  • 是一种思维方式,只注重结果

2.面向对象和面向过程的区别

拿吃炒饭为例

面向过程的方式 需要先买米、淘米、蒸熟、放锅里翻炒、 加调料、加配菜、炒熟后放碗里再吃。

面向对象 只需要在美团订购一份炒饭,等送到后直接可以吃, 不需要考虑炒饭是如何制作的,只需要调用美团提供的方法。

虽然不用考虑过程,但实际上是有这个过程的, 我们调用美团的方法时,在美团内部 某个商家执行了这个过程。

3.什么是原型对象 有什么用

  • 任何函数创建的时候,系统都会自动创建一个对象,这个对象称为原型对象
  • 减少内存消耗,解决全局变量名污染
  • 原型对象相当于构造函数内部的公共空间,仅限构造函数和它实例化的对象访问
  • 不管实例对象有多少个,对应的原型对象只会有一个,所以调用原型对象的属性和方法 消耗的内存很小

4.new的执行原理

  1. 创建一个空对象
  2. this指向这个空对象
  3. 执行函数内部代码,给空对象赋值
  4. 返回这个对象

5.构造函数 原型对象 实例对象 这三者之间的关系

  • 构造函数.prototype === 原型对象
  • 原型对象.constructor === 构造函数
  • 实例对象.__proto__ === 原型对象

  • 以此类推,实例对象想找到自己的构造函数需要通过原型对象来找
  • 实例对象.__proto__.constructor === 构造函数

6.构造函数手动添加return有效吗

分情况

  • 如果return的是值类型 - 无效
  • return的是引用类型 - 有效,会覆盖默认的返回值

7.面向对象的三大特征

  1. 封装:将多次使用的功能放到对象的方法中
  2. 继承:一个对象拥有另一个对象的所有属性和方法
  3. 多态:对象在不同状态的下表现形式不同

8.js是如何实现继承的

原型链,将父对象放到子对象构造函数的原型里,此时子对象就会继承父对象所有属性和方法

9.简单说说原型链

  • 原型链是一种链式结构,每个对象都有对应的原型对象,而原型对象也有自己的原型对象,以此类推 就形成了链式结构

  • 当我们访问对象的属性和方法时,首先会在自身上找,找不到的话再去自己的原型对象上找,一直顺着原型链的结构来找, 直到找到Object对象,Object没有那是真没有了,Object的原型是null.

  • 如果是访问的属性 返回undefined , 访问的方法返回 XXX is not function

10.内置对象和DOM对象的原型链

  • 内置对象的原型链都是三层。
  • 内置实例对象.__proto__ === 内置对象构造函数.prototype
  • 内置实例对象.__proto__.__proto__ === Object.prototype
  • DOM对象的原型链都是七层。

11.instanceof原理

实例对象 instanceof 构造函数

判断右边的构造函数的原型对象 是否在左边实例对象的原型链当中

12.for-in 和 for-of的区别

  1. for-in只遍历下标,for-of只遍历元素
  2. for-in可以遍历原型,for-of不会遍历原型
  3. for-in可以遍历Object,for-of不能遍历Object

13.环境对象this的三种指向

  1. 普通函数 this指向window
  2. new构造函数 this指向实例化的对象
  3. 对象.函数 this指向这个对象

14.上下文调用方法 call apply bind 三者区别

  • 相同点:都能改变this指向

  • 不同点:

    1.传参方式不同, call是单个传参, apply是传递数组或伪数组

    2.执行方式不同, call和apply是立即执行,bind不会立即执行,而是返回一个改变this指向的新函数

15.万能数据检测原理

  • Object.protetype.toString() 会返回this的数据类型 , 固定字符串格式 [object Object]
  • 加上.call(数据) 改变this指向, 就能返回指定数据的类型 例如: [object String] [object Null] [object Array] [object Function]

16.变量和字面量的区别

  • 变量:是一种内存空间,只有存储功能,没有运算功能
  • 字面量:是一种数值,只有运算功能 没有存储功能

17.闭包是什么,有什么作用

是什么↓

  1. 是访问其他函数内部遍变量的函数
  2. 闭包 = 函数 + 上下文引用 作用: 解决变量名污染,一般用于回调函数

18.什么是递归,有什么用

在函数中调用自己

作用: 深拷贝 / 遍历树结构的数据

19.ajax工作原理/流程

设置请求报文的过程

  1. 创建XMLHttpRequest对象
  2. 设置请求方式和地址
  3. (post请求还需要设置固定的请求头)
  4. 发送请求
  5. 注册响应事件

20.什么是json

是一种格式,解决数据跨平台传输

21.ajax的五种状态

XMLHttpRequest对象的ReadyState属性有 0~4 一共五种状态

  • 0 => XMLHttpRequest对象创建后
  • 1 => 建立链接

2 3 4都在onload事件里

  • 2 => 接收
  • 3 => 处理
  • 4 => 响应

22.get和post有什么区别

  1. 传参方式不同: get参数在请求行,post参数在请求体
  2. 安全性不同: get不安全,参数都暴露在地址中; post相对安全,请求参数看不到
  3. 大小不同: get传参有上限,大概是2~5m; post理论上没有上限,但可能会被其他环境限制体积,比如IIS 默认只有200k, 不够用的话得手动修改设置
  4. 速度不同: get是一次性传输,post是多段传输

23. 说说常见的几种状态码

  • 2XX:请求成功
  • 3XX:重定向
  • 4XX:客户端错误
  • 5XX:服务端错误

  • 200 请求成功/204 持续请求中
  • 302 重定向
  • 400 参数错误/404 地址错误
  • 500 服务器内部错误 一般是后台代码写错/503 服务器负载过高 并发过高

24.网页从输入url到呈现过程

  • DNS解析,将域名解析成IP
  • TCP三次握手,确保请求安全可靠
    1. 客户端~服务端 确认客户端到服务器的连接是否正常
    2. 确认服务端到客户端的连接是否正常
    3. 客户端连接服务端 准备正式传输请求报文
  • Http连接
    1. 客户端发送请求到服务端
    2. 服务端接收请求
    3. 服务端响应数据到客户端
  • 渲染引擎将响应数据渲染成页面
    1. 解析html为DOM树
    2. 解析css成样式树
    3. 合并成渲染树
    4. 绘制渲染树
    5. 呈现出来

25.说说防抖和节流

  • 防抖: 单位时间内多次触发事件 , 只让最后一次生效
  • 应用场景: 搜索框 输入内容即时触发

  • 节流: 单位时间内多次触发事件只生效一次 , 超过指定时间才能再次触发
  • 应用场景: 滚动加载/按钮点击限制频率

26.同步和异步的区别

  1. 顺序不同, 异步是无序的,同步是有序的且优先执行
  2. 效率不同, 异步不会阻断主线程(效率高),同步会阻断(效率低)
  3. 代码不同, 异步一般有回调,同步一般没有回调

27.什么是跨域

  • ajax请求和当前页面地址不同源,就叫做跨域
  • 同源:协议/IP/端口 全都相同

28.如何解决跨域

  1. CORS技术, 是当前流行的方案, 只需要后端设置跨域响应头
  2. jsonp技术,以前用得多, 现在基本已经淘汰,原理和流程过于复杂

29.web性能如何优化

  1. 减少http链接,例如精灵图技术
  2. 压缩资源,引用的外部资源都用min格式,多个css文件导到一个css文件里
  3. 合理的利用缓存技术,后端设置缓存响应头,或者redis数据库

30.三种模块导入方式

  1. 内置 直接写模块名.安装Node.js时自动安装
  2. 第三方 直接写模块名, npm命令安装
  3. 自定义 写文件路径

31.express用法

  1. 导入express模块
  2. 创建服务器对象
  3. 托管静态资源
  4. 设置路由接口
  5. 启动服务器

32.promise是什么,有什么用

  • 是ES6新增一种构造函数,用于创建promise实例对象
  • 异步编程的一种解决方案, 主要是是用来解决回调地狱的问题

33.promise原理

  • 本质上是一个容器
  • 它有三种工作状态 , 进行中pending 已完成fulfilled 已失败rejected
  • 工作状态的切换只会有两种:进行中到已完成,进行中到已失败
  • promise创建的时候内部的代码会立即执行
  • 解决回调地狱的原理:在上一个promised对象的then方法中,返回下一个promise对象

34.promise流程

  1. 创建promise对象,传一个回调函数,函数有两个参数,resolve和reject ,内部的异步代码成功执行就用resolve传递响应信息,错误执行就用reject传递响应信息
  2. promise的实例对象点then方法 处理成功响应的数据, 点catch方法处理错误响应的数据

35.webpack是什么

webpack是一个静态模块打包工具

36.webpack默认入口和默认出口

  • 默认入口:src目录下的index.js文件
  • 默认出口:dist目录下的main.js文件

37.webpack使用流程

  1. 初始化npm
  2. 安装webpack
  3. 执行打包命令

38.webpack中 npm run build 做了哪些事

  1. 检测自定义命令是否存在
  2. 初始化参数执行真正的命令
  3. 检测是否用默认配置
  4. 通过配置参数找到入口文件
  5. 解析各个模块和入口文件之间的依赖关系
  6. 编译压缩成一个文件
  7. 最后将文件内容写入到指定的出口文件里

39. 作用域/预解析

  • 作用域:就是变量的有效范围
  • 预解析: 将变量和函数的声明提升到当前作用域的最上面. 变量只声明不赋值, 获取到是undefined, 函数提升优先级大于变量提升.

40.require 和 import 的区别

  • require 是CommonJs的语法规范
  • import 是ES6的语法规范

41.事件流 / 事件冒泡 / 事件捕获

  • 当页面触发事件的时候, 按照一定顺序响应事件, 这个过程叫事件流
  • 事件冒泡: 事件从子元素传递到父元素的过程
  • 事件捕获: 事件从父元素传递到子元素的过程

42. 事件委托

  • 将目标节点的事件绑定到祖先元素上