JavaScript世界
文章平均质量分 74
River_Js
热衷于前端工作,兴趣广泛,喜欢阅读技术类书籍和玩有趣儿的小的demo,对新奇好玩的技术有极大的热情!
展开
-
javascript中判断This指向的方法
最近在读《你不知道的JavaScript》上卷,看到了关于this的相关文章,发现在日常学习的时候自己对this 的理解真的很匮乏,读完书才发现其实this内部有一套属于自己的绑定规则。前置知识: 调用位置在学习this 的绑定规则之前,首先要理解一个概念就是调用位置。从字面上理解的就是指函数被调用的位置,但是如果遇到函数嵌套调用比较深或者某些编程模式隐藏了真正的调用位置就没有办法判断真正的调用位置了。那么这个时候就要靠调用栈来判断判断如下函数:function foo () { cons原创 2021-04-21 13:58:00 · 833 阅读 · 2 评论 -
轻松深入理解JavaScript的继承原理
什么是继承?继承这个词,在生活中有很多种语境,可以是继承财产,也可以是继承权利,或是继承血统,仔细想想他们有一个共同的特点就是,继承者所继承的事物均来自被继承者本身,其实JavaScript的继承也是这样的,很多编程中的思想都可以通过生活中的实例来理解JavaScript的继承体现那么在JavaScript中是怎么实现继承的呢?类式继承首先介绍第一种叫类式继承// 类式继承function Father() { this.FatherValue = true}// 为 Fath原创 2021-01-14 23:21:30 · 313 阅读 · 0 评论 -
JavaScript静态类型检查器FLow的使用
为什么使用flow?首先明确一下何为动态类型语言:他指的是代码在运行阶段类型才明确,并且之后允许修改那么什么是弱类型呢?其实就是存在隐式类型的转换比如console.log(100 + '100') // 100100这里是引用这里会发生隐式类型转换,字符串看到了前面的加号,隐式的转换了数据类型,参与了运算,这些在java这类强类型的语言中是不被允许的JavaScript作为一种动态弱类型的语言,有如下几个缺点:缺失类型系统的可靠性没有编译环境,导致有些错误不能尽早的暴露代码提示不原创 2021-01-10 12:26:17 · 569 阅读 · 0 评论 -
手写实现 MyPromise 源码 ,尽可能还原 Promise 中的每一个 API,并通过注释的方式描述思路和原理。
// 初始状态const PENDING = "pending";// 完成状态const FULFILLED = "fulfilled";// 失败状态const REJECTED = "rejected";// 异步执行方法封装function asyncExecFun(fn) { setTimeout(() => fn(), 0);}// 执行promise resolve功能function resolvePromise(promise, res, resolve,原创 2021-01-08 12:47:21 · 215 阅读 · 0 评论 -
javascript函子的详细解析与发展
函子的详细解析与发展历程最近在拉钩大前端高薪训练营学习,学到了很多从前不知道的知识,自己体会到了很多编程理念和学习编程的方法,感谢班班和指导老师以下是我在学习函子时的一个总结想要对字符串进行处理,比如都变成大写字符,并且返回新的字符串 let str = "la gou jiao yu" let UpperStr = str.toUpperCase() console.log(UpperStr)很简单,通过toUpperCase方法就可以很容易的实现,但是这种方法是对str进行直接操作的,原创 2021-01-07 15:13:21 · 1293 阅读 · 4 评论 -
闭包详解,通过调试工具逐步调试
闭包的形成: 函数和周围的状态(词法环境) 的引用捆绑在一起 形成了闭包闭包可以在一个作用域中调用一个函数的内部函数并访问该函数的作用域中的成员简单的理解就是将外部函数的内部成员的作用域延长了,这里需要补充一个小知识:函数在执行的时候会放入一个执行栈上,当函数执行完之后从执行栈上移除但是闭包发生的时候,在堆上的作用域成员,因为被外部引用不能释放,因此函数依然可以访问外部函数的成员看如下按,这是一个闭包的简单应用// 函数作为返回值function makeFn(){ let msg原创 2020-12-31 10:23:35 · 439 阅读 · 0 评论 -
变量解构赋值的7大用途总结
1:交换两个变量的值 let a = 12; let b = 32; [a,b] = [b,a]; console.log(a,b)在ES6之前我们交换两个变量的值的时候往往需要声明一个中间变量,在ES6中可以通过解构赋值来实现,这种写法:简洁、易读、语义清晰2:函数返回多个值返回一个数组:function exampleArr() { return [1,2,3];}var [a,b,c] = exampleArr();console.log([a,b,c]);返回一个原创 2020-11-04 09:21:30 · 2441 阅读 · 8 评论 -
原生JS实现炫酷日食音量播放器
原生JS实现炫酷日食音量播放器首先 看一下展示效果原创 2020-09-14 20:54:52 · 248 阅读 · 2 评论 -
深入理解自定义构造函数(javascript模式读书笔记)
深入理解自定义构造函数在javascript中,有很多方法可以创建对象通过字面量的方式通过内置的构造函数通过自定义的构造函数举个例子 : 这是一个最常见的自定义构造函数,实例化一个Person对象叫tianqin var Person = function(name){ this.name = name; this.say = function(){ return "I am" + " "+this.name }; }; var tianQin =原创 2020-09-05 07:33:36 · 1000 阅读 · 2 评论 -
3D翻转盒子图片展示特效(解决鼠标进入不同的边,自动判断进入的是什么方向)
3D翻转盒子图片展示特效首先展示一下完成的效果第一步:构建html结构在一个容器中,生成六个小盒子,这里我使用了 ul li 的方式 在每一个li中 有一个 pic-area 用来包裹图片和文字,我这里使用了弹性盒子布局的方式,实现了演示的布局,其他方式也都可以,然后通过把文字区域定位,与图片区重叠,为后续构建立方体做准备,为了看得清楚,我增加了一点点透明度,后期会删掉一部分html代码如下: <div class="wrapper"> <ul>原创 2020-08-28 02:39:05 · 1313 阅读 · 3 评论 -
(附带免费源码文件)炫酷缩放图片展示特效,通过90%以上css以及一点点JS实现
缩放图片展示特效首先看一下这个特效的最终效果:首先来分析一下这个效果都有哪些功能首先初始化效果为6列,分别展示了图片的一部分进入页面或者刷新页面时,每一列出现有一定时间间隔,有错落感鼠标移入每一列时,每一列会有变化鼠标点击每一列时,会展开当前图片,其余图片隐藏掉,同时图片出现一个title 和一个 close按钮关闭每一列时会收紧当前图片,并还原到初始化状态首先乍一看好像很复杂的样子,但是这个特效真的用了 99%的css3属性,仅仅是在打开关闭和类名切换的时候用到了一点点js。那么怎原创 2020-08-22 11:07:05 · 1898 阅读 · 2 评论 -
单一var模式以及for循环的小优化(阅读《javascript模式》笔记)
单一var模式在介绍单一var模式之前,先聊聊代码优化,为下文做一个简单的铺垫我认为作为一个程序员要有一个觉悟就是要拥抱变化,无论是技术的革新还是需求的变动,变化如流水,人也要 “随波逐流”,我们在完成一款软件的设计之后,需求的变化以及BUG是非常常见的事情,我们在解决这些问题的同时,其实是把大量的时间,投入到了重新学习和理解相应的问题 以及理解当时用于解决相应问题的代码 所以编写可维护的代码显得尤为重要易于维护的代码有如下特性阅读性好具有一致性预见性好看起来如同是一个人编写有文档那原创 2020-08-13 14:25:28 · 381 阅读 · 0 评论 -
通过时间差来解决鼠标 mousedown/mouseup和click事件的冲突
今日有一需求:鼠标按下可以拖动方块移动,松开鼠标方块留在原地,双击鼠标可以改变鼠标样式首先:鼠标双击(click)事件是通过鼠标按下(mousedown)和鼠标抬起(mouseup)两个动作共同完成的,当我们为一个对象同时绑定这三个事件时,无论绑定的顺序如何,他的执行顺序都是先down然后up 最后click div.onmousedown = function(){ console.log('鼠标按下了!'); } div.onc原创 2020-08-08 11:20:03 · 4863 阅读 · 1 评论 -
JavaScript实现带有开始、暂停、复位的秒表
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #showTime { width: 300px; height: 60px;转载 2020-08-05 17:53:12 · 499 阅读 · 0 评论 -
JavaScript算法之冒泡排序
JavaScript算法之冒泡排序及其优化冒泡排序的英文是bubble sort 他是一种很基础的交换排序算法。我们平时看到的小气泡会不断的向上漂浮,然后这种算法中的每一个元素都可以像小气泡一样朝着一个方向不断移动,可能就这样取名为冒泡排序冒泡排序的思想主要是将相邻的元素两两比较,当一个大于右侧相邻元素的时候,就交换他们的位置;如果小于或者等于的话,位置就不变,可以通过这个动图非常直观的去理解这种思路接下来我们用代码去实现 var arr = [7,3,1,6,8,9,10,2,4,5];原创 2020-08-02 23:27:51 · 200 阅读 · 0 评论 -
JavaScript预编译与执行期上下文
JavaScript运行三部曲Step1:语法分析Step2:预编译Step3:解释执行今天着重介绍一下预编译的过程,在开始正式介绍预编译之前,还要补充两个小知识:一个是:暗示全局变量 imply global这个是说 任何变量,如果未经声明就赋值次变量就归全局所有 a =123; // 这是一个未经声明就赋值的变量; console.log(a);我们执行这个代码块的时候,发现不会报错,并且a 可以正常访问~通过window访问也可以找到a再来看这样一个函数原创 2020-07-30 15:16:03 · 721 阅读 · 0 评论 -
原生js的两种循环方法生成随机验证码
用原生js生成六位随机验证码(无canvas增加干扰)验证码是我们日常上网常见的东西,今天主要介绍一下使用原生的js生成一个六位随机,包含数字,字母大小写的验证码。首先先定义一个字符串,作为我们验证码的一个“字符库”,然后我们随机抽取六个就可以实现这个功能 var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'所以现在问题的关键就在于我们如何从这一长串字符中随机抽取六个字符呢?这里原创 2020-07-29 10:19:35 · 1116 阅读 · 1 评论