- 博客(26)
- 收藏
- 关注
RSS订阅原创 V8引擎垃圾回收机制分析
关于垃圾回收机制是一个比较引人深思的问题，因为常规的业务开发基本是用不到的。但是，又是前端必须了解的一个内容。首先，垃圾回收是跟语言本身的特性有关的。这句话的意思是JS、java等有自己垃圾回收机制存在，不需要开发者手动去进行内存的分配和内存的释放。而C是需要开发者自己去申请内存、释放内存的。下面进入正题： 1.js的垃圾收集以及其优缺点？ js使用自动的内存管理，被称为垃圾回收机制。优点是：简化开发、节省代码（不需要像C语言一样手动分配内存，手动释放内存）。缺...
2020-05-12 18:46:36
835
原创 发布订阅 跟 观察者模式的关系和区别
什么是发布订阅？这里实现一个简单的发布订阅说明一下。myEvent = { arr:[], on(fn){ this.arr.push(fn); }, emit(){ this.arr.forEach(item=>item()) }}myEvent.on(()=&g...
2019-09-16 13:51:38
217
原创 在理构造函数的继承，这次用图说话。
之前发过一篇关于继承的博客。不过，当时理解的一般，写的也不怎么样。这次重新回头理了一下关于构造函数的继承。因为ES5没有类的概念。所以，才会有构造函数模拟类。首先让我们用一张图来理清楚构造函数、原型、实例三者之间的关系。代码还有关系如下：function Parent(){ this.name = "A";}function.prototype.run = funct...
2019-09-12 16:59:21
191
原创 操作数组方法整理（使数组变异）
定义一个原数组 var a = ["a","b","c"];操作原数组并且使原数组发生改变（例子的a每次都是上面定义的，而非通过方法操作之后的）。1.pop() 方法用于删除并返回数组的最后一个元素。(我个人理解我返回当前的最后一项并在数组中删除) 例如：a.pop(); //返回"c" c...
2019-06-11 14:13:31
193
原创 摸清JS的代码执行顺序对于写代码很重要
首先，JS是单线程的。所以代码的执行是有自己的执行顺序。如： var a = "1",b = "2",c = "3"; console.log(c); console.log(b); console.log...
2019-05-08 11:08:23
970
原创 前端跨域整理
同源策略1.协议 2.域名 3.端口 。三者中有任何一个不同，所发请求即会跨域，三者都相同为同域。浏览器为什么不支持跨域？Cookie LocalStorage 可获取的话，信息会有泄漏的危险DOM元素也有同源策略 iframe 支持跨域的话，可以通过iframe获取别人的登录信息也会有信息安全的问题 ajax 也不支持跨域...
2019-04-17 10:51:35
102
原创 React生命周期以及执行顺序
Mounting中为组件的挂载过程 componentWillMount组件挂载之前 render组件的渲染方法 componentDidMount组件挂载完成执行Updation中为组件数据发生变化的过程 props独有 componentW...
2019-04-15 10:34:13
2153
1
原创 cookie、sessionStorage、localStorage三者的区别
区别1作用域cookie跟localStorage的作用域是整个浏览器。sessionStorage只针对当前窗口如：浏览器打开2个页面。在第一个页面中写入cookie或者localStorage之后在第二个页面可以读取。但是，sessionStorage无法再 第二个页面读取第一个页面设置的值。区别2生命周期cookie的默认生命周期是到浏览器的关闭。sessi...
2019-04-10 14:41:33
179
原创 js对象属性类型----------数据类型
js对象属性类型分为两类：1.数据类型 2.访问器类型。1.数据类型 例如： var obj = { name:"obj初始的名字" } console.log(obj...
2019-03-11 18:27:17
775
原创 react性能优化之生命周期函数shouldComponentUpdate
react的父级组件的render函数重新渲染会引起子组件的render方法的重新渲染。但是，有的时候子组件的接受父组件的数据没有变动。子组件render的执行会影响性能，这时就可以使用shouldComponentUpdate来解决这个问题。shouldComponentUpdate 这是一个需要返回布尔值的生命周期，可以理解为疑问句 "组件本身需要被重新渲染吗?"例如： ...
2019-03-02 15:11:01
1599
原创 react16版本之后开发中的注意点之setState异步
setState（setState底层为异步的原因） 防止短时间内多次修改setState影响虚拟dom的比对及render方法的执行。因此，setState是异步函数。那么及时获取state数据 就要在异步函数执行完毕而非按照代码从上到下的执行来获取。 如： state = {inputValue:"12"}; ...
2019-02-26 15:40:38
889
原创 JS中this关键字的指向
JS中感觉this的指向是多变的。这里进行一下总结个人感觉this的指向大致分为以下几类1、作为普通函数的调用。例如: var x = 1; function test(){ console.log(this.x); } test(); ...
2019-02-20 18:20:45
319
原创 JS闭包理解
个人理解：JS闭包就是让函数外部可以读取函数内部的变量。理解JS闭包首先要理解几个前提：1.变量的作用域。首先变量的作用域比较容易理解。一个变量的作用域就是程序源代码中定义这个变量的区域！例如：全局变量拥有全局作用域，在JS的代码中任何地方都是有定义。 函数内部声明的变量只在函数体内部有定义，是局部变量，作用域也是局部的。 var scope ...
2019-02-18 18:14:52
158
原创 JS构造函数继承---------拷贝继承
拷贝继承顾明思议就是讲需要继承的父类构造函数原型方法通过遍历添加到子类构造函数的原型上，从而使子类构造函数原型或者子类实例具备父类构造函数原型的属性和方法（只能遍历父类构造函数原型可被遍历的属性。因为，可能存在不可被遍历的属性跟方法）例如： function Objfather(){ this.type = "人类" }...
2019-02-16 12:05:14
272
原创 JS构造函数继承---------直接继承父构造函数的prototype
理解prototype继承之前先理解prototype、__proto__、constructorfunction Objfather (){ this.role = "父亲";}console.log(Objfather.prototype) Objfather.prototype中有两个属性。分别是 constructor和__proto__const...
2019-02-15 11:47:19
600
1
原创 JS构造函数继承---------通过call或者apply继承父级属性
父级构造函数function Father(){ this.type = "人类";}子级构造函数function Son(name,age) { this.name = name; this.age = age}如果使子级继承父级方法1：call或者apply。如果需要传参按照call和apply的传参即可。function Son(nam...
2019-02-14 18:08:05
729
原创 call、apply、bind的用途跟区别
call、apply、bind主要是用来改变this的重指向。this对象是在运行时基于函数的执行环境绑定的，全局的环境中this等价于window，而函数被作为对象的方法调用时，this就会等价于当前对象。匿名函数本身执行环境带有全局性，所以匿名函数的this通常指向window。例子： var variable = "全局变量"; fun...
2019-02-13 18:06:51
184
原创 伪类和伪元素的区别
伪类：选择元素基于当前的状态。比如元素达到一个特定状态时，可能得到一个伪类的样式；状态改变的时候又会失去这个样式。 比如： :hover :focus :link等等 a{color:black} a:hover{color:red} a标签正常为黑色字体，鼠...
2019-02-12 17:26:03
189
原创 JS属性检测
判断一个属性是否属于一个属性集合可以用in运算符、hasOwnPreperty()、propertyIsEnumerable()等方法完成。三者的用法与区别1.in运算符。var a = {x:1};"x" in a; //true"y" in a; //falsei...
2018-12-18 11:38:31
389
翻译 JS变量声明跟变量作用域
JS的变量声明存在变量提升对JS脚本执行的时候,函数的声明会被提取到顶端执行。所以如 ： add(1,2)； function add(a,b){ console.log(a+b); }是可以执行打印3的。对于变量而言，声明也会被提前。但是赋值的位置是不变的如 ： console.lo...
2018-11-07 14:39:10
137
翻译 对象转化为原始值
对象转化为布尔值很简单：所有的对象（包括数组跟函数）都转换为true。 对于包装对象也是：如 new Bolean（false）这是一个对象而不是原始值。对象到字符串的转化和对象到数字的转化是通过调用带转化对象的方法完成。这里提到的字符串和数字的转化规则只适用于本地对象。宿主对象（如：web浏览器定义的对象）则...
2018-11-07 11:31:36
551
原创 JavaScript是一种面向对象的语言
JavaScript是一种面向对象的语言。不严格的讲，这意味着我们不用全局的定义函数去操作不同类型的值。数据本身可以定义方法来使用值。如：a = [5,1,2,4,3] 要对a数组进行排序，不必要将a传入sort()函数，而是调用a的一个方法sort() a.sort();从技术上讲，只有JavaScript对象才能拥有方法。然而，数字、字符串、布尔值也可以拥有...
2018-11-02 11:36:44
2659
原创 JavaScript的数据类型
Javascript的数据类型分为两类: 1.原始类型 2.对象类型原始类型：包括数字、字符串、布尔值、null、undefined(特殊原始值 null、undefined它们通常代表了各自特殊类型的唯一的成员)对象类型：1.普通对象 2.数组（特殊对象） 3.函数（特殊对象） ...
2018-11-01 17:27:43
70
原创 使用npm包报错解决
用npm包管理工具搭建vue项目时遇到安装报错。如上所示：问题原因是npm包版本的问题。可以试着降级npm版本或者升级npm版本。我个人选择升级到5.6.0附上一个连接点击打开链接...
2018-04-10 14:15:07
693
原创 解决谷歌浏览器定位抖动问题
PC项目中有个页面置顶导航的需求 ,将导航设置成为了position: fixed;top:0;left:0; 结果发现在多台电脑上存在上下滚动的抖动现象，设置下面的-webkit-transform: translateZ(0);即可解决这个问题，亲测可用...
2018-02-22 16:42:51
4157
原创 推荐一款重点解决移动端（已支持 PC）各种滚动场景需求的插件 better-scroll
推荐一款重点解决移动端（已支持 PC）各种滚动场景需求的插件 better-scroll有兴趣的可以去这里去这里看一下，下面的网站链接https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20是什么亲手试过，滑动体验很不错
2018-01-19 16:58:56
3560
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人