转载链接:https://blog.csdn.net/qq_54753561/article/details/122149197
原型链继承
父类的实例作为子类的原型,易于实现,父类的新增实例与属性子类都能访问,创建子类实例,不能向父类构造函数中传参数。
构造函数继承(伪造对象、经典继承)
不能继承原型属性/方法,可以实现多继承,可以传参,无法复用,
组合继承
通过call 对实例属性的继承,原型链对原型方法的继承, 调用多次
Es6有class继承:
首先利用class构造一个父类,然后利用extends与super实现子类继承
es5继承首先是在子类中创建自己的this指向,最后将方法添加到this中 Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this) es6继承是使用class关键字先创建父类的实例对象this,最后在子类class中修改this
_ _proto_ _
属性,其被称为隐式原型_ _proto_ _
属性指向自身构造函数的显式原型prototype原型链
获取对象属性时,如果对象本身没有这个属性,那就会去他的原型
__proto__
上去找,如果还查不到,就去找原型的原型,一直找到最 顶层(Object.prototype
)为止。Object.prototype对象也有proto属性值为null。链式查找机制叫原型链。
1、我们一般使用字面量的形式直接创建对象 (1)第一种是工厂模式,工厂模式的主要工作原理是用函数来封装创建对象的细节,从而通过调用函数来达到复用的目的。 (2)第二种是构造函数模式。js 中每一个函数都可以作为构造函数,只要一个函数是通过 new 来调用的,那么我们就可以把它称为构造函数。 (3)第三种模式是原型模式,因为每一个函数都有一个 prototype 属性,这个属性是一个对象,它包含了通过构造函数创建的所有实例都能共享的属性和方法。 (4)第四种模式是组合使用构造函数模式和原型模式,这是创建自定义类型的最常见方式。 (5)第五种模式是动态原型模式,这一种模式将原型方法赋值的创建过程移动到了构造函数的内部,通过对属性是否存在的判断,可以实现仅在第一次调用函数时对原型对象赋值一次的效果。 (6)第六种模式是寄生构造函数模式,这一种模式和工厂模式的实现基本相同,
概念:
设计模式是一套被反复使用的代码,设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。设计模式让代码变得工程化,设计模式是软件工程的基石。
1、js工厂模式,去做同样的事情,实现同样的效果,解决多个相似的问题这时候需要使用工厂模式 2、发布订阅模式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 3、单例模式 单例模式 保证一个类仅有一个实例,并提供一个访问它的全局访问点
构造函数的prototype指向原型对象 实例对象的proto指向构造函数的prototype所指向原型对象 原型对象的constructor指向构造函数
一、面向过程:面向过程就是分析出实现需求所需要的步骤,通过函数一步一步实现这些步骤,接着依次调用即可。 二、面向对象:将数据与函数绑定到一起,进行封装,这样能够更快速的开发程序,减少了重复代码的重写过程面向过程: 优点:性能上它是优于面向对象的,因为类在调用的时候需要实例化,开销过大。 缺点:不易维护、复用、扩展 用途:单片机、嵌入式开发、Linux/Unix等对性能要求较高的地方 面向对象: 面向对象有三大特性:封装,继承,多态。 优点:易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统更加灵活、更加易于维护 。 缺点:性能比面向过程低
spa 就是我们的单页面应用,spa 应用就是只有一个html页面,在vue中可以通过vue-router 来进行页面的切换的,而非刷新整个页面,可以实现无刷新切换页面的技术 SPA的原理? 通过这一点可以用js监听url中hash值的变化 onhashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 。哈希值的变换并不会引发页面的刷新和跳转,当监听到hash变化,就可以动态的切换组件,就可以实现无刷新切换页面技术 spa 的优点? 页面切换快: 页面每次切换跳转时,并不需要做`html`文件的请求,这样就节约了很多`http`发送时延,我们在切换页面的时候速度很快。 用户体验好: 页面片段间的切换快,在网络环境差的时候, 因为组件已经预先加载好了, 并不需要发送网络请求, 所以用户体验好 转场动画 spa 的缺点? 首屏加载比较慢因为要请求一次html同时还要发送一次js请求,两次请求回来了首屏才会显示 不利于SEO seo 效果较差 因为搜索引擎只识别html里面的内容,并不识别js里的内容,因为单页面就是js渲染出来的,影响网站的排名
MPA多页面应用程序 指的就是有多个独立的html页面,每个页面必须重复加载html js css 资源,多页面跳转需要整个页面资源刷新。 优点 1、首屏加载速度快 当我们访问页面的时候,服务器只返回了一个html,页面就展示出来了,只发了一次http请求,所以页面显示非常快. 2、SEO效果好 因为搜索引擎在做网站排名的时候,要根据网页的内容给网页排名,搜素引擎只可以识别html内容,多页面就是将内容放在html中,所以排名要好一点。 缺点 因为每跳转一个页面都要发送一次http请求,如果网络情况不好的情况下,页面之间来回跳转就会发生明显的卡顿,有的时候半天还加载不出来,影响用户体验。 转场动画也不好实现
1. git init 初始化git仓库 (mac中Command+Shift+. 可以显示隐藏文件) 2. git status 查看文件状态 3. git add 文件列表 追踪文件 4. git commit -m 提交信息 向仓库中提交代码 5. git log 查看提交记录 1.分支明细 (1)主分支(master):第一次向 git 仓库中提交更新记录时自动产生的一个分支。 (2)开发分支(develop):作为开发的分支,基于 master 分支创建。 (3)功能分支(feature):作为开发具体功能的分支,基于开发分支创建 2.分支命令 (1)git branch 查看分支 (2)git branch 分支名称 创建分支 (3)git checkout 分支名称 切换分支 (4)git merge 来源分支 合并分支 (备注:必须在master分支上才能合并develop分支) (5)git branch -d 分支名称 删除分支(分支被合并后才允许删除)(-D 强制删除) 3.暂时保存更改 (1)存储临时改动:git stash (2)恢复改动:git stash pop 更加详细请看git常用命令
git怎么解决多人冲突?:
是当前修改是左箭头方向,传入的是右箭头的方向, 中间用等于号分割,等号上边是当前修改(本地),下边是传入的修改(线上的代码)。 两人同时提交可能会出现冲突,解决办法是手动修改冲突
基于promise的http库,可以用在浏览器和node.js,支持promiseAPI,客户端支持防御xsrf
Node是一个基于Chrome V8引擎的JavaScript代码运行环境。 浏览器(软件)能够运行JavaScript代码,浏览器就是JavaScript代码的运行环境 Node(软件)能够运行JavaScript代码,Node就是JavaScript代码的运行环境
一句话:降低软件的复杂性。使其可控,可维护,可扩展。 一个功能就是一个模板,多个模板可以组成完整应用,抽离一个模板不会影响其他功能的运行
网站应用程序主要分为两大部分:客户端和服务器端。客户端:在浏览器中运行的部分,就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。服务器端:在服务器中运行的部分,负责存储数据和处理应用逻辑。
简单强大,轻量可扩展。 简单体现在node使用的是javascript,json来进行编码,强大体现在非阻塞IO,可以适应分块传输数据,较慢的网络环境,尤其擅长高并发访问,轻量体现在node本身既是代码,又是服务器,前后端使用统一语言;可扩展体现在可以轻松应对多实例,多服务器架构,同时有海量的第三方应用组件。
node是单线程的,异步是通过一次次的循环事件队列来实现的.同步则是说阻塞式的IO,这在高并发环境会是一个很大的性能问题,所以同步一般只在基础框架的启动时使用,用来加载配置文件,初始化程序什么的.
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题。 使用场景: a. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 b. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 c. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
ajax不是语言,ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术 优点 1、最大的一点是页面无刷新,用户的体验非常好。 2、使用异步方式与服务器通信,具有更加迅速的响应能力。 缺点 1、ajax不支持浏览器back按钮。 2、安全问题 AJAX暴露了与服务器交互的细节。 3、对搜索引擎的支持比较弱。 4、破坏了程序的异常机制。 5、不容易调试
XSS
(Cross-Site Scripting
,跨站脚本攻击)是一种代码注入攻击。攻击者在目标网站上注入恶意代码,当被攻击者登陆网站时就会执行这些恶意代码,这些脚本可以读取cookie,
session tokens
,或者其它敏感的网站信息,对用户进行钓鱼欺诈,甚至发起蠕虫攻击等。 XSS避免方式:
url
参数使用encodeURIComponent
方法转义InnerHtml
插入HTML
内容
CSRF
(Cross-site request forgery
)跨站请求伪造:攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证,绕过后台的用户验证,达到冒充用户对被攻击的网站执行某项操作的目的。CSRF
避免方式:
就是通过吧SQL命令插入到Web表单递交或输入域名,最终达到欺骗服务器执行恶意的SQL命令。 解决:表单输入时通过正则表达式将一些特殊字符进行转换
4、DDoS攻击
DDoS
又叫分布式拒绝服务,全称Distributed Denial of Service
,其原理就是利用大量的请求造成资源过载,导致服务不可用。 解决:
ICMP
包等1. 客户端使用用户名跟密码请求登录 2. 服务端收到请求,去验证用户名与密码 3. 验证成功后,服务端会签发一个 Token,再把这个 Token 发送给客户端 4. 客户端收到 Token 以后可以把它存储起来,比如放在 Cookie 里或者 Local Storage 里 5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token 6. 服务端收到请求,然后去验证客户端请求里面带着的 Token,如果验证成功,就向客户端返回请求的数据
常见http状态码分类:
这玩意一定要说全了装逼 用户输入阶段 合成 URL:浏览区会判断用户输入是合法 URL,比如用户输入的是搜索的关键词,默认的搜索引擎会合成新的,如果符合url规则会根据url协议,在这段内容加上协议合成合法的url 查找缓存 网络进程获取到 URL,先去本地缓存中查找是否有缓存资源,如果有则拦截请求,直接将缓存资源返回给浏览器进程;否则,进入网络请请求阶段; DNS 解析: DNS 查找数据缓存服务中是否缓存过当前域名信息,有则直接返回;否则,会进行 DNS 解析返回域名对应的 IP 和端口号,如果没有指定端口号,http 默认 80 端口,https 默认 443。如果是 https 请求,还需要建立 TLS 连接; 建立 TCP 连接: TCP 三次握手与服务器建立连接,然后进行数据的传输;(三次握手开喷) 发送 HTTP 请求: 浏览器首先会向服务器发送请求行,它包含了请求方法、请求 URI 和 HTTP 协议的版本;另外还会发送请求头,告诉服务器一些浏览器的相关信息,比如浏览器内核,请求域名; 服务器处理请求: 服务器首先返回响应行,包括协议版本和状态码,比如状态码 200 表示继续处理该请求;如果是 301,则表示重定向,服务器也会向浏览器发送响应头,包含了一些信息; 页面渲染: 查看响应头的信息,做不同的处理,比如重定向,存储cookie 看看content-type的值,根据不同的资源类型来用不同的解析方式 浏览器渲染原理直接开干..... 浏览器将获取的HTML文档解析成DOM树。 处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。 将DOM和CSSOM合并为渲染树(rendering tree),代表一系列将被渲染的对象。 渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法,只需要一次绘制操作就可以布局所有的元素。 将渲染树的各个节点绘制到屏幕上,这一步被称为绘制painting。 断开 TCP 连接: 数据传输完成,正常情况下 TCP 将四次挥手断开连接。但是如果浏览器或者服务器在HTTP头部加上 Connection: keep-alive,TCP 就会一直保持连接。
1.`TCP`向上层提供面向连接的可靠服务 ,`UDP`向上层提供无连接不可靠服务。 2.虽然 `UDP` 并没有 `TCP` 传输来的准确,但是也能在很多实时性要求高的地方有所作为 3.对数据准确性要求高,速度可以相对较慢的,可以选用`TCP`
区别 | UDP | TCP |
---|---|---|
是否连接 | 无连接 | 面向连接 |
是否可靠 | 不可靠传输,不使用流量控制和拥塞控制 | 可靠传输,使用流量控制和拥塞控制 |
连接对象个数 | 支持一对一,一对多,多对一和多对多交互通信 | 只能是一对一通信 |
传输方式 | 面向报文 | 面向字节流 |
首部开销 | 首部开销小,仅8字节 | 首部最小20字节,最大60字节 |
适用场景 | 适用于实时应用(IP电话、视频会议、直播等) | 适用于要求可靠传输的应用,例如文件传输 |
三次握手:
第一次:建立连接时,客户端发送syn包到服务器,等待服务端确认 第二次:服务器收到syn包,必须确认客户的syn,同时也发送一个syn包,即syn+ACK包 第三次:客户端收到服务器的syn和ack包,向服务器发送确认包ack,发送完毕,客户端和服务端连接成功,完成三次握手
四次挥手:
第一次:浏览器发送完数据后,发送fin请求断开连接 第二次:服务器发送ack到客户端,确认客户端的断开请求 第三次:服务器请求断开fin的请求 第四次:客户端确认服务器的断开ack
POST 方法中对发送数据编码的方式,也就是
Content-Type
有四种方式,其中默认是application/x-www-form-urlencoded
,最方便的是application/json
。 四种方式包括:
传统的ajax请求时候,Content-Type
默认为"文本"类型。
传统的form提交的时候,Content-Type
默认为"Form"类型。
axios传递字符串的时候,Content-Type
默认为"Form"类型。
axios传递对象的时候,Content-Type
默认为"JSON"类型
浏览器缓存的作用:减少冗余的数据传输,节省网络带宽,更快加载页面,缓存降低了服务器的要求,有更快的响应
个人理解: 强制缓存:浏览器在加载资源的时候,会根据本地缓存中的headers中的信息(expires,cache-control)是否要强缓存,如果命中的话,则会使用缓存中的资源,否则继续发送请求。 协商缓存:客户端向服务端发送请求,服务端检测是否有对应的标识,如果没有服务端会返回客户端对应的标识,客户端在下次请求把标识带过去服务器会验证标识,如果通过了,则会响应304,告诉浏览器读取缓存,如果没有通过则返回请求的资源。 两类缓存规则可以同时存在,强制缓存优先级高于对比缓存,也就是说,当执行强制缓存的规则时,如果缓存生效,直接使用缓存,不再执行对比缓存规则。 基于对比缓存,不管是否使用缓存都需要向服务器发送请求,那么还用缓存干什么? 服务端在进行标识比较后,只返回header部分,通过状态码通知客户端使用缓存,不再需要将报文主体部分返回给客户端。
memory cache 将资源文件缓存到内存中,下次请求读取的是内存中的 disk cache 将资源存到硬盘中,下次请求从硬盘中读取
HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。 浏览器向服务器请求数据,发送请求(request)报文; 服务器向浏览器返回数据,返回响应(response)报文。 报文信息主要分为两部分:header,数据主体部分(body)
浏览器的本地存储主要分为
Cookie、WebStorage和IndexDB
, 其中WebStorage
又可以分为localStorage和sessionStorage
。 共同点: 都是保存在浏览器端、且同源的 不同点:
cookie
数据始终在同源的http
请求中携带(即使不需要),即cookie
在浏览器和服务器间来回传递。cookie
数据还有路径(path
)的概念,可以限制cookie
只属于某个路径下sessionStorage
和localStorage
不会自动把数据发送给服务器,仅在本地保存。cookie
数据不能超过4K,sessionStorage和localStorage
可以达到5MsessionStorage
:仅在当前浏览器窗口关闭之前有效;localStorage
:始终有效,窗口或浏览器关闭也一直保存,本地存储,因此用作持久数据;cookie
:只在设置的cookie
过期时间之前有效,即使窗口关闭或浏览器关闭sessionStorage
:不在不同的浏览器窗口中共享,即使是同一个页面;localstorage
:在所有同源窗口中都是共享的;也就是说只要浏览器不关闭,数据仍然存在cookie
: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭,数据仍然存在第一期:前端面试题---JS部分
第二期:前端面试题 ---Vue部分
以上就是本期内容了!!!