huihui
huihui
 ## 一、是什么 `JavaScript` 在设计之初便是单线程，即指程序运行时，只有一个线程存在，同一时间只能做一件事 为什么要这么设计，跟`JavaScript`的应用场景有关 `JavaScript` 初期作为一门浏览器脚本语言，通常用于操作 `DOM` ，如果是多线程，一个线程进行了删除 `DOM` ，另一个添加 `DOM`，此时浏览器该如何处理？ 为了解决单线程运行阻塞问题，`JavaScript`用到了计算机系统的一种运行机制，这种机制就叫做事件循环（Event Loop） #### 事件循环（Event Loop） 在`JavaScript`中，所有的任务都可以分为 - 同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行 - 异步任务：异步执行的任务，比如`ajax`网络请求，`setTimeout `定时函数等 同步任务与异步任务的运行流程图如下：  从上面我们可以看到，同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。上述过程的不断重复就是事件循环 ## 二、宏任务与微任务 如果将任务划分为同步任务和异步任务并不是那么的准确，举个例子：...
 ## 一、是什么 在使用 `git` 进行版本管理的项目中，当完成一个特性的开发并将其合并到 `master` 分支时，会有两种方式： - git merge - git rebase `git rebase` 与 `git merge`都有相同的作用，都是将一个分支的提交合并到另一分支上，但是在原理上却不相同 用法上两者也十分的简单： ### git merge 将当前分支合并到指定分支，命令用法如下： ```cmd git merge xxx ``` ###...
 ## 一、是什么 内存泄漏（Memory leak）是在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存 并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费 程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存 对于持续运行的服务进程，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃  在`C`语言中，因为是手动管理内存，内存泄露是经常出现的事情。 ```clang char * buffer; buffer = (char*) malloc(42); // Do something with buffer free(buffer); ``` 上面是 C 语言代码，`malloc`方法用来申请内存，使用完毕之后，必须自己用`free`方法释放内存。 这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制" ##...
 ## 一、递归 递归（英语：Recursion） 在数学与计算机科学中，是指在函数的定义中使用函数自身的方法 在函数内部，可以调用其他函数。如果一个函数在内部调用自身本身，这个函数就是递归函数 其核心思想是把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解 一般来说，递归需要有边界条件、递归前进阶段和递归返回阶段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回 下面实现一个函数 `pow(x, n)`，它可以计算 `x` 的 `n` 次方 使用迭代的方式，如下： ```js function pow(x, n) { let result = 1; // 再循环中，用 x 乘以 result...
 ## 一、定义 函数的 `this` 关键字在 `JavaScript` 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别 在绝大多数情况下，函数的调用方式决定了 `this` 的值（运行时绑定） `this` 关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用，总指向调用它的对象 举个例子： ```js function baz() { // 当前调用栈是：baz // 因此，当前调用位置是全局作用域 console.log( "baz" ); bar(); // bar // 因此，当前调用位置在baz中...
 ## 一、是什么 继承（inheritance）是面向对象软件技术当中的一个概念。 如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类” - 继承的优点 继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码 在子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能 虽然`JavaScript`并不是真正的面向对象语言，但它天生的灵活性，使应用场景更加丰富 关于继承，我们举个形象的例子： 定义一个类（Class）叫汽车，汽车的属性包括颜色、轮胎、品牌、速度、排气量等 ```js class Car{ constructor(color,speed){ this.color = color this.speed = speed // ... } } ``` 由汽车这个类可以派生出“轿车”和“货车”两个类，在汽车的基础属性上，为轿车添加一个后备厢、给货车添加一个大货箱 ```js //...
 ## 一、是什么 在`react`应用中，事件名都是用小驼峰格式进行书写，例如`onclick`要改写成`onClick` 最简单的事件绑定如下： ```jsx class ShowAlert extends React.Component { showAlert() { console.log("Hi"); } render() { return show; } } ``` 从上面可以看到，事件绑定的方法需要使用`{}`包住 上述的代码看似没有问题，但是当将处理函数输出代码换成`console.log(this)`的时候，点击按钮，则会发现控制台输出`undefined` ## 二、如何绑定 为了解决上面正确输出`this`的问题，常见的绑定方式有如下： - render方法中使用bind -...
 ## 一、是什么 Real DOM，真实`DOM`， 意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实`DOM`结构，如下：  `Virtual Dom`，本质上是以 `JavaScript` 对象形式存在的对 `DOM` 的描述 创建虚拟`DOM`目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟`DOM`对象的节点与真实`DOM`的属性一一照应 在`React`中，`JSX`是其一大特性，可以让你在`JS`中通过使用`XML`的方式去直接声明界面的`DOM`结构 ```jsx const vDom = Hello World // 创建h1标签，右边千万不能加引号 const root = document.getElementById('root') // 找到节点 ReactDOM.render(vDom,...
 ## 一、数据类型存储 前面文章我们讲到，`JavaScript`中存在两大数据类型： - 基本类型 - 引用类型 基本类型数据保存在在栈内存中 引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中 ## 二、浅拷贝 浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝 如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址 即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址 下面简单实现一个浅拷贝 ```js function shallowClone(obj) { const newObj = {}; for(let prop in obj) { if(obj.hasOwnProperty(prop)){...
 ## 一、操作方法 我们也可将字符串常用的操作方法归纳为增、删、改、查，需要知道字符串的特点是一旦创建了，就不可变 ### 增 这里增的意思并不是说直接增添内容，而是创建字符串的一个副本，再进行操作 除了常用`+`以及`${}`进行字符串拼接之外，还可通过`concat` #### concat 用于将一个或多个字符串拼接成一个新字符串 ```js let stringValue = "hello "; let result = stringValue.concat("world"); console.log(result); // "hello world" console.log(stringValue); // "hello" ``` ###...