![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
文章平均质量分 75
『业精于勤』
努力,努力,再努力
展开
-
JS实现继承的几种方式
原型链的续篇来了,如果不是太了解原型链朋友,可以先看下我的这篇博客,相信你会有所收获的~构造继承构造函数绑定 function Animal(){ this.species = '动物'; } Animal.prototype.eat=function(){ console.log('我是动物') } function Cat(name,color){ Anim.原创 2021-04-14 21:07:44 · 144 阅读 · 0 评论 -
从__proto__和prototype来深入理解JS原型链
简介首先继承作为JS面向对象编程核心之一,到底是什么东东呢?在我的理解中,从广义上来讲,就是让子类能有父类的属性和方法,从而父类就一处定义,多处复用,从狭义上来讲,就是玩原型链的,也就是说如果大家掌握了原型链,也就掌握了继承,接下来呢,我会从两部分给大家做个分享,分别是原型链实现继承原型链在说原型链之前,我先说下__proto__和prototype这两个属性,因为接下来,这两个词会经常出现__proto__,用来读取或设置当前对象的原型对象(prototype),并且每个JS对象一定对应原创 2021-04-14 13:35:34 · 284 阅读 · 1 评论 -
【已解决】video标签不会自动播放问题
今天在写一个视频组件的时候,写了autopaly但还是不会自动播放,于是我就去MDN上搜了一下,果真是找到了答案,MDN给出的解释如下图所示:很明显,我们只需要加上muted属性就可以自动播放了,muted属性是限制声音的打开与关闭的意思。...原创 2020-12-28 17:16:32 · 4197 阅读 · 0 评论 -
memoize – 返回 memoized(缓存的)函数
memoized函数实现原理:使用一组参数初次调用函数时,缓存参数和计算结果,当再次使用相同的参数调用该函数时,直接返回相应的缓存结果。function memoize(func) { if (typeof func != 'function') { throw new TypeError('Expected a function') } const memoized = function(...args) { const key = args[0] const cac原创 2020-12-14 10:46:14 · 1688 阅读 · 2 评论 -
localStorage存爆了怎么办?
简介作为前端开发人员,localStorage和sessionStorage是会经常用到的,之前由于项目原因,存爆的情况是几乎不存在,所以一直没有写过针对存爆的逻辑,然而最近做一个功能,就是在大文件上传,存MD5的时候,考虑到会存爆,就从头到尾写了一遍,接下来就和大家分享一下我的思路。处理逻辑处理存爆的中心思想就是用新的去替换无用的项,什么算无用的,就要看你们的业务具体是什么了?就比如,大文件上传,我定义的所谓无用的就是最早上传的那个,我会去找到它,然后删除,在存上新文件的MD5,那么,接下来,咱们就原创 2020-10-26 22:06:10 · 1516 阅读 · 0 评论 -
Js event对象offsetX, clientX, pageX, screenX, layerX, x区别(图解)
简介因为实际开发中,很少用到event对象的这几个值,每当写的时候又记不清,然后就要浪费时间去查找准确的资料,很是不爽,所以就做个记录~话不多说,直接上图(ps:图是网上找的,如果侵权,立马删除):针对offsetX, clientX, pageX, screenX,图上已经标的很明白了,就不做讲解了~event.xevent.x代表点击的点距离可视区左边框的距离,而它在不同浏览器处理结果是不一样的,首先看以下代码<body> <div> 外原创 2020-05-09 15:09:21 · 1490 阅读 · 0 评论 -
所谓dragenter和dragleave的“失效”问题
今天工作中,遇到了一个奇葩问题,就是有个需求,文件拖拽上传,不过需要文件拖拽到容器当中才显示拖拽上传的范围框,然后离开容器,范围框消失,于是乎,立马去查了mdn,看了下API,然后分分钟写了出来,校验的时候,奇葩的事出现了,在我dragenter的时候不断的触发dragleave,当时我就满脸的黑人问号,好在最终,老天眷顾我,哈哈,被我发现了其中的奥妙,下面,我就举个列子,贴代码,给大家介绍下,为...原创 2019-04-04 22:29:50 · 4574 阅读 · 3 评论 -
JS高级程序设计阅读笔记---代码优化(最佳实践)
简介本文主要针对之前我写的一篇前端优化大全做个扩展,主要记录的是代码上的优化。避免全局查找可能优化脚本性能最重要的就是注意全局查找。使用全局变量和函数肯定要比局部的开销更大,因为要涉及作用域链上的查找。请看以下函数:function updateUI(){ var imgs = document.getElementsByTagName("img"); for (var i=0,...原创 2019-12-08 22:48:10 · 175 阅读 · 0 评论 -
JS高级程序设计阅读笔记---函数柯里化
函数柯里化是什么?函数柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术 // 普通的add函数 function add(x, y) { return x + y } // Currying后 function curryingAdd(x) { return fu...原创 2019-12-08 15:57:07 · 200 阅读 · 0 评论 -
JS高级程序设计阅读笔记---跨浏览器的事件处理程序
let EventUtil = { /* *绑定事件 *@param element 绑定元素 *@param type 事件类型 *@param handler 处理程序 *@des{ addE...原创 2019-12-08 00:48:56 · 96 阅读 · 0 评论 -
JS高级程序设计阅读笔记---元素大小
#1原创 2019-12-07 23:15:58 · 142 阅读 · 0 评论 -
JS高级程序设计阅读笔记---DOM2样式操作与访问
简介任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性。这个 style 对象是 CSSStyleDeclaration 的实例,包含着通过 HTML 的 style 特性指定的所有样式信息,但不包含与外部样式表或嵌入样式表经层叠而来的样式,“DOM2 级样式”模块围绕这 3 种应用样式的机制提供了一套 API。访问样式表常用的就不多说...原创 2019-11-08 15:12:03 · 120 阅读 · 0 评论 -
JS高级程序设计阅读笔记---DOM遍历
简介“DOM2 级遍历和范围”模块定义了两个用于辅助完成顺序遍历 DOM 结构的类型:NodeIterator和 TreeWalker。NodeIteratorNodeIterator类型是两者中比较简单的一个,可以使用 document.createNodeIterator()方法创建它的新实例。这个方法接受下列 4 个参数。root:想要作为搜索起点的树中的节点。whatToSho...原创 2019-11-11 10:47:04 · 213 阅读 · 0 评论 -
JS高级程序设计阅读笔记---JS 位运算符
简介位操作符用于在最基本的层次上,即按内存中表示数值的位来操作数值,ECMAScript中所有数值都是以IEEE-754 64 位格式存储的,但位操作符并不直接操作64位值,而是先将64位值转换为32位的整数,然后执行操作,最后再将结果转换为64位,对于有符号的整数,前31位用于表示整数的值,第32位表示数值的符号(0为正数,1为负数),前31位的每一位都表示2的幂,第一位表示2º以此类推。例...原创 2019-10-12 12:12:25 · 94 阅读 · 0 评论 -
JS 面向对象编程
首先申明,本文参考的是阮一峰老师的博客,因为写的真是太好了,为了加深记忆,理解,所以自己手写一份,链接是http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html,本文主要抽取了里面的构造函数部分。构造函数模式所谓的构造函数是什么呢?其实就是一个普通函数,函数名首字母一般大写,但是...原创 2019-01-30 17:56:25 · 150 阅读 · 0 评论 -
JS 闭包
什么是闭包?广义上讲,function都是闭包,不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的“闭包”。先看一个例子function a(){ var num=1; var b=function(){ console.log(num) } return b;}a()();当函数b对a中的变量保持着引用,这时候需要注意两点:...原创 2019-02-15 12:51:28 · 159 阅读 · 0 评论 -
JS 实现双向绑定
想要用js实现双向绑定,主要用到Object.defineProperty()方法。Object.defineProperty()会直接在一个对象上定义新属性,或者说修改一个对象的现有属性,并返回该对象。语法Object.defineproperty(obj,prop,descriptor)参数Obj:要在其上定义属性的对象。prop:要定义或修改的属性的名称。d...原创 2019-01-31 11:01:42 · 6040 阅读 · 2 评论 -
手撸JS call,apply,bind
相同与不同点大家应该都知道,call,apply,bind的共同点都可以改变this的指向,而不同点呢,就是返回值不同,call,apply的返回值取决于目标函数是否存在返回值,而bind是返回一个新的函数,并把this指向这个函数。而call,apply的区别就是参数的区别,apply是接受一个数组,而call只能接受单个单个的参数(PS:给大家说一个小技巧可以非常容易的记住call和app...原创 2019-03-27 00:02:52 · 382 阅读 · 0 评论 -
JS this详解
this的由来javascript允许在函数体内,引用当前环境的其他变量var fn=function(){ console.log(x)}上面代码使用变量x,而变量x由当前的运行环境提供。那么问题来了,函数可以在不同的运行环境下执行,所以需要一种机制,可以在函数体内内部获取当前的运行环境(context),所以this就出现了,它的作用就是在函数体内部,指代当前的运行环...原创 2019-03-30 14:01:21 · 13038 阅读 · 4 评论 -
JS new原理和代码实现
var Fn=function(){ this.name='hty' } const fn=new Fn;当new Fn执行的时候,内部执行过程如下:一个继承自Fn.prototype的新对象被创建。 使用指定的参数调用构造函数Fn,并将this绑定到新创建的对象。new Fn等同于new Fn(),也就是没有指定...原创 2019-03-30 16:39:19 · 3122 阅读 · 0 评论 -
JS手动实现事件代理
简介由于事件在冒泡阶段向上传播到父节点,因此可以把子节点监听的事件在父节点的监听,由父节点的监听函数统一处理多个子元素的的事件,这种方法就叫做事件的代理,处理如下:var ul = document.querySelector('ul');ul.addEventListener('click', function (event) { if (event.target.tagName.t...原创 2019-04-07 13:28:29 · 991 阅读 · 0 评论 -
JS 设计模式:观察者模式和发布/订阅模式
观察者模式一个类(称为subject)根据它维护一个观察者列表,自动通知它们状态的任何更改,当subject需要通知观察者一些事件时,它会向观察者广播一个通知(其中可以包括与通知subject相关的特定数据)。当某些观察者不需要得到通知时,需要移除这个观察者。代码class ObserverList { constructor() { this.observerList = [...原创 2019-04-13 14:35:42 · 688 阅读 · 1 评论 -
JS高级程序设计阅读笔记---Number,parseInt,parseFloat
简介大家应该都知道有三个函数可以把非数值转换为数值:Number(),parseInt(),parseFloat,前者可以用户任何数据类型,而后两者则专门用于把字符串转换为数值,这三个函数对于同样的输入会有返回不同的结果。Number如果是Boolean值,true和false会被转换为1和0如果是数值,只是简单的传入和返回如果是null,返回0如果是undefined,返回NaN...原创 2019-10-10 14:57:22 · 124 阅读 · 0 评论 -
JS 数据类型检测及限制
typeoftypeof("xxx") //"string"typeof(123) //"number"typeof(true) //"boolean"typeof(null) //"object"typeof(undefined) //undefinedtypeof({name:'xxx'}) //"object"typeof(function(){}) //"fu...原创 2019-01-29 15:50:57 · 627 阅读 · 0 评论