谷歌玩家-CSDN博客

原型链继承原型链继承涉及构造函数、原型和实例。function Parent() { this.name = 'parent1'; this.play = [1, 2, 3]}function Child() { this.type = 'child2';}Child.prototype = new Parent()console.log(new Child())创建子类实例时，不能向父构造函数传递参数，导致继承的父类属性没有值。如果包含引用类型，会被所有的实例对象共享，容.

2022-05-31 16:30:35 288 1

原创 ajax、fetch和axios的比较

AJAX、Fetch、axiosAJAXAJAX可以在不更新全局的情况下更新局部页面。通过在与服务器进行数据交换，可以使网页实现异步更新。AJAX的原理就是通过XHR对象来向服务器发起异步请求，从服务器获得数据，然后用JS来操作DOM更新页面。领导想找小李汇报一下工作，就委托秘书去叫小李，自己就接着做其他事情，直到秘书告诉他小李已经到了，最后小李跟领导汇报工作。Ajax请求数据流程与“领导想找小李汇报一下工作”类似，上述秘书就相当于XMLHttpRequest对象，领导相当于浏览器，响应数据相当于小

2022-05-30 20:43:10 4448 1

原创 webpack

Webpack对webpack的理解webpack是一个用于现代JS应用程序的静态模块打包工具。webpack的目的是实现前端项目的模块化，皆在更高效的管理和维护项目中的每一个资源。webpack可以很好的管理、打包开发中使用的HTML、CSS、JS和静态文件（图片、字体）等，让开发更高效。webpack解决了什么问题（基本功能）代码转化：可以把ts转化为js；less、scss转换为css文件优化：压缩HTML、CSS、JS文件，压缩图片等代码分割：提取首屏不需要执行的代码，让其异步执行，

2022-05-30 16:29:52 487

原创前端面经总结

HTMLhtml跳转链接用哪个标签实现？如果要从一个新窗口打开链接通过什么属性？CSSCSS如何针对不同浏览器做适应。有哪些CSS属性是不被IE兼容的？CSS在浏览器表现的运用（font-size、盒模型、布局）JS使用原生JS和CSS对一个div进行隐藏。ajax、fetch和axios的区别js实现继承的方式React八股ca证书常见的请求头常见的响应头浏览器线程和进程的区别性能优化.......................

2022-05-26 11:07:45 188

原创实现setTimeout准时执行

setTimeout准时执行1. 采用系统时间补偿法：修正每次时间间隔，前面耽误了时间，那么就缩小当前定时器的间隔时间。第一个定时器执行了67ms，为了能在100ms的时候执行两次定时器，所以第二次定时器的时间就设置为33ms。Offset = 现在的时间（67ms）- 执行一个定时器消耗的时间（50ms） = 时间差（17ms）Offset = new Date().getTime() - (startTime + count * interval)当前定时器的时间间隔 = 原来定时器的时间间

2022-05-20 10:18:02 1529

原创浏览器本地存储

Cookie和Session什么是CookieCookie的本质就是一段文本，它是浏览器第一次向服务器发起请求后浏览器返回给客户端的，在以后发送时浏览器都会写带上这个Cookie，用于服务器判断前后请求是否由同一个用户发起，起到保持用户登录状态的作用。Cookie的作用会话状态管理：如用户登陆状态、购物车、游戏分数等个性化设置：主题、用户自定义设置等浏览器行为跟踪：分析用户行为什么是SessionSession是服务器和客户端一次会话的过程。Session对象存储特定用户会话所需的属性及

2022-05-17 20:45:46 691

原创面试遇到的promise场景题目

1 实现一个timeout函数,fn在seconds秒内执行则成功（直接使用setTimeout）function fn1() { return new Promise((resolve, reject) => { setTimeout(() => { console.log(1); resolve() }, 1000); })}//实现一个timeout函数,fn seconds秒内执行则成功function timeout(fn, s

2022-05-16 11:15:42 483

原创 CSS动画实现的三种方式

CSS动画CSS动画就是元素从一种样式过渡到另一种样式的过程。常见的动画效果很多，比如：平移、缩放、旋转等。CSS实现动画的方式有以下几种：transition：实现渐变动画transform：实现缩放、平移等效果animation：实现自定义动画transitionproperty：填写需要变化的CSS属性duration：完成过渡效果需要的时间单位(s或者ms)timing-function：完成效果的速度曲线，比如：linear（匀速变化）、ease（从慢到快再到慢）、ease-

2022-05-16 10:30:21 4217

原创面试题汇总

三栏布局<style> * { padding: 0; margin: 0; } .left { width: 100px; height: 100px; background-color: orange; float: left; } .right { width: 200px; height: 100px; background-color

2022-05-07 22:50:28 780

原创浮动与BFC

浮动在容器不设置高度且子元素浮动时，容器高度不能被内容撑开，使内容跑到容器外面，影响布局，这种现象就是浮动。浮动的工作原理浮动元素会脱离文档流，不会占据空间（引起高度塌陷问题）浮动元素碰到包含它的边框或其它浮动元素的边框时停留浮动元素可以左右移动，直到遇到另一个浮动元素的边框或遇到包含它的边框后才会停留，浮动元素脱离了文档流，当元素浮动后，不会影响块级元素的布局，只会影响内联元素的布局。当包含浮动元素的容器高度小于浮动框时，会引起高度塌陷问题。浮动元素引起的问题浮动元素的父元素高度无法被

2022-05-06 18:46:54 220

原创 Redux

Redux对Redux的理解Redux是一个用来管理数据状态的工具。因为React传递数据是单向的，父组件可以向子组件通过props传递数据，而子组件无法直接向父组件传递数据，这样的单向数据流成就了React的数据可控性。随着项目越来越大，state也越来越难以管理，而使用Redux可以轻松管理这些state。Redux主要解决的问题Redux主要解决的问题是将Redux的状态与React的UI绑定到一起，当使用dispatch(action)改变state时可以自动更新页面。Redux的工作原

2022-04-27 11:08:46 410

原创浏览器缓存

浏览器缓存什么是浏览器缓存浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。浏览器缓存的优点减少了冗余的数据传输减少了服务器压力，提升了网站性能加快了页面加载的速度协商缓存与强缓存强缓存：如果缓存资源有效，就不会向服务器发送请求，直接从缓存中读取资源，返回200状态码。强缓存可以通过两种方式来设置：分别是htpp头信息中的Expires属性和Cache-Control属性。服务器通过在响应头中添加 Expir

2022-04-26 17:27:02 1334

原创 React生命周期

生命周期React的生命周期有哪些React生命周期分为三个阶段：装载阶段：组件第一次在页面渲染更新阶段：组件状态发生变化引起页面重新渲染卸载阶段：组件从DOM树中被移除的阶段react生命周期(旧)react生命周期(新)组件挂载阶段组件被创建就在挂载阶段，组件被创建后组件实例被插入到DOM中，完成组件的第一次渲染。在该阶段会一次调用如下方法：constructorgetDerivedStateFromPropsrendercomponentDidMount(1)

2022-04-26 11:30:39 317

原创 HTML5与CSS3新特性

HTML5语义化标签媒体标签：audio、video、source表单表单类型：email：验证邮箱url：验证URLnumber：只能输入数字date：日期选择表单属性：placeholder：提示信息autofocus：自动获取焦点required：输入框不能为空表单事件：oninput：每当输入框的内容发生变化时都会触发此事件进度条：progress标签用来表示任务进度DOM查询：document.querySelector()和documen

2022-04-26 10:33:39 91

原创垃圾回收机制

垃圾回收机制垃圾回收的概念JS代码运行时，需要分配内存空间来存储变量和值，当变量不再参与运行时，就需要系统收回被占用的内存空间。回收机制JS具有自动回收机制，会定期对那些不再使用的变量、对象所占用的内存进行释放，原理就是找到不再使用的变量，然后释放掉其占用的内存。JS有全局变量和局部变量。全局变量会一直保存在内存中，直到页面卸载才回收变量内存；局部变量声明在函数内部，会在函数执行结束后回收内存。当使用闭包时，函数内部定义的局部变量会一直留在内存中，不会被使用。所以尽量避免使用闭包，以免造成

2022-04-25 20:28:52 115

原创 this/call/apply/bind

this对this的理解this是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。call()、apply()、bind()例子1:const name = "小王"const age = 17const obj = { name: "校长", objAge: this.age, func: function () { console.log(this.name + "年龄" + this.age) }}调用obj.func()输出”校长年龄undef

2022-04-25 20:27:00 1465

原创 JS----ES6

ES6箭头函数箭头函数和普通函数的区别外形不同箭头函数使用 => 定义。// 普通函数function demo(){ ...}// 箭头函数let demo = () => { ...}箭头函数都是匿名函数普通函数可以有匿名函数，也可以有具名函数；箭头函数只有匿名函数。// 具名函数function demo(){ ...}// 匿名函数let func = function(){ ...}// 箭头函数let demo

2022-04-25 20:05:09 214

原创线程与进程

进程与线程进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程。线程是进程的一部分，是程序执行中一个单一的顺序控制流程。进程是资源分配的最小单位，线程是CPU调度的最小单位。进程和线程的关系进程中任意一线程崩溃都会导致整个进程崩溃线程之间可以共享进程中的数据当一个进程被关闭后，操作系统会回收进程占用的资源进程之间的内容相互隔离，使OS中的进程互不干扰Chrome浏览器架构图Chrome浏览器包括：浏览器主进程、GOU进程、网络进程、多个渲染进程、多个插件进程。

2022-04-25 17:57:55 191

原创浏览器安全

浏览器安全SQL注入SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句，在管理员不知情的情况下实现非法操作，以此来实现欺骗数据库服务器执行非授权的任意查询，从而进一步得到相应的数据信息。XSS攻击XSS攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如cookie等。XSS的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合到了

2022-04-24 17:45:32 2963

原创浏览器事件机制

浏览器事件机制什么是事件事件是用户操作页面时发生的交互动作，比如click/move等，事件除了用户触发的动作外，还可以是文档加载、窗口滚动和大小调整。事件被封装为一个event对象，包含了事件的属性和方法。事件模型DOM0级事件模型：可以在网页中直接定义监听函数，也可以通过js来指定监听函数，直接在DOM对象上注册事件。IE事件模型：该事件模型共有两个过程：事件处理阶段和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到documen

2022-04-24 17:31:47 2547

原创垃圾回收机制

垃圾回收机制垃圾回收的概念JS代码运行时，需要分配内存空间来存储变量和值，当变量不再参与运行时，就需要系统收回被占用的内存空间。回收机制JS具有自动回收机制，会定期对那些不再使用的变量、对象所占用的内存进行释放，原理就是找到不再使用的变量，然后释放掉其占用的内存。JS有全局变量和局部变量。全局变量会一直保存在内存中，直到页面卸载才回收变量内存；局部变量声明在函数内部，会在函数执行结束后回收内存。当使用闭包时，函数内部定义的局部变量会一直留在内存中，不会被使用。所以尽量避免使用闭包，以免造成

2022-04-20 10:51:29 117

原创 Map Object WeakMap

map和object的区别Map 对象存有键值对，其中的键可以是任何数据类型；Map对象记得键的原始插入顺序；Map对象具有表示映射大小的属性。Map的API：new Map()：创建新的Map对象set()：为Map对象中的键设置值get()：获取Map对象中键的值clear()：删除Map中的所有元素delete()：删除由键指定的元素has()：如果键存在，则返回 truesize：返回Map的长度Map三个遍历生成函数和一个遍历方法：entries()：返回Map对象中

2022-04-19 15:39:46 150

原创 JS----闭包

对闭包的理解闭包是指有权访问另一个函数作用域中变量的函数。创建闭包最常见的方法就是在一个函数中创建另一个函数，创建的函数可以访问到当前函数的局部变量。闭包有两个常用的用途：在函数外部能够访问到函数内部的变量。可以通过外部调用闭包函数，从而在外部访问到函数内部的变量，可以使用这种方法来创建私有变量。是已经运行结束的函数中的上下文变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收。在JS中，闭包存在的意义就是让我们可以在函数外部访问函数内部的变量。比如，函数

2022-04-18 20:53:03 146

原创 JS原型与原型链

原型与原型链prototype（原型）在JS中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。function Person(age) { this.age = age }Person.prototype.name = 'kavin' var person1 = new Person()var person2 = new Person()console.log(person1.name) //kavinconsole.log(person2.n

2022-04-18 17:53:50 484 1

原创受控组件与非受控组件

虚拟DOM什么是DOMDOM是用一颗逻辑树来表示一个文档，树的每个分支的终点都是一个节点，可以用特定的方式（编写JS、CSS、HTML）来改变这个树的结构，从而改变文档结构、样式或内容。什么是虚拟DOM虚拟DOM就是一个JS对象，通过对象的方式来表示DOM结构，通过事务处理机制，将多次DOM修改的结果一次性更新到页面上，从而有效的减少页面渲染次数，减少修改DOM重绘重排的时间，提高渲染性能。React在内存中维护一个跟真实DOM一样的虚拟DOM树，再改动完组件后，会再生成一个新的虚拟DOM，Rea

2022-04-18 09:15:38 1640

原创 React 虚拟DOM

虚拟DOM什么是DOMDOM是用一颗逻辑树来表示一个文档，树的每个分支的终点都是一个节点，可以用特定的方式（编写JS、CSS、HTML）来改变这个树的结构，从而改变文档结构、样式或内容。什么是虚拟DOM虚拟DOM就是一个JS对象，通过对象的方式来表示DOM结构，通过事务处理机制，将多次DOM修改的结果一次性更新到页面上，从而有效的减少页面渲染次数，减少修改DOM重绘重排的时间，提高渲染性能。React在内存中维护一个跟真实DOM一样的虚拟DOM树，再改动完组件后，会再生成一个新的虚拟DOM，Rea

2022-04-17 17:20:34 4539

原创 js Promise

异步编程JS异步机制回调函数使用多个回调函数嵌套会造成回调地狱，上下两层的代码耦合度高。PromisePromise是ES6引入的异步编程的解决方案，Promise可以封装异步操作，获取成功和失败的结果。Promise的优点是：支持链式调用，可以解决回调地狱问题。generatorasync当函数内部执行到一个await语句时，如果语句返回一个promise对象，那么函数会等待promise变为resolve状态在继续向下执行。Promise使用流程首先创建Promise实例，然后P

2022-04-14 21:10:29 512

原创 react setState详解

React setState调用的原理setState具体的执行过程如下：首先调用setState()函数：ReactComponent.prototype.setState = function(partialState, callback){ // updater：一个带有形参的函数，返回被更新的状态对象。它可以接收到props和state this.updater.enqueueSetState(this, partialState) if(callback){ thi

2022-04-14 16:54:46 3391 1

原创 React Hooks

Hooks类组件：类组件是采用ES6 class的写法进行组件编写，类组件内部封装了很多东西，比如state，生命周期函数等，我们我们可以在组件挂载、渲染、卸载阶段分别写不同的逻辑。但使用类组件难以拆分内部逻辑，不方便复用，因此有了函数式组件。函数组件真正的将数据和页面渲染绑定到了一起，实现了输入一组数据，输出一个UI。更加方便复用与拆分。但函数式组件是一种无状态组件，它不可以定义state，没有生命周期函数。而Hooks使得函数式组件有了这些能力。为什么useState使用数组而不是对象如果使用数

2022-04-14 16:37:09 881

housing.csv

空空如也