1123

docs/src/pages/FixedArticle/JavaScript/index.md

@@ -317,3 +317,173 @@ Object.prototype.__proto__ === null
 - 每当引擎碰到一个函数的时候，他就会创建一个函数执行上下文，然后将这个函数执行上下文压到执行栈中
 - js引擎会执行位于执行栈栈顶的执行上下文（一般是函数执行上下文），当该函数执行结束后，对应的执行上下文就会被弹出，然后控制流程到达执行栈的下一个上下文
 
+# javaScript中的事件模型
+## 事件与事件流
+javascript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性，常见的有加载时间、鼠标事件、自定义事件等
+
+由于DOM是一个树结构，如果在父子节点绑定事件的时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到了事件流的概念
+
+事件流都会经历三个阶段：
+- 事件捕获阶段
+- 处于目标阶段
+- 事件冒泡阶段 
+ ### 事件冒泡
+ 事件冒泡是从下往上的传播方式，由最具体的元素（触发节点）然后逐渐向上传播到最不具体的那个节点，也就是DOM中最高层的父节点
+
+## 事件模型
+事件模型可以分为三种：
+- 原始事件模型（DOM0级）
+- 标准事件模型（DOM2级）
+- IE事件模型（基本不用）
+
+### 原始事件模型
+事件绑定监听函数比较简单，有两种方式：
+- HTML代码中直接绑定
+- 通过JS代码绑定
+#### 特性
+- 绑定速度快
+      DOM0级事件具有很好的跨浏览器优势，会以最快的速度绑定，但由于绑定的速度太快，可能页面还未完全加载出来，以至于事件可能无法正常执行
+- 只支持冒泡，不支持捕获
+- 同一个类型的的事件只能绑定一次
+- 删除DOM0级事件  btn.onclick=null
+### 标准事件模型
+在该事件模型中，一次事件共有三个过程
+- 事件捕获阶段：事件从document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行
+- 事件处理阶段：事件到达目标元素，触发目标元素的监听函数
+- 事件冒泡阶段：事件从目标元素冒泡到document，一次检查经过的节点是否绑定了事件监听函数，如果有，则执行
+### IE事件模型
+IE事件模型共有两个过程：
+- 事件处理阶段： 事件到达目标元素，触发目标元素的监听函数
+- 事件冒泡阶段：事件从目标元素冒泡到document，一次检查应该的节点是否绑定了事件监听函数，如果有，则执行
+# typeof和instanceof
+## typeof
+typeof 操作服返回一个字符串，表示未经计算的操作数的类型
+- 使用方法如下：
+```js
+typeof a
+typeof(a)
+```
+a 表示对象或原始值的表达式，其类型将被返回
+#### 存在的问题
+- 引用数据类型如果用typeof来判断的话，除了function会被识别以外，其他都返回object
+- typeof null  返回的为object
+## instanceof
+instanceof运算符用于检测构造函数的prototype 属性是否出现在某个实例对象的原型链上
+
+## 区别
+typeof和instanceof都是判断数据类型的方法，区别如下：
+- typeof会返回一个变量的基本类型，instanceof返回的是一个布尔值
+- instanceof可以准确地判断负责引用数据类型，但是不能正确判断基础数据类型
+- 而typeof也存在弊端，他虽然可以判断基础数据类型（null除外），但是引用数据类型中，除了function之外，其他的也无法判断
+- 所以如果需要进行类型判断，建议使用Object.prototype.toString.call()方法来进行判断
+# 事件代理及其应用场景
+## 什么是事件代理
+- 事件代理，通俗的讲，就是把一个元素的响应事件（click、keydown 。。。。。）的函数委托到另一个元素上，前面讲到，事件流都会经过三个阶段：捕获阶段->目标阶段->冒泡阶段，而事件委托就是在冒泡阶段完成的
+- 事件委托，会把一个或者一组元素的事件委托到他的父层或者更外层的元素上，真正绑定事件的是外层元素，而不是目标元素。当事件相应到目标元素上时，会通过冒泡事件极致从而触发他的外层元素上的绑定事件上，然后在外层元素上去执行函数
+## 应用场景
+当一个元素内存在大量子元素，并且子元素执行的事件大部分是相同的，这个时候我门就可以通过事件冒泡将事件委托到父元素上，从而减少重复代码的书写
+
+## 总结
+-  适合事件委托的事件有：click、mousedown、mouseup、keydown、keyup、keypress、
+从上面应用场景中，我们就可以看到使用事件委托存在的两大优点：
+- 减少整个页面所需的内存，提升整体性能
+- 动态绑定，减少重复工作
+使用事件委托的局限性：
+- focus、blur这些事件没有冒泡机制，所以无法进行委托绑定事件
+- mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗比较高，因此也不适合用事件委托
+- 如果把所有事件都用事件代理，可能会出现事件误判，即本不应该被触发的事件被绑定上了事件
+
+# new 操作符
+## 什么是new 操作符
+在javascript中，new操作符是用于创建一个给定构造函数的实例对象
+- 通过new操作符构造出来的实例可以访问构造函数中的属性
+- 通过new操作符构造出来的实例可以访问构造函数原型连中的属性
+## 流程
+new 操作符主要做了一下工作：
+- 创建一个新的对象 object
+- 将对象与构造函数通过原型连链接起来
+- 将构造函数中的this绑定到新构建的对象object上
+- 根据构造函数返回类型作判断，如果是原始值则被忽略，如果事返回对象，需要正常处理
+# 手写一个new 功能
+```js
+function func(funcx,...arg){
+  const obj={}
+  obj.__proto__=funcx.tyototype
+    const s= funcx.apply(obj,arg)
+    return s instamceof Object?s:obj
+}
+```
+
+# AJAX原理，如何实现
+
+## ajax是什么？
+
+- ajax（异步的javascript与XML） 是一种创建交互式网页应用的网页开发技术，可以在不重复加载整个网页的情况下，与服务器进行数据交换，并且更新部分网页
+- ajax的原理简单来说就是 通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作dom更新页面
+## 实现过程
+  实现ajax异步交互需要服务器逻辑进行配合，需要完成以下步骤：
+- 创建Ajax的核心对象XMLHttpRequest对象
+- 通过XMLHttpRequest对象的open()方法与服务端进行连接
+- 构件请求所需的数据内容，并通过XMLHttpRequest对象的send() 方法发送给服务器端
+- 通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端你的通信状态
+- 接受并处理服务端向客户端相应的数据结果
+- 将处理结果更新到HTML页面当中
+# bind、call、apply的区别
+## 作用 
+ bind、call、apply的作用都是改变this指向的
+## 区别
+### apply
+- apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入
+- 改变this后原函数会立即执行，且此方法只是临时改变this指向一次
+```js
+function fn(...args){
+    console.log(this,args);
+}
+let obj = {
+    myname:"张三"
+}
+
+fn.apply(obj,[1,2]); // this会变成传入的obj，传入的参数必须是一个数组；
+fn(1,2) // this指向window
+```
+- 当第一个参数为null、undefined的时候，默认this指向window（浏览器中）
+###  call
+- call方法的第一个参数也是this的指向，后面传入是一个参数列表
+- 跟apply方法一样，改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次
+```js
+function fn(...args){
+    console.log(this,args);
+}
+let obj = {
+    myname:"张三"
+}
+
+fn.call(obj,1,2); // this会变成传入的obj，传入的参数必须是一个数组；
+fn(1,2) // this指向window
+```
+- 同样的，当第一个参数为null或者undefined的时候，this就会指向window
+### bind
+- bind方法和call方法很相似，第一个参数也是this的指向，后面传入的也是一个参数列表（但是这个参数列表可以分多次传入）
+- 改变this指向后不会立即执行，而是返回一个永久改变this指向的函数
+```js
+function fn(...args){
+    console.log(this,args);
+}
+let obj = {
+    myname:"张三"
+}
+
+const bindFn = fn.bind(obj); // this 也会变成传入的obj ，bind不是立即执行需要执行一次
+bindFn(1,2) // this指向obj
+fn(1,2) // this指向window
+```
+###  区别
+从上面可以看到 apply、call、bind三者的区别在于：
+- 相同点： 
+     - 三者都可以改变韩式this的指向
+     - 三者第一个参数都是this要指向的对象，如歌没有这个参数或者参数为null、 undefined，则默认指向全局window
+- 不同点：
+     - 三者都可以穿参，但是apply是数组，而call是参数列表，且apply和call是一次性传入单数，而bind可以分为多次传入
+     - bind是返回绑定this之后的函数，apply、call则是立即执行 
+# 正则表达式
+## 什么是正则表达式？