![](https://img-blog.csdnimg.cn/2645702afbbf40b4aa3377341dbb8009.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 85
JavaScript
赤蓝紫
这个作者很懒,什么都没留下…
展开
-
前端下载文件的几种方式
前端下载文件的几种方式原创 2022-06-01 20:19:57 · 11849 阅读 · 1 评论 -
WebSocket(简单体验版)
Web Socket(套接字):就是通过一个长时连接实现与服务器全双工、双向的通信。Web Socket使用的并不是HTTP协议而是自定义的协议,所以如果我们使用Web Socket的时候,URL不再是或,而是或(但是,实际上是看红宝书才想着玩一下下,在开发中还没试过用这个来开发的)主要特点:服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。要创建一个新的Web Socket,首先需要实例化一个对象。我们实例化WebSocket对象时,传的参数应该是一个绝对,同源策略不适用于WebSocke原创 2022-06-27 20:56:56 · 662 阅读 · 2 评论 -
代理与反射(二)
使用代理模式可以实现一些有用的功能。通过添加对应捕获器,就可以捕获、、等操作,可以监控这个对象何时在何处被访问过,并且能在访问、修改前干想干的事,并通过反射重新实现原功能。这里有一个需要小小注意的点:通过代理对象的操作才会被捕获,而直接操作目标对象的操作不会被捕获。因为代理的内部实现对于外部的代码来说是不可见的,所以想要隐藏目标对象上的属性也很容易实现。我们上面说过,需要通过反射来实现原功能,但是我们也可以不实现原功能,而是返回其他值。从上图,我们可以知道,直接访问目标对象、目标对象属性以及访问代理对原创 2022-06-09 11:46:59 · 83 阅读 · 0 评论 -
代理与反射(一)
ES6新增的代理与反射提供了拦截,并且能够增加其他行为。实际上,就有点像ES6之前的。用法就是,通过构造函数给目标对象定义一个关联的代理对象,还可以添加捕获器,之后这个代理对象就能够作为抽象的目标对象来使用,而在操作影响到目标对象之前,会被定义的捕获器劫持。所有捕获器都可以访问到相应的参数,基于这些参数可以重新执行被捕获方法的原始行为。捕获器会接收到目标对象、要查询的属性和代理对象三个参数。反射的简单使用从上面的例子中,我们已经知道可以通过捕获器的参数重建原始行为,但是重建原始行为比较麻烦......原创 2022-06-04 11:26:44 · 110 阅读 · 0 评论 -
创建对象的几种方式(二)
创建对象的几种方式(二)看红宝书+查资料,重新梳理JavaScript的知识。原型模式原型的知识不会过多赘述,可以查看我之前写的文章,或者自己找资料。每个函数都会创建一个prototype属性,它就是原型对象,在它上面定义的属性和方法可以被对象实例共享。所以在构造函数中赋值给对象的值,可以变成赋值给它们的原型。function Person() { }Person.prototype.name = 'clz';Person.prototype.age = 21;Person.proto原创 2022-05-26 11:44:16 · 103 阅读 · 0 评论 -
创建对象的几种方式(一)
创建对象的几种方式(一)看红宝书+查资料,重新梳理JavaScript的知识。工厂模式首先需要一个函数(工厂),然后在函数中创建具体对象。这种模式可以抽象创建具体对象的过程,这样子,我们想要创建对象,只需要调用函数,让属性值进厂即可。function createPerson(name, age) { const o = new Object() o.name = name; o.age = age; o.listen = function () {原创 2022-05-26 11:43:29 · 96 阅读 · 0 评论 -
JavaScript之对象(二)
JavaScript之对象(二)看红宝书+查资料,重新梳理JavaScript的知识。合并对象 Object.assign() Object.assign()可以用来将原对象的属性合并到目标对象上,而且这个方法还会返回合并后的目标对象。它会使用源对象上的[[Get]]取得属性的值,然后使用目标对象上的[[Set]]设置属性的值。let target = { name: 'clz'};let source = { age: 21};let result = null;原创 2022-05-25 10:02:55 · 2750 阅读 · 0 评论 -
JavaScript之对象(一)
JavaScript之对象(一)看红宝书+查资料,重新梳理JavaScript的知识。对象的属性数据属性数据属性有四个特性。通过特性,可以设置属性。如通过[[Enumerable]]为false就能不让该属性被枚举。另外,为了区别是不是特殊的属性,规范会用两个中括号将特性的名称括起来,如[[Writable]]。[[Configurable]]: 表示属性是否可以被设置。如被delete,以及能否修改特性等。[[Enumerable]]: 表示属性是不是可被枚举的。[[Writable]原创 2022-05-25 10:02:23 · 71 阅读 · 0 评论 -
JavaScript之函数(一)
JavaScript之函数(一)看红宝书+查资料,重新梳理JavaScript的知识。默认参数值在ES6之前,我们想要实现默认参数的话,需要先检测某个参数是否等于undefined,如果是的话,证明此时并没有传这个参数,那就给它一个默认值。function mytest(name) { name = typeof name === 'undefined' ? 'clz' : name return name}console.log(mytest('赤蓝紫')) // 赤原创 2022-05-24 09:51:02 · 88 阅读 · 0 评论 -
JavaScript之函数(二) 函数内部三个不常见的属性
JavaScript之函数(二) 函数内部三个不常见的属性看红宝书+查资料,重新梳理JavaScript的知识。arguments.calleearguments就不多说了,但是arguments有一个callee属性,是一个指向arguments对象所在函数的指针。先来一下阶乘函数看看function factorial(num) { if (num <= 1) { return 1 } else { return num * facto原创 2022-05-24 09:51:47 · 105 阅读 · 0 评论 -
JavaScript之生成器
JavaScript之生成器看红宝书+查资料,重新梳理JavaScript的知识。生成器是一个函数的形式,通过在函数名称前加一个星号(*)就表示它是一个生成器。所以只要是可以定义函数的地方,就可以定义生成器function* gFn() { }const gFn = function* () { }const o = { * gFn() { }}箭头函数不能用来定义生成器函数,因为生成器函数使用** function*语法**编写。那为啥上面的第三个例子可以不使用 func原创 2022-05-22 11:00:12 · 817 阅读 · 0 评论 -
JavaScript之迭代器
JavaScript之迭代器看红宝书+查资料,重新梳理JavaScript的知识。迭代就是指可以从一个数据集中按照一定的顺序,不断取出数据的过程。那么迭代和遍历有啥子区别呢?迭代强调依次取数据的过程,不保证把所有的数据都取完遍历强调的是要把所有的数据依次全部取出在JavaScript中,迭代器是能调用 next方法实现迭代的一个对象,该方法返回一个具有两个属性的对象。 value:可迭代对象的下一个值 done:表示是否已经取出所有的数据了。 false表示还有数据, true表示原创 2022-05-22 10:58:39 · 6197 阅读 · 1 评论 -
Array.from的食用指南
Array.from的食用指南看红宝书+查资料,重新梳理JavaScript的知识。将伪数组转换成数组伪数组:有若干索引属性的任意对象以及一个length属性const fakeArr = { 0: 'red', b: 'blue', 2: 'purple', w: 'white', length: 4}console.log(Array.from(fakeArr)) // ['red', undefined, 'purple', undefined]伪数组的属性原创 2022-05-21 10:58:55 · 136 阅读 · 0 评论 -
JavaScript冷门知识
JavaScript冷门知识看红宝书,重新梳理JavaScript的知识。这部分主要是梳理冷门的知识点(对个人来说是冷门的)组成ECMAScript(核心):提供核心功能。每门语言的根本,大同小异,会有一些特殊的地方,比如JS有变量提升。DOM(文档对象模型):提供与网页内容交互的方法和接口。主要就是操作DOM元素,包括样式修改、新增节点、删除节点等。BOM(浏览器对象模型):提供与浏览器交互的方法和接口。比如 location对象可以获取或设置窗口的URL等。script元素首先,学习过原创 2022-05-19 21:17:32 · 579 阅读 · 2 评论 -
var、let和const之间的区别
var、let和const之间的区别作用域不同 var是函数作用域, let、const是块级作用域函数作用域就是在函数中声明了 var变量,那么这个变量在整个函数里都是有效的。块级作用域则是在块里是有效的。块级作用域就是用{}包住的区域,常用的有for,while,if等,只是有 {}包住也是块级作用域{ var a = 111 let b = 222 const c = 333 console.log(a) // 111 console.log(b)// 2原创 2022-05-13 14:06:22 · 320 阅读 · 0 评论 -
重学预编译
重学预编译前言:原本打算彻底放弃CSDN,进军掘金的,但是看到陆续还有小伙伴关注,最后决定多花一点时间,同步更新。如果这篇文章对你有帮助,请不要吝啬你的赞。😃前情回顾参加掘金日新计划时,在群里看到的问题(改造了下)var a;if (true) { console.log(a) a = 111 function a() { } a = 222 console.log(a)}console.log(a)基础知识回顾变量提升实际上,变量的提升其实算是JS的诟病了原创 2022-05-12 20:30:10 · 250 阅读 · 2 评论 -
自定义工具函数库(三)
自定义工具函数库(三)最终仓库:utils: 自定义工具库1. 自定义instanceof语法: myInstanceOf(obj, Type)功能: 判断obj是否是Type类型的实例实现: Type的原型对象是否是obj的原型链上的某个对象, 如果是返回true, 否则返回false之前的笔记:详解原型链// 自定义instanceoffunction myInstanceof(obj, fn) { let prototype = fn.prototype // 获取函数原创 2022-03-22 13:38:15 · 1269 阅读 · 0 评论 -
自定义工具函数库(二) 数组相关
自定义工具函数库(二) 数组相关最终仓库:utils: 自定义工具库以前的笔记:JS数组常用的方法1. 数组声明式系列方法1.1 map函数封装实现map()方法创建一个新数组,其结果是该数组中的每个元素各自调用一次提供的函数后的返回值循环,数组的每个元素都调用一次函数,并把每次循环得到的返回值都存好,循环结束后,把存好的数组返回。// map函数的封装实现function map(arr, callback) { let ret = [] for (let i = 0; i原创 2022-03-20 21:02:23 · 377 阅读 · 0 评论 -
自定义工具函数库(一) 函数相关
自定义工具函数库(一) 函数相关最终仓库:utils: 自定义工具库之前在哔哩哔哩看的视频的笔记。整理了一下。1.1 call 函数封装实现原理:为传入的obj添加临时方法,然后去调用这个临时方法,这样子,这个方法的this就会指向调用它的对象了,最后还需要把临时方法删除掉。// call函数封装实现function call(fn, obj, ...args) { if (obj === undefined || obj === null) { // 如果call原创 2022-03-19 11:39:23 · 799 阅读 · 0 评论 -
JavaScript实现继承的六种方式
JavaScript实现继承的六种方式父类function Person(name) { this.name = name this.say = function () { console.log('1 + 1 = 2') }}Person.prototype.listen = function () { console.log('エウテルペ')}1. 原型链继承将父类的实例作为子类的原型function Person(name) { this.name原创 2022-03-17 17:03:54 · 957 阅读 · 0 评论 -
详解原型与原型链
详解原型与原型链其实,刚开始学JavaScript时,就有学过原型与原型链的相关知识了,只是当时还没有养成写笔记的习惯,导致现在已经忘的七七八八了。这边文章真是花了很多心思,写了两天,看了很多篇篇博文,其中有小参考的,有解决一点疑惑的,但是最后只标注了一篇帮助最大的。构造函数实例的构造函数属性(constructor)指向其构造函数function Person(name) { this.name = name}const person = new Person('clz')cons原创 2022-03-16 18:05:16 · 4831 阅读 · 0 评论 -
详解JavaScript 执行机制
详解JavaScript 执行机制热身/* 先打印1, 3, 2s后打印2 */console.log(1)setTimeout(() => { console.log(2)}, 1000)console.log(3)/* 先打印1, 3, 后打印2 */console.log(1)setTimeout(() => { console.log(2)}, 0)console.log(3)第一个例子的话不难理解,定时器函数就是1s后才调用回调函数.而第二个例子原创 2022-03-14 12:27:14 · 1146 阅读 · 0 评论 -
Promise学习笔记(二)
Promise学习笔记(二)1. 改变promise的状态promise的状态一开始是pending,改变promise的状态有三个方法:调用resolve函数:pending => fulfilled(resolved)调用reject函数:pending => rejected抛出异常:pending => rejected// 0. 初始状态:pendingconst p0 = new Promise((resolve, reject) => {})cons原创 2022-03-05 11:38:03 · 303 阅读 · 0 评论 -
Promise学习笔记(一)
Promise学习笔记(一)一直有在用Promise,但是没有系统学过Promise,自然也不知道原理。现在就来学习一波。1. 介绍Promise是JS中进行异步编程的新解决方案。在这之前使用过回调函数进行异步编程。Promise是一个构造函数,Promise对象用来封装一个异步操作并可以获取其成功或失败的结果值Promise优点支持链式调用,可解决回调地狱问题 回调地狱:回调函数嵌套使用 回调地狱导致的问题:阅读困难(后期维护麻烦)不便于异常处理指定回调函数的原创 2022-03-05 11:36:42 · 652 阅读 · 0 评论 -
JavaScript生成验证码和32位随机码
JavaScript生成验证码和31.使用canvas实现生成验证码功能本文的html文件如下图所示,实现验证码的js文件为verify.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con原创 2021-12-11 14:18:00 · 1969 阅读 · 0 评论 -
通过JS实现剪贴板操作
通过JS实现剪贴板操作在网上找到很多种方法,ZeroClipboard.js、clipboard.js插件等,但是都没有办法解决本人项目中的问题,最后发现可以通过navigator对象得到clipboard,进行剪切板操作先来一下clipboard.js版本的热热身。1. clipboard.js1.1 通过text的function()来复制内容<!DOCTYPE html><html lang="en"> <head&g原创 2021-12-16 18:18:43 · 3151 阅读 · 0 评论 -
JavaScript DOM(二)
JavaScript DOM(二)搬运自个人博客:JavaScript DOM(二)案例只留下案例名称,需复习的话,下载素材,按名字搜索后可找到文件节点操作通过上文可知获取元素可以来利用DOM提供的方法来获取元素,如getElementById、querySelector等方法,但是也可以利用节点关系来获取元素节点概述节点层级利用DOM树可以把节点划分为不同的层级关系,如父子层级、兄弟层级父节点node.parentNode //node.parentNode var son =原创 2022-02-26 10:47:25 · 385 阅读 · 0 评论 -
JavaScript DOM(一)
JavaScript DOM(一)搬运自个人博客:JavaScript DOM(一)整理一下学习的DOM部分知识,首先小复习一下知识点"预解析"。.案例只留下案例名称,需复习的话,下载素材,按名字搜索后可找到文件预解析运行js会分为两步。预解析代码执行预解析:js引擎会把js里面所有的var和function提升到当前作用域的最前面预解析分为:变量预解析(变量提升)把所有的变量声明提升到当前的最前面。只提升声明,不提升赋值,函数同理,不提升调用函数预解析(函数提升)把所原创 2022-02-26 10:45:55 · 818 阅读 · 0 评论 -
JavaScript事件
JavaScript事件搬运自个人博客:JavaScript事件注册事件(绑定事件)给元素添加事件,称为注册事件或者绑定事件。有传统方式和方法监听方式传统方式利用on开头的事件,如onclick, 同一个元素同一个事件只能设置一个处理函数,出现多个处理函数的话,后面的会覆盖前面的。例子: <script> var btn = document.querySelector("button"); btn.onclick = function () {原创 2022-02-26 10:49:27 · 375 阅读 · 0 评论