<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[M_Edison的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/M_Edison</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; M_Edison]]></copyright><item><title><![CDATA[解决vscode 获取扩展失败，XHR failed]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/122196793</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/122196793</guid><author>M_Edison</author><pubDate>Tue, 28 Dec 2021 16:36:35 +0800</pubDate><description><![CDATA[今天用Vscode下东西的时候发现不能报这个错误，发现Vscode也不能检查更新了
vscode 获取扩展失败，XHR failed

查了查原因是计算机使用了代理服务器的缘故，要想解决这个问题我们可以直接关掉代理服务器即可。
位置在设置-&gt;网络和internet-&gt;代理


...]]></description><category></category></item><item><title><![CDATA[Typescript指南]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/122174937</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/122174937</guid><author>M_Edison</author><pubDate>Mon, 27 Dec 2021 16:25:01 +0800</pubDate><description><![CDATA[文章目录TS的类型1.布尔类型2.数字类型3.字符串类型4.数组类型5.元组类型6.枚举类型7.any类型8.void类型9.never类型10.Object类型Ts的编译选项ts面向对象1.抽象类2.接口3.属性的封装4.泛型
TS的类型
首先ts支持JavaScript的所有基本类型，除此之外还多出了一些类型。
1.布尔类型
这是js与ts都具备的基本类型。
let flag:boolean=false;

2.数字类型
和JavaScript的数字类型相似，typescript中的数组类型都是浮点型，]]></description><category></category></item><item><title><![CDATA[你应该掌握的浏览器相关知识]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/119563375</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/119563375</guid><author>M_Edison</author><pubDate>Tue, 10 Aug 2021 10:08:29 +0800</pubDate><description><![CDATA[文章目录一.浏览器安全1. XSS攻击2. CSRF攻击3.有哪些可能引起的前端安全的问题二.浏览器缓存机制1.对缓存的理解2.浏览器缓存的分类强缓存协商缓存3.浏览器的缓存机制的全过程三.浏览器渲染原理1.浏览器渲染引擎的主要模块以及渲染过程3. style样式渲染4. link样式渲染5.阻塞渲染**关于CSS的阻塞**关于js的阻塞四.浏览器本地存储1. sessionStorage，LocalStorage和CookieCookieLocalStorageSessionStorage2.浏览器的跨页]]></description><category></category></item><item><title><![CDATA[你能手写一个Promise吗？]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/119487817</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/119487817</guid><author>M_Edison</author><pubDate>Sat, 07 Aug 2021 15:53:03 +0800</pubDate><description><![CDATA[文章目录一.初始化Promise二.构造函数实现三.then函数的实现四. catch的实现五. Promise.reject的实现六. Promise.resolve的实现七. Promise.all方法八. Promise.race方法

如果你想更加深入的了解Promise的使用以及它的内部机制，那不妨跟着我来手写一个Promise吧。

一.初始化Promise
首先我们应该清楚Promise的基本结构，Promise的原型方法以及函数对象本身的方法。
then与catch是我们Promise构造函]]></description><category></category></item><item><title><![CDATA[CSS高频重点]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/119361521</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/119361521</guid><author>M_Edison</author><pubDate>Tue, 03 Aug 2021 23:20:10 +0800</pubDate><description><![CDATA[1. CSS选择器以及优先级
标签选择器、伪元素选择器：1
类选择器、属性选择器、伪类选择器：10
id选择器：100
内联样式：1000
注意：

!important声明的样式优先级最高
优先级相同时，最后出现的样式生效
继承得到的样式优先级最低
通用选择器(*)、子选择器(&gt;)、相邻同胞选择器(+)并不在这四个等级中，所以它们的权值为0

2. display的属性值及其作用
none：元素不显示，并且从文档流中移除该元素
block：块类型，可设置宽高，换行显示（默认宽度为父元素宽度）
inl]]></description><category></category></item><item><title><![CDATA[你应该掌握的前端性能优化面试点！]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/118772375</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/118772375</guid><author>M_Edison</author><pubDate>Fri, 16 Jul 2021 00:24:34 +0800</pubDate><description><![CDATA[文章目录一.浏览器渲染原理1.浏览器渲染引擎的主要模块以及渲染过程3. style样式渲染4. link样式渲染5.阻塞渲染**关于CSS的阻塞**关于js的阻塞二. 重绘与重排1.什么是css图层2.图层创建的条件3.重绘4.重排（回流）5.常见的触发重排的操作6.关于重绘重排的优化方案7.requestAnimationFrame与定时器setTimeout的区别三. CDN1.CDN的概念2.CDN的作用3.CDN的使用常见四.防抖节流1.函数防抖2.函数节流五.懒加载1.懒加载的概念2.懒加载的实现]]></description><category></category></item><item><title><![CDATA[你需要注意的Javascript高频面试点]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/118580162</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/118580162</guid><author>M_Edison</author><pubDate>Thu, 08 Jul 2021 19:00:42 +0800</pubDate><description><![CDATA[文章目录一.数据类型1. JavaScript有哪些数据类型，它们的区别？2. 数据类型的检测方式？3. 判断数组的方式有哪些？4. null和undefined的区别5.为什么null返回一个Object6.intanceof 操作符的实现原理及实现7. 为什么0.1+0.2 ! == 0.3，如何让其相等？8.如何获得安全的undefined值9.typeof NaN的结果是多少10.isNaN与Number.isNaN函数的区别11.==操作符的强制类型转换规则12.其他值转到string规则13.其]]></description><category></category></item><item><title><![CDATA[JavaScript面试:你可以手写一个new操作符吗？]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/118441060</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/118441060</guid><author>M_Edison</author><pubDate>Sat, 03 Jul 2021 15:50:19 +0800</pubDate><description><![CDATA[要想知道new操作符的原理，就得先了解new的作用是什么，我们都知道，一般将我们的构造函数实例化为对象时就要使用new操作符。

要想真正掌握并手写一个new，你需要掌握以下知识点：原型与原型链以及this绑定相关知识。

其实new的内部流程十分简单，大概就是这么几个步骤：

创建一个新的对象obj
将对象的隐式原型指向构造函数的原型对象
通过apply调用构造函数(改变this指向到obj)
返回obj，如果构造函数有返回值还需判断，如果返回值为引用类型则返回引用类型对象，如果为原始类型就返回obj

]]></description><category></category></item><item><title><![CDATA[JavaScript面试:手写bind/call/apply函数]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/118441022</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/118441022</guid><author>M_Edison</author><pubDate>Sat, 03 Jul 2021 15:48:26 +0800</pubDate><description><![CDATA[1.手写call和apply函数
手写call函数：
步骤：
1.判断第一个参数的类型
2.将当前的函数作为传入对象的方法
3.取出argument类数组的值
4.执行obj.当前函数(newarugument),并保存返回值
5.删除传入对象的方法
6.返回返回值
代码如下：
Function.prototype.newCall = function (obj) {
    if (typeof obj != "object" || obj == null) { obj = window }
    ob]]></description><category></category></item><item><title><![CDATA[回望Javascript:ES6]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/118440986</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/118440986</guid><author>M_Edison</author><pubDate>Sat, 03 Jul 2021 15:46:16 +0800</pubDate><description><![CDATA[1.let，var ，const的区别
回答这个问题要从一下几个方向去回答：
1.块级作用域：let和const具有块级作用域，var不存在块级作用域的概念。块级作用域解决了ES5的两个问题：内层变量可能覆盖外层变量和循环时泄露循环变量为全局变量
2.变量提升：var 存在变量提升，let和const不存在变量提升（只能在声明后使用），涉及到上下文的概念
3.给全局添加属性：在全局window下，var声明的变量是全局变量，并将变量添加到全局对象的属性上，而let和const不会。
4.重复声明：var可以]]></description><category></category></item><item><title><![CDATA[回望Javascript:一些Js基础]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/118440941</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/118440941</guid><author>M_Edison</author><pubDate>Sat, 03 Jul 2021 15:44:30 +0800</pubDate><description><![CDATA[文章目录1.JS访问内部数据变量的方式与哪些以及使用场景？2. Javascript函数调用的方式有哪四种？3.new操作符的实现原理4.数组有哪些原生的方法5.什么是DOM和BOM6.对类数组（伪数组）的的理解，如何转换为数组7.为什么要使用尾调用？8.for...in和for...of的区别9.对Ajax的理解，实现一个Ajax请求10.Ajax、axios和fetch的区别11.Javascript脚本延迟加载的方法有哪些？12.CommonJS和ES6模块的异同点？
1.JS访问内部数据变量的方式与]]></description><category></category></item><item><title><![CDATA[回望Javascript:数据类型相关]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/118440888</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/118440888</guid><author>M_Edison</author><pubDate>Sat, 03 Jul 2021 15:41:52 +0800</pubDate><description><![CDATA[1. JavaScript有哪些数据类型，它们的区别？
Javascript有八种数据类型：Number，String，undefined，null，Boolean，Symbol，BigInt，Object。
其中Symbol和BigInt是ES6中新增的数据类型：

symbol代表创建后独一无二且不可变的数据类型，主要是为了解决可能出现的全局变量冲突的问题
BigInt是一种数字类型的数据，它可以表示任意精度格式的整数，适用BigInt可以安全的存储和操作大整数，即使这个数已经超过了Number能够表示]]></description><category></category></item><item><title><![CDATA[回望Javascript:执行上下文/作用域链/闭包]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/117712027</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/117712027</guid><author>M_Edison</author><pubDate>Tue, 08 Jun 2021 18:14:05 +0800</pubDate><description><![CDATA[文章目录1.执行上下文2.执行上下文栈3.作用域4.作用域链5.闭包6.内存溢出与内存泄露
1.执行上下文

执行上下文是用来预处理JS代码的
执行上下文栈是用来管理执行上下文的

JS代码执行时它的代码位置分为一个全局代码和函数内的代码，因此执行上下文分为全局执行上下文和函数执行上下文，
全局执行上下文
在执行全局代码前会创建一个全局执行上下文环境将window将其确定为全局执行上下文；并且对全局数据进行一个预处理，这里面就包括：

var 定义的全局变量设为undefined，并且将其添加为window]]></description><category></category></item><item><title><![CDATA[回望Javascript:原型与原型链]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/117531713</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/117531713</guid><author>M_Edison</author><pubDate>Thu, 03 Jun 2021 18:18:31 +0800</pubDate><description><![CDATA[文章目录1.原型对象上的constructor指向哪里2.显示原型与隐式原型3.谈一谈原型与原型链4.Function，Object与原型的关系5.原型链指向题目6.探索instanceOf(手写instanceof)7.两道面试题
1.原型对象上的constructor指向哪里
每个函数都有一个prototype属性，这是一个引用，指向了函数的原型对象，每个原型对象都有一个constructor属性，这个属性指向函数对象本身。
验证一下：
  function Fun(params) {}
  conso]]></description><category></category></item><item><title><![CDATA[学完Hooks，你会爱上React]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/117428363</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/117428363</guid><author>M_Edison</author><pubDate>Mon, 31 May 2021 20:30:43 +0800</pubDate><description><![CDATA[文章目录1.Hook的优势1.1 Hook与类组件进行对比1.2 总结2. State Hook3. Effect Hook3.1 effect与componentWillUnmount3.2 使用多个effect3.3 effect的性能优化4. Context Hook5. Reducer Hook7.Usecallback8.UseMemo9.useRef10.useImperativeHandle11.useLayoutEffect12.自定义hooks
1.Hook的优势
Hooks的概念是Rea]]></description><category></category></item><item><title><![CDATA[Redux状态管理修炼手册]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/117322404</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/117322404</guid><author>M_Edison</author><pubDate>Thu, 27 May 2021 10:18:31 +0800</pubDate><description><![CDATA[文章目录1.初识Redux1.1 为什么要使用Redux1.2 redux的核心理念1.3 redux的三大原则2.redux的基本使用2.1使用流程2.2 redux目录结构划分2.3 redux的处理流程3.react结合redux3.1 在组件中直接使用3.2 自定义connect函数4.react-redux使用5.中间件的使用5.1.中间件作用和目的5.2 redux-thunk的使用6.redux-devtools7.redux-saga

在使用react进行开发的过程中,Redux作为一种状]]></description><category></category></item><item><title><![CDATA[React+antdesign实现添加评论功能（底部附源码地址）]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/117093628</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/117093628</guid><author>M_Edison</author><pubDate>Thu, 20 May 2021 23:12:00 +0800</pubDate><description><![CDATA[React结合antDesign组件库实现一个的评论功能案例，有疑问评论区交流

引入这些就不赘述了，直接说实现过程吧，这里的input部分和item是分开的两个组件，使用到的第三方的插件：
"styled-components": "^5.3.0",//css in js 
"moment": "^2.29.1", //处理时间(推荐使用)
"antd": "^4.15.6", //不多说
"@craco/craco": "^6.1.2",//React处理配置文件(可修改antd的主题)

接下来直..]]></description><category></category></item><item><title><![CDATA[React组件详解(组件生命周期，组件间各种通信)等]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/116881940</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/116881940</guid><author>M_Edison</author><pubDate>Sun, 16 May 2021 09:18:27 +0800</pubDate><description><![CDATA[文章目录1. react组件化2.类组件与函数组件的创建2.1 类组件2.2 函数组件3.组件的生命周期4. 组件的嵌套4.父子组件间的通信4.1 父传子4.2 子传父5. 插槽实现6.跨组件通信
1. react组件化
​	目前的前端三大框架的核心都是采用组件化的思想。

组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
任何的应用都可以被抽象为一个组件树

组件化思想的应用：

尽可能的将页面拆分为一个个小的，可复用的组件
是我们的代码更加易于管理，并且扩展性也增强

R]]></description><category></category></item><item><title><![CDATA[jsx核心知识详情]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/116669332</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/116669332</guid><author>M_Edison</author><pubDate>Tue, 11 May 2021 20:43:15 +0800</pubDate><description><![CDATA[文章目录1.认识jsx1.1 react为什么使用jsx1.2 使用前须知2. jsx基操2.1 jsx中的注释2.2 jsx嵌入变量2.3 jsx嵌入表达式2.4 jsx绑定属性3. jsx事件绑定3.1 jsx之间绑定中的this指向问题3.2 事件参数传递4. jsx渲染5.Jsx原理解析6.react的虚拟DOM7.为什么使用虚拟DOM
1.认识jsx
​	jsx实际上是JavaScript语法上的一个扩展，也是JavaScript XML的缩写。它的作用就是用来描述我们的用户界面，使有关界面的代码]]></description><category></category></item><item><title><![CDATA[React事件绑定时this指向问题解决以及事件传参]]></title><link>https://blog.youkuaiyun.com/M_Edison/article/details/116644797</link><guid>https://blog.youkuaiyun.com/M_Edison/article/details/116644797</guid><author>M_Edison</author><pubDate>Tue, 11 May 2021 10:49:43 +0800</pubDate><description><![CDATA[React事件绑定中的this指向问题
当时如果这是我有一个需求，我点击以下按钮，来获取我们state中的数据。
btnfun(){
    console.log(this);//undefined
    console.log(this.state.data);//not undefined
}

这里为什么会出现这个问题呢？因为btnfun()函数并不是我们主动调用的，而是当触发button的事件时，react内部再去调用这个函数。而react的内部时不知道这里的this是指向哪里的。
为了解决这个]]></description><category></category></item></channel></rss>