学习计划

注：

• 早(7:00-11:00)
• 午(13:30-16:00)
• 晚(19:00-23:00)

第一周

知识整理：

• AO/GO预编译解决JS一系列关于作用域或作用链相关所产生的一切问题

• 对象有它的属性

• 函数也有它的属性

• 函数也是一种对象类型，也是一种引用类型，引用值

• 作用域的隐式属性是[[scope]]域

• 作用域：[[scope]]，存储作用域链的容器

• 作用域链：Scope Chain负责存储的是AO(函数执执行期上下文)/GO(全局执行期上下文)

• 每个函数的作用域链里都包含GO(内可访外，外不能)

• 变量是从作用域链里顶端向下查找

• 外层函数执行内层函数被定义

• 内层函数没有执行之前与外层函数执行时的作用域链是相同的

• 当内部函数被返回到外部并保存时，一定会产生闭包，闭包会产生原来的作用链不释放

• 立即执行函数：自动执行，执行完成以后立即销毁

• ()里加上任何东西都为表达式

• 报错：函数声明写法加执行符号

• 正常运行但不执行函数：函数声明写法加执行符号且传入参数

• 逗号运算符返回逗号后面的数据

• 表达式会自动忽略函数名称

• 循环点击案例

• 对象创，执，增，删，改，查

• this代表对象本身

• 构造函数：没执行之前，this不存在

• 构造函数：实例化之后，this执行指向实例对象

• 构造函数：当return引用值的时候可以修改return结果，原始值则不能

• 原始值并没有自己的方法和属性

• 成为实例化对象后的数字对象，且可以设置属性和方法

• 经过包装参与的对象运算后又变为原始值

• undefined和null是不可以设置任何的属性和方法

• 原型prototye是function对象的一个属性，但打印结果也是对象。

• 原型prototype是定义构造函数构造出每个对象的公共祖先，所有被该构造函数构造出的对象都可以继承原型上的属性和方法

• 构造函数自身有的属性不会往祖先身上找

• 实例化出来的对象 对原型prototype的增删改查

• constructor：在prototype里面，指向构造函数本身

• __proto__是实例化以后的结果，是每个实例化对象的原型prototype的容器

• 原型prototype是属于实例化对象而不属于构造函数

• 实例化之前的prototype和实例化的prototype是有区别的

• 实例对象的__proto__指向构造函数的原型，所有的对象都有自己的原型(包括原型本身)

• 原型链：沿着__proto__去找原型里的属性一层一层的继承原型的属性的这条链

• 原型的顶端是Object.prototype(面试问题)

• 原型链上的增删改只能是它自己本身增删改(后代不能)

• Object.create(对象/null)是创建对象用的方法

• Object.create()提供了一个自定义原型的功能，把其他对象作为自己的原型存在

• 不是所有的对象都继承于Object.prototype(面试题)

• undefined和null不能经过包装类，还没有原型

• 包装类都有自己系统内置的toString()方法

• call/apply：改变this的指向

• call(对象, 参数1, 参数2, ...)

• apply(对象, []) //arguments

• 插件开发：函数表达式变量接收立即执行函数的闭包

• 插件开发：利用全局变量保存立即执行函数的闭包

• 枚举：hasOwnProperty()只遍历自定义属性和方法

• 枚举：in判断属性是否存在于对象里，不排除原型

• 枚举：instanceof()判断对象是否是构造函数实例化出来的，实例化对象为false，在原型链上有重合的都为true

• 3种判断数组的方法：contructor，instanceof，Object.prototype.toString

• callee返回的是正在被执行的函数对象

• callee在哪个函数内部指向哪个函数

• caller返回调用所在的函数本身(严格模式报错)

• 浅拷贝：只遍历第一层结构的属性

• 深拷贝：利用递归进行内层结构的属性

• 数组继承数组的原型Array prototype且里面所有的方法都可以继承和使用

• 实际上数组在JavaScript底层机制，就是继承对象而来，数组就是对象的另一种形式

• 数组可以截取，中间元素可以为空，可以写入和更改

• 类数组：具有length属性，数组形式下标对应的值，包括arguments和document标签列表

• 类数组：利用Array.prototype.slice.call(arguments));方法可以转为数组

重难点：

• 闭包：当内部函数被返回到外部并保存时，一定会产生闭包，闭包会产生原来的作用链不释放，过渡的闭包会产生内存泄漏，或加载过慢

• 实例化原理：构造实例化对象相当于普通函数执行

  • 函数执行生成AO, 默认存了this对象
  • 当new的时候，走完构造函数内部的代码
  • 隐式的在构造函数内部底下加入return this;
  • this指向被赋值的变量并存入GO

• 系统内置的构造函数包装方法：

  • new Number()
  • new String()
  • new Boolean()
• 包装类的过程：new String(str).length = 1 => 无法保存 => delete

• 修改原数组：

  • push()最后一位加，返回值都为执行了方法以后数组长度
  • unshift()在第一位前面加，返回值都为执行了方法以后数组长度
  • pop()返回值剪切掉最后一位
  • shift()返回值剪切掉第一位
  • reverse()返回值为翻转数组元素后的数组
  • splice()返回值为修改后的数组，可以删除数组某一项，或多项，可以指定位置增加某一项
  • sort()返回排序以后的数组，按照ASCII码来排序，传入函数参数可以自定义排序条件

• 新建数组上的修改：

  • concat()返回值为整合拼接的新数组
  • toString()返回值为类似数组结构的字符串列表，可以去掉数组的中括号数组元素变为单独的字符串
  • slice()返回修改后的新数组，可以克隆数组，从下标元素(包括)开始截取到最后(参数1)，截取的结束下标数组之前(不包括)(参数2)，负值时下标元素(包括)开始截取到结束下标元素之前(不包括)，还可以将类数组转为数组
  • join()返回值为新的字符串列表，不传参返回跟toString()一样的字符串列表，默认逗号隔开，传参可以指定符号隔开
  • split()返回值为修改后的新数组，不传参可以把字符串转为数组，参数1传入跟分隔字符一样的符号会逗号分隔数组元素，参数1传入空格会分隔所有数组元素包含分隔符号，参数2传入数字会截断下标数组元素之前(不包括)

第二周

知识整理：

• try..catch..：手动抛出错误方法来避免程序遇到错误终止执行
• 垃圾回收原理：找出不再使用的变量，释放其占用内存，固定的时间间隔运行
• Arguments对象：函数内部对应参数值的实参列表，也是一个对象，内置的局部变量，本质是类数组对象。
• 越到ES6，arguments越来越弱化
• 形参实参的对应关系
• Array.prototype.copyWithin()：浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
• Array.prototype.entries()：返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
• Array.prototype.fill()：该方法实际上根据下标范围内的元素覆盖填充新的值
• Array.prototype.find()：返回第一个满足条件的数组元素
• Array.prototype.findIndex()：返回第一个满足条件的数组元素的索引值
• generator和iterator：希望遍历的过程是可以控制的(遍历的过程可停止，也可继续)，手动的控制遍历流程，这种方式就叫做迭代的过程。
• Array.prototype.flat()：数组扁平化多维数组转一维
• Array.prototype.flatMap()：首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
• Array.from()：从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
• Object.is()：判断两个值是否为同一个值
• Array.prototype.includes()：用来判断一个数组是否包含一个指定的值
• Array.prototype.sort()：对数组的元素进行排序，并返回数组

重难点：

• SyntaxError 语法错误

  • 变量名不规范
  • 关键字赋值
  • 基本的语法错误

• ReferenceError引用错误

  • 变量或者函数未被声明
  • 给无法被赋值的对象赋值
  • RangeError范围错误
  • TypeError类型错误
  • URIError URI错误
  • EvalError eval函数执行错误

• 人为抛出的错误

• 类数组Array-like

  • 具有length属性
  • 具有从零开始的属性下标
  • 没有数组的内置方法
  • 非箭头函数的其他函数的内置的局部变量

• 7种数组遍历的方法：

  • forEach() 普通的数组遍历方法 for
  • map() 映射 -> 每一次遍历，返回一个数组元素 -> 返回一个新的数组
  • filter() 过滤 -> 每一次遍历返回布尔值来决定当前元素是否纳入新的数组中
  • reduce() 归纳 -> 每一次遍历将当前元素收归到容器中
  • reduceRight() -> reduce的反向操作
  • every()-> 判定是否所有元素都符合条件
  • some() -> 是否有某一个或多个符合一个条件

• 生成器和迭代器：

  • 生成器是一个函数
  • 迭代器是由生成器函数执行后返回的一个带有next方法的对象
  • 生成器对迭代的控制是由yield关键字来执行的

第三周

重难点：

预编译: 函数执行 -> AO -> 产生this -> this的指向与执行方式有关

1. 默认绑定规则

2. 隐式绑定规则: 对象调用(谁调用指向谁)

   1. 隐式丢失
   2. 参数赋值
3. 显示绑定: call/apply/bind
4. new绑定

优先级问题：

new > 显示 > 隐式 > 默认

第四周

知识整理

• 获取元素对象方法getElement和querySelector及区别

• 节点不是元素，节点包含元素

  • 元素节点(相当于DOM元素)：节点号 1
  • 属性节点：节点号 2
  • 文本节点(text)： 节点号 3
  • 注释节点(comment)： 节点号 8
  • document节点： 节点号 9
  • document fragment节点： 节点号11

• 节点名称nodeName只读

• 节点的值nodeValue可以更改

• 节点属性attributes&getAttributeNode可读写

• 节点创建createElement()

• 节点增加appendChild()

• 指定位置插入节点insertBefore()

  • 还可以剪切节点
  • 追加节点

• 节点删除removeChild()&remove()

• 节点文本innerHTML&innerText

• 节点替换replaceChild()

• 文档碎片createDocumentFragment()

• 获取样式元素currentStyle&getComputedStyle()

• 事件、事件处理函数绑定：

  • onclick
  • addEventListenne('click', fn, false)
  • attachEvent('onclick', fn)

• 事件解除绑定

  • removeEventListener()
  • datachEvent()
  • onclick = null/false

• 事件冒泡：子级元素向父级元素进行事件冒泡现象

• 事件捕获：顶层元素开始捕获，直至事件源结束

• 事件源对象：如鼠标、键盘对象

• 取消冒泡：

  • e.stopPropagation()
  • e.cancelBubble = true

• 取消默认事件：

  • e.preventDefault()
  • e.returnValue = false

• 事件流：从页面中接收事件的顺序 冒泡/捕获、

• 事件代理：事件源对象event.target，用于拿到元素下标

重难点

• 滚动尺寸，页面尺寸