djdjdjdjdj丶-CSDN博客

原创手写基本实现call、bind、apply

一、作用call、apply、bind作用是改变函数执行时的上下文、也就是改变函数运行时的 this 指向apply、call、bind都可以改变函数的 this 指向三者的第一个参数都是 this 要指向的对象，默认是windowapply和call都会立即执行当前函数，bind会返回一个新函数传参方面，call和bind一直，apply第二个参数接受一个数组手写call这里的this指向调用者，也就是这个函数我们把这个函数当作属性，加入到context中避免key重复，使用Symb

2021-04-08 13:49:28 146 1

原创 javascript对象布局 - Javascript Object Hierarchy

今天在某一篇文章看到了一张图，觉得画的非常好，对于JS中的Function和Object的关系有了详细的描述，作者叫做Javascript Object Hierarchy(JavaScript对象布局)在刚开始看原型原型链的时候，就对顶层的Function和Object很难说清楚，这张图画明白了JS的顶层对象布局。结合图，再看顶层的构造函数Function和Object以及原型、实例的关系，也就豁然开朗。本来这张图在另一篇文章中是很模糊的，通过强大的识图工具，找到的国外的原文。原文：Javascr

2021-02-04 00:35:30 251

原创手写个JS深拷贝

手写JS深拷贝function deepClone(obj) { // 1.递归先写递归的结束条件，直到基本数据类型(和null)才能拷贝赋值 // 用typeof判断基本数据类型和判断null if (typeof obj !== "object" || typeof obj === null) { return obj; } // 2.初始化返回结果 var objClone = Array.isArray(obj) ? [] : {}; // 3.fo

2021-02-03 23:45:10 255

原创 JS简单实现发布订阅模式

发布订阅模式在发布订阅模式里，发布者，并不会直接通知订阅者，换句话说，发布者和订阅者，彼此互不相识。那他们之间如何交流？由一个调度中心来做中间人，发布者更新(publish)主题，由主题(调度中心)来进行通知(noticy)订阅者更新(update)。简单的代码实现参考网上class面向对象实现，相较于很多js event的实现便于理解// 主题class Dep { constructor(callback) { this.subs = []; // 主题的订阅者 t.

2021-01-30 17:36:52 5232 8

原创 JS数组常用方法整理，包括ES6

pop、push、shift、unshiftreverse、sortconcat、slice、splice迭代方法 every some filter map foreach...[]Array.fromcopyWithinfind、findIndexincludes一、栈、队列方法可以用数组模拟栈的和队列数组尾部操作，出pop()，入push()数组头部操作，出shift()，入unshift()出的操作，返回移除的元素在原数组上进行二、排序，反转reve

2021-01-29 12:49:33 517

原创 JS中的this简单总结

this是什么？this是 JavaScript 语言的一个关键字this指的是函数运行时所在的环境(context)它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用1.普通的this全局调用，this指向windowvar x = 1;function test() { console.log(this) // window console.log(this.x); // 1}test();作为某个对象的方法调用，这时this就指这个上级对象。f

2021-01-27 20:32:16 210 2

原创 JS事件循环Event Loop与任务队列

事件循环Event LoopJavaScript是单线程，异步，非阻塞的。为了协调事件、用户交互、脚本、UI 渲染、网络请求，这就有了 Event LoopJS 会创建一个类似于 while (true) 的循环。每次循环的过程就是查看是否有待处理事件，如果有则取出相关事件放入执行栈中由主线程执行。待处理的事件会存储在一个任务队列中，也就是每次循环会查看任务队列中是否有需要执行的任务。任务队列Event QueueJs 中，有两类任务队列：宏任务队列(macro tasks)和微任务队列(

2021-01-26 21:20:42 192 1

原创 css 利用border实现三角形

1.我们先正常实现一个边框.box { width: 100px; height: 100px; border: 2px solid; border-top-color: red; border-right-color: yellow; border-bottom-color: green; border-left-color: blue;}2.再把边框的宽度增加到50px可以看出，border其实并不是四条矩形边框组成的，是由四个三角形组合而成。这里我们可以看作

2021-01-24 12:22:33 442

原创 BFC（Block Formating Context 块级格式化上下文）

为什么会有BFC?理论来讲：被包含在父元素里的元素是不会影响到父元素旁边的元素，事实并非如此。我们想要隔离开，可以触发BFC（Block Formating Context 块级格式化上下文）BFC是什么?MDN块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。BFC的目的就是：形成一个独立的空间，让空间里的子元素不会影响到外面的布局。BFC是一种规则，隔离保护的

2021-01-23 12:18:45 119

原创谈谈JS中的闭包

浅谈闭包如何产生闭包？为了在函数外部访问函数内局部变量，就在父函数中定义一个子函数并让它访问了父函数的局部变量，再通过父函数返回该子函数就实现了调用局部变量的效果。简单举例function fun1() { let num = 1; return function fun2() { console.log(num++); }}const add = fun1();add();形成的条件函数嵌套(函数作参数，函数作返回值)内部函数访问外部函数的局部变量可以把闭包

2021-01-23 00:09:40 116

原创 2021年了！JavaScript有几种数据类型？

2021年了！JavaScript有几种数据类型？看过一些文章，关于JavaScript的数据类型分为几种，有不同的说法。先从大体上看，有说基本数据类型和引用数据类型的；有说原始数据类型和对象数据类型的等等。在这里结合MDN文档和一些网上的文章整理一下。先上结论：八种，分别是：string、number、boolean、undefined、null、symbol(ES6)、bigint(ES10)和object一、JS中的堆栈与数据类型1.从JavaScript中的堆栈谈起首先我们需要知道：

2021-01-22 00:39:32 1430 5

原创 git常用命令

基本命令克隆仓库git clone 远程仓库地址查看当前状态git status查看修改了哪些git diff (文件名)提交文件git add 文件名git add . # 全部提交提交生成记录git commit -m "本次提交说明"查看提交日志git log查看某次提交的详情git show (ID)检出某次提交git checkout 文件名git checkout .提交分支到远程仓库git push origin master从远程获

2021-01-21 22:13:10 90

原创谈谈XMLHttpRequest实现Ajax与跨域问题

文章目录一、XMLHttpRequest对象后端准备实现一个简易的ajax请求1.open()2.xhr.readyState3.xhr.onreadystatechange()4.xhr.status5.send()二、同源策略与跨域1.什么是跨域?2.同源策略三、实现跨域的几种方式1.JSONP实现跨域JSONP原理JSONP实现2.CORS服务端支持对于简单请求对于非简单请求注意3.HTTP代理(http proxy)本文以使用一个XMLHttpRequest对象发起GET请求开始，探讨同源策略与跨

2021-01-20 23:07:23 1436 1

原创 webpack笔记总结（二）

上篇：webpack笔记（一）文章目录三、webpack的高级概念1.Tree Shaking概念如何配置？2.Dev和Prod模式的区分打包区分两个环境运行解决公共部分提取3.Webpack和Code Splitting配置4.代码分割SplitChunkPlugin参数配置详解魔法注释5.Lazy Loading 懒加载，chunk是什么**懒加载：通过import()来异步的加载一个模块****chunk**6.打包分析，Preloading，Prefetching打包分析Preloading和Pr

2021-01-17 22:59:15 2073 10

原创浅谈JS中的原型和原型链

文章目录1.原型和函数几点关键看 Object 和 Function2.谈谈 __proto__属性3.原型链4.instanceof操作符instanceof 原理简易实现1.原型和函数众所周知，JS并没有类(class)的概念,虽然说ES6开始有了类的概念，但是，这并不是说JS有了像Java这些基于类的面向对象语言一样，有了全新的继承模型。ES6中的类，仅仅只是基于现有的原型继承的一种语法糖。几点关键函数都拥有 prototype 属性，指向它的原型对象。也可以说：每个构造函数都有一个pr

2021-01-15 15:40:32 114 1

原创 webpack笔记总结（一）

文章目录一、webpack初探1.webpack究竟是什么?2.搭建webpack环境安装npx 命令npm script 配置3.使用 webpack 的配置文件二、webpack核心概念1.什么是loader例：打包图片2.使用loader打包静态资源-图片file-loaderurl-loader一、webpack初探1.webpack究竟是什么?webpack is a module bundler.webpack 是一个模块打包器，它的主要目标是将 JavaScript 文件打包在一起，打

2021-01-14 17:23:43 2351 1

弟弟的博客