JavaScript基础之知识总结
文章目录
JavaScript基础之知识总结前言一、JavaScript是什么？1.1 `运行在客户端的脚本语言`1.2 不需要编译，由 `js 引擎逐行来进行解释并执行`1.2.1 `渲染引擎(内核)`：用来解析HTML与CSS内核1.2.2 `JS 引擎`: 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行。
1.3 `JavaScript = ECMAScript + BOM + DOM`1.4 `JS执行机制`1.4.1 JS 是单线程因为 Javascript 这门脚本语言本来的功能是处理页面中用户的交互，以及操作 DOM 而诞生的。
1.4.2 同步和异步`同步` 前一个任务结束后再执行后一个任务，`程序的执行顺序与任务的排列顺序`是一致的、同步的。`异步` 若前一个任务结束耗时很长导致进程长时间阻塞，则下一个任务不必等待前一个任务结束就先执行
1.4.3 同步任务和异步任务执行过程同步任务 `都在主线程上执行，形成一个执行栈。`异步任务 `通过回调函数实现的。异步任务相关回调函数添加到任务队列中`执行过程`事件循环 event loop` 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为。
二、功能2.1 `表单动态校验,密码强度检测 `（ JS 产生最初的目的 ）2.2 网页特效2.3 `服务端开发(Node.js)`2.4 `桌面程序(Electron)`2.5 `App(Cordova) `2.6 `控制硬件-物联网(Ruff)`2.7 `游戏开发(cocos2d-js)`
三、ECMAScript53.1 与html的结合方式3.1.1 `行内式`将单行或少量 JS 代码写在HTML标签的以 on 开头的事件属性中缺点：`可读性差`、`引号易错导致非常容易弄混`
3.1.2 `内嵌JS`3.1.3 `外部js(开发首选)`三优点:`可维护性强`、 `只需要下载一次,缓存该文件，多个页面都能用到`、`适应未来，不必考虑XHTML的问题`定义位置与数量 : <script>可以定义`多个`和在html页面的`任何地方`，但是定义的位置会`影响执行顺序`把script放到<head>里，也就意味着必须把所有外部文件下载、解析完成后才开始渲染页面（浏览器解析到body就开始渲染)。这会`导致渲染延迟`，现代Web都是`把script放到body的最后`动态加载脚本需要让加载器知道需要动态请求文件的存在，必须在文档头文件声明优雅降级适应旧版本，使用<noscript>，当浏览器不支持script标签则执行noscript的内容
3.2 注释3.2.1 `单行注释`快捷键 `ctrl + /`书写规范:注释内容前应该有个空格
3.2.2 `多行注释`修改快捷键为`ctrl + shift + /`
3.3 `输入输出语句`3.4 变量3.4.1 实质 `程序在内存中申请的一块用来存放数据的空间`, 变量是用于存放数据的容器.`通过变量名获取数据和修改数据`3.4.2 声明 `var 变量名`计算机会自动为变量分配内存空间默认值是undefined
3.4.3 赋值 `变量名 = 值`3.4.4 初始化 `var 变量名 = 值`初始化 = 声明 + 赋值
3.4.5 语法扩展同时初始化多个变量`var 变量名1 = 值1， 变量名2 = 值2...`不声明不赋值直接使用变量则报错 `Uncaught ReferenceError: ... is not defined`不声明就直接赋值则变量是全局变量 `原理：变量未经var声明就初始化，它就会自动被添加到全局上下文``在严格模式下`，不用关键字声明这样的做法会导致抛出异常
3.4.6 命名规则组成 `数字、字母、下划线和 $`"两不一区分" `不能有保留字和关键字, 不能以数字开头、严格区分大小写 `关键字：JS本身已经使用了的字，不能再用它们充当变量名、方法名保留字:意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名
见名知意 `开发时一定要遵循的,在文档开头用注释补充解释变量名的意思，变量名用空格，函数名用动词`驼峰规则或下划线 `首字母小写，后面单词的首字母需要大写`
3.5 数据类型3.5.1 `JavaScript是一种弱类型、动态语言.` 程序运行过程中，数据类型会被自动确定，意味着相同的变量可修改成不同的类型3.5.2`原始(基本/简单)数据类型`数字型 `Number`数字型进制数字型范围数字型判断方法 `isNaN()`数字型科学计数法 `底数 + e + 次方数`
字符串型 `String`字符串引号嵌套`外双内单或外单内双`字符串转义符 `转义序列只算一个字符`字符串长度 `length`字符串拼接 ` 字符串 + 任何数据类型的数据 + 变量 = 拼接之后的新字符串`原理：将任何数据类型的数据`转型`为字符串型
布尔型 `Boolean`未定义型 `Undefined`如果一个变量没有初始化值，则会被默认赋值为undefined`undefined是从null中派生出来的`
空型 `Null`一个对象为空的占位符`在定义将来要保存对象值的变量时，建议用null初始化`
3.5.3 `引用(复杂)数据类型`通过 new 关键字创建的对象,`在存储时变量中存储的仅仅是地址（引用）`常用的有Object、Array、Date
3.5.4 获取变量数据类型 `typeof 变量名`typeof是操作符不是函数，`不需要对象调用``null返回的是object`,理论上来说null是一个空对象的引用`未声明的变量返回undefined`
3.5.5 数据类型的转换`转换为字符串型``转换为数字型``转换为布尔型`
3.6 运算符3.6.1 `算术运算符`不要直接让判断两个浮点数是否相等作为条件语句 `浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数`
3.6.2 `一元运算符` 只有一个运算数的运算符变量值在语句被求值之前就被改变，这种现象称为副作用
3.6.3 `比较运算符`会进行数据转型当操作数是字符串时，则`逐位比较编码值，当某一位不符合运算符则直接输出结果`当`某个操作数是NaN就返回false`
3.6.4 `逻辑运算符`不会进行数据转型短路运算：`逻辑与若第一个操作数决定了结果，那么永远不会对第二个操作数求值`短路运算：`逻辑或若第一个操作数决定了结果，那么永远不会对第二个操作数求值`
3.6.5 `赋值运算符`3.6.6 `位运算符`3.6.7 `条件（三元）运算符`3.6.8 `逗号运算符`3.6.9 `运算符优先级`运算符左右都应该有空格
3.7 流程控制语句3.7.1 `if-else语句`3.7.2 `switch语句``匹配方式是全等`表达式的值和case的值必须值和类型完全一致`两个不省略`,不要省略break和default；缺break导致程序会一直执行下一个case；缺default导致万一没有匹配到值则退不出程序`接收任何类型数据` 但在其他很多语言中，它只能用于数值`当有相同的执行语句的匹配值，可以组合在一起执行同一个语句`
3.7.3 `for循环语句`for循环的控制变量在循环结束后在内存中消失不能再用
3.7.4 `while循环语句`3.7.5 `do-while循环语句`3.7.6 `continue和break 退出循环语句`书写规范：`括号左右都应该有空格`
3.7.6 `for-in遍历对象属性语句`
3.8 数组3.8.1 `JS数组概述``一集合`一组数据的集合`两优点` 将一组数据存储在单个变量名下的优雅方式、可以存放任意类型的数据
3.8.2 `创建数组`使用`Array构造函数`方式使用`数组字面量`表示法
3.8.3 `访问数组元素`通过索引来访问、设置、修改对应的数组元素
3.8.4 `遍历数组元素`把数组中的每个元素从头到尾都访问一次遍历方法`for 循环``数组.forEach(function(item，index，arr){})`
3.8.5 `检测是否为数组`使用`instanceof`运算符方法使用`isArray()`方法
3.9 函数3.9.1 概念 `封装了一段可被重复调用执行的代码块``函数参数`函数形参和实参个数不匹配的结果传参过程中对象即使也是按值传递，但还是可以通过引用访问对象
`函数的返回值``停退返` 执行 return 语句时函数会停止执行、退出函数并返回指定的值`只能返回一个值` 如果用逗号隔开多个值，只返回最后一个
`函数都是 Function 的实例对象`
3.9.2 函数分类`普通函数``回调函数`回调，就是回头调用的意思。先执行完某个操作，再回头调用这个函数使用场景 `DOM事件、资源加载模块、定时器`
`立即执行函数`独立创建了一个作用域, 里面所有的变量都是局部变量,不会有命名冲突的情况不需要调用，立马能够自己执行的函数
`高阶函数`高阶函数是`对其他函数进行操作`的函数，`它接收函数作为参数或将函数作为返回值输出`
3.9.3 函数使用`声明函数``调用函数`
3.9.4 函数封装 `把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口`3.9.5 arguments`（1）是当前函数的一个内置对象``（2）存储了传递的所有实参``（3）以伪数组形式展示`
3.10 自定义对象3.10.1 `创建对象`3.10.2 `调用对象属性和方法`3.10.3 `遍历属性for-in`3.10.4 `对象方法`添加或修改属性`Object.defineProperty(obj, prop, {descriptor})`获取由对象所有的属性组成的数组`Object.keys(对象名)`
3.11 内置对象内置对象 `指 JS 语言自带的一些对象，提供了一些常用的或是最基本而必要属性和方法,常用有Math、Date、Array、String、Number和 Boolean`基本包装类型 `把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。有String、Number和 Boolean`
3.11.1 `Math`内置属性圆周率 `Math.PI`
内置方法最大值 `Math.Max(参数1，参数2...)`最小值 `Math.min(参数1，参数2...)`向上取整 `Math.ceil(参数)`向下取整 `Math.floor(参数)`四舍五入 `Math.round（参数）`随机数 `Math.random()`绝对值 `Math.abs(参数) `三角函数 `Math.acos/asin/atan/cos/sin/tan(参数) `平方根 `Math.sqrt(参数) `幂 `Math.pow(参数1,参数2) `
3.11.2 `Date``时间对象创建``日期格式化方法`返回对象对应的四位数年 `对象.getFullYear()`返回对象对应的月份-1 `对象.getMonth()`返回对象对应的日 `对象.getDate()`返回对象对应的周几 `对象.getDay()`返回对象对应的时 `对象.getHours()`返回对象对应的分 `对象.getMinutes()`返回对象对应的秒 `对象.getSeconds()`
`获取总毫秒数的方法`
3.11.3 Array尾部添加元素 `数组名.push(元素1，元素2 ...)`头部添加元素 `数组名.unshirt(元素1，元素2 ...)`指定区域增加元素 `数组.splice（start，0，数据1，数据2….）`尾部删除元素 `数组名.pop()`头部删除元素 `数组名.shirt()`指定区域删除元素 ` 数组.splice（start，length）`指定区域修改元素 `数组.splice（start，length，数据1，数据2...）`获取指定区域的元素 `数组名.slice(start，end)`获取指定元素的首个索引 `数组名.indexof(元素 [,start])`获取指定元素的最后一个索引 `数组名.lastIndexof(元素 [,start])`获取满足条件的元素组成的新数组`数组.filter(function(item，index，arr){})`判断是否有满足条件的元素`数组.some(function(item，index，arr){})`元素逆序排列 `数组名.reverse()`元素排序 `数组名.sort([比较函数])`拼接两个数组 ` 数组名1.concat(数组名2，[，元素1，元素2 ...])`用分隔符分隔每个元素 `数组名.join('分隔符')`
3.11.4 `String``包装流程``字符串不可变性` 值不可变，虽然看上去可以改变内容，但其实内存中新开辟了一个内存空间内置方法删除字符串两端的空字符`字符串.trim()`获取长度 `字符串.length() `获取指定索引对应的字符 `字符串.charAt(index) `获取指定索引对应的字符的码值 `字符串.charCodeAt(index)`获取指定字符对应的首个索引`字符串.indexof(str [,start])`获取指定字符对应的最后一个索引`字符串.lastindexof(str [,start])`获取字符串指定的区域部分(主用) `字符串.substr(start,length)`获取字符串指定的区域部分 `字符串.substring(start, end)`获取字符串指定的区域部分 `字符串.slice(start,end)`获取匹配字符串的首个索引`字符串.search（str/pattern）`连接字符串 `字符串.concat(str1，str2...)`替换字符串 `字符串.replace(oldStr/pattern,newStr)`分隔字符串 `字符串.split('分割符'，length)`匹配字符串`字符串.match（正则表达式）`
3.11.5 `Boolean``包装流程`
3.11.6 `Number``包装流程`内置方法引用类型和原始值包装类型的区别（生命周期）
3.11.7 `RegExp`概述`正则表达式是用于匹配字符串中字符组合的模式``正则表达式也是对象`
功能`用来检索、替换那些符合某个模式的文本`还用于`过滤掉页面内容中的一些敏感词`从字符串中获取想要的特定部分。
特点`灵活性、逻辑性和功能性``可以迅速地用极简单的方式达到字符串的复杂控制`实际开发是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达式.
创建表达式组成由`简单字符和特殊字符`组合而成简单字符 `数字和字母`特殊字符 `也称为元字符`
元字符 `(特殊字符)`锚字符 `用来提示字符所处的位置`行首匹配，正则表达式必须在字符串开头 `^ `行尾匹配，正则表达式必须在字符串结尾 `$ `
方括号字符 `[]`方括号内部的范围符 `-`方括号内部 取反符 `^`替换字符 `| `量词符 `用来设定某个模式出现的次数`匹配0个或1个 `表达式?`匹配至少1个 `表达式+`匹配任意个 `表达式*`匹配m个 `表达式{m}`匹配m到n个 `表达式{m,n}`匹配至少m个 `表达式{m,}`
预定义字符 `某些常见模式的简写方式`匹配单个任意字符 `.`匹配单个数字字符，等价于[0-9] ` \d `匹配单个非数字字符，等价于[\^0-9] `\D`匹配单个的数字、字母、下划线字符.相当于[A-Za-z0-9_] `\w`匹配单个的非数字、字母、下划线字符相当于[\^A-Za-z0-9_] `\W`匹配任意单个的空白字符，空格，制表符和换行符等.等价于[\t\r\n\v\f] ` \s `匹配任意单个非空白字符.等价于[\t\r\n\v\f] ` \S `
`标记`忽略大小写 `i`全局匹配 ，查找字符串所有内容 `g`换行匹配 `m`实例属性
方法测试正则表达式 `正则表达式.test(字符串)`匹配符合正则表达式的子字符串 `正则表达式.exec(字符串)`构造函数属性
3.12 内存管理3.12.1 `堆和栈`3.12.2 简单类型的内存分配 `数据直接存放在栈空间中`3.12.3 复杂类型的内存分配 `引用类型指向实例对象的地址指针存放在栈空间中，真正的对象实例存放在堆空间中`3.12.4 简单类型传参 `把变量在栈空间里的原始值复制了一份给形参`3.12.5 复杂类型传参 `把变量在栈空间里保存的堆地址复制给了形参，形参和实参保存的是同一个堆地址，所以操作的是同一个对象（引用值）`
3.13 执行上下文与作用域3.10.1 执行上下文3.10.2 作用域`作用域分类``变量的作用域``作用域链` 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问`标识符查找` 当内部函数引入一个标识符时，必须通过搜索作用域链要确定这个标识符是什么，搜索从作用域链前端（标识符位置）开始，沿着作用域链搜索，直至找到为止上下文中的代码执行的时候会创建变量对象的作用域链，决定了各级上下文中的代码在访问变量和函数的顺序
3.10.3 预解析 `在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。`变量预解析`变量提升``变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。`输出undefined可以验证变量会被提升
函数预解析`函数提升`函数的声明会被提升到当前作用域的最上面
3.14 `this`3.14.1 概述 `this变量储存的是当前函数调用者的地址`3.14.2 各种情况下的this指向全局作用域或者普通函数 `this指向全局对象window`函数调用 `谁调用this就指向谁`构造函数 `this指向构造函数的实例`箭头函数 `this指向函数定义位置的上下文this.注意是上下文的this，对象不产生上下文`
3.14.3 修改this指向`方法名.call(新指向,方法参数1,方法参数2...)``方法名.apply(新指向, [方法参数1,方法参数2...])``方法名.bind(新指向,方法参数1,方法参数2...)`
3.15 严格模式3.15.1 概述在 IE10 以上版本的浏览器中才会被支持`在严格的条件下运行 JS 代码`
3.15.2 功能消除JS不合理、不严谨、不安全之处提高编译器效率，增加运行速度禁用了在 ECMAScript 的未来版本中可能会定义的一些语法
3.15.3 使用`脚本开启严格模式` 在所有语句之前声明严格模式，在该script标签范围内生效`函数开启严格模式` 在所有语句之前声明严格模式，在该函数范围内生效
3.15.4 严格模式相比普通模式的变化`禁止变量没有声明就赋值``严禁删除已经声明变量`全局作用域中函数中的 this 是 undefined函数不能有重名的参数`构造函数必须加上new调用,否则this指向的是undefined,如果给他赋值则会报错`不允许在非函数的代码块内声明函数
3.16 闭包 `closure`3.16.1 概述有权访问另一个函数作用域中变量的`函数``一个作用域可以访问另外一个函数内部的局部变量`功能 `延伸变量的作用范围。`
3.16.2 在 chrome 中调试闭包当`调用内部函数`时,Scope 里面会多一个 Closure 参数 ，这就表明产生了闭包
3.16.3 闭包使用 `通常与立即执行函数和高阶函数配合使用`
3.17 递归3.17.1 概述`函数内部调用其本身``由于递归很容易发生“栈溢出”,所以必须要加退出条件 return。`
3.17.2 浅拷贝 `只是拷贝一层, 更深层次对象级别的只拷贝引用.`浅拷贝数据方法 `Object.assign(newobj, oldobj)`
3.17.3 深拷贝 `拷贝多层, 每一级别的数据都会拷贝.`
四、BOM4.1 概述4.1.1 浏览器对象模型 `Browser Object Model`4.1.2 把浏览器当做一个对象来看待,并把浏览器各个部分封装成对象，提供了`独立于内容而与浏览器窗口进行交互的对象`4.1.3 每个浏览器都内置了 DOM、BOM 这样的 API 函数，因此，浏览器中的 JavaScript 才可以调用它们。
4.2 构成4.2.1 由`Window、Location、Navigator、Screen、History、document组成`
4.3 `Window`4.3.1 概述`Window对象是浏览器的顶层对象`Window代表一个浏览器窗口或一个框架Window会在 body 或 frameset 每次出现时被自动创建`Window是一个全局对象`。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
4.3.24.3.3 `定时器`设置倒计时定时器 `setTimeout(回调函数名 [,延迟毫秒数])`清除倒计时定时器 `clearTimeout(定时器变量名)`设置周期时间定时器 `setInterval(回调函数名 [,间隔毫秒数])`清除周期时间定时器 `clearInterval(定时器变量名)`
4.3.4 `属性`特殊变量`window.name` 变量名就不能取name获取页面被卷去的高`window.pageYOffset 、window.pageXOffset`
4.4 location4.4.1 概述 `获取或设置窗体的 URL，并且可以用于解析 URL`4.4.2 `URL``统一资源定位符 (Uniform Resource Locator)` 是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。完整url组成 `protocol://host[:port]/path/[?query]#fragment`
4.4.3 `属性`设置或获取当前完整的url ` location.href `返回当前url的协议 `location.protocol`返回当前url的主机名和端口 `location.host`返回当前url的主机名 `location.hostname`返回当前URL服务器使用的端口号 ` location.port`返回当前URL路径 `location.pathname`返回当前URL的参数 `location.search`返回当前URL的锚 `location.hash`
4.4.4 `方法`重新加载(刷新)当前文档 ` location.reload()`不经过浏览器缓存直接从服务器获取数据重新加载当前文档 `location.reload(true)`在当前页面跳转到指定url `location.assign('url')`加载新的文档替换当前的文档`location.replace('url')`
4.5 `navigator`4.5.1 概述navigator 包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，`该属性可以返回由客户机发送服务器的 user-agent 头部的值。`
4.5.2 使用
4.6 history4.6.1 概述`与浏览器历史记录进行交互` 该对象包含用户在浏览器当前窗口中访问过的 URL。
4.6.2 `属性`获取当前窗口历史记录的条数 `history.length`
4.6.3 `方法`页面跳转到上一条历史记录 `history.back()`页面跳转到下一条历史记录 `history.forward() `页面前进后退到指定条数历史记录 `history.go(number)`
五、DOM5.1 `API`5.1.1 `Application Programming Interface,应用程序编程接口`5.1.2 `是一些预先定义的函数`. 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。5.1.3 `Web API ` 是浏览器提供的一套操作浏览器功能`(BOM)`和页面元素`(DOM)`的 API
5.2 `DOM概述`5.2.1 `Document Object Model` 文档对象类型5.2.2 `DOM树``由各种类型的节点构成的层级结构``document节点是每个文档的根节点``文档元素是文档最外层元素` <html>是每个html文档唯一的文档元素
5.3 `DOM组成`5.3.1 `将标记语言文档的各个组成部分，封装成对象。` 可以使用这些对象，将标记语言文档进行CURD的动态操作。控制html文档的内容5.3.2 主要由`Node、Document、Element、Attribute、Text、Comment`
5.4 节点类型 `Node`5.4.1 节点 `网页中的所有内容都是节点（标签、属性、文本、注释等），所有对象都需要继承Node类型`5.4.2 节点分类节点至少拥有`节点类型`、`节点名称`、`节点值`这三个属性
5.4.3 `插入节点`sonNode插入到parentNode的子节点的末尾 `parentNode.appendChild(sonNode)`sonNode插入到parentNode指定子元素broNode的前面`parentNode.insertBefore(sonNode,broNode) `
5.4.4 `复制节点`复制节点本身`node.cloneNode([false])`复制节点本身及其子节点`node.cloneNode(true)`
5.4.5 删除节点`parentNode.removeChild(sonNode)`5.4.6 替换节点`parentNode.replaceChild(newChild, oldChild)`5.4.7 获取父节点 `node.parentNode `5.4.8 `针对获取所有子节点的属性`获取首代指定下标的子节点 `node.childNodes[index]`获取首代第一个子节点`node.firstChild `获取首代最后一个子节点`node.lastChild `
5.4.9 `针对获取所有子元素节点的属性`获取首代指定下标的子元素节点`node.children[index]`获取首代第一个子元素节点`node.firstElementChild`获取首代最后一个子元素节点` node.lastElementChild`
5.4.10 `针对获取所有兄弟节点的属性`获取上一个兄弟节点 `node.previousSibling`获取下一个兄弟节点 `node.nextSibling`
5.4.11 `针对获取所有兄弟元素节点的属性`获取上一个兄弟元素节点 `node.previousElementSibling `获取下一个兄弟元素节点 `node.nextElementSibling`
5.5 文档类型 `Document`5.5.1 `文档对象document是全局对象`，是HTMLDocument(继承Document)的实例5.5.2 `创建节点`创建元素节点 `document.createElement('标签名')`
5.5.3 `获取常用的元素节点`通过documentElement属性获取<html>元素节点 `document.documentElement `通过body属性获取<body>元素节点 `doucumnet.body `
5.5.4 `获取指定元素节点方法`通过id值获取元素节点 `document.getElementById('id值')`通过标签名获取元素节点 `document.getElementsByTagName('标签名')`通过class值获取元素节点 `document.getElementsByClassName('class属性值')`通过name值获取元素节点`document.getElementsByName('name属性值')`通过指定选择器获取元素节点 `document.querySelector('选择器')`通过指定选择器获取所有元素节点 `document.querySelectorAll('选择器')`
5.6 元素类型 `Element`5.6.1 `获取修改删除元素节点属性`删除H5自定义的属性`element.removeAttribute('属性名')`修改内置和H5自定义的属性值 `element.setAttribute('属性名','属性值')`获取修改内置属性的属性值 `element.属性`获取内置和H5自定义属性的属性值`element.getAttribute('属性')`获取H5自定义属性(以'data-'开头)的属性值` element.dataset.属性、 element.dataset['属性'] `
5.6.2 `获取修改元素节点内容`通过innerHTML属性修改或获取标签内容`element.innerHTML`通过innerText属性修改或获取标签内容`element.innerText`通过outerHTML属性修改或获取标签内容`element.outerHTML`
5.6.3 `获取修改元素节点样式`通过class属性值修改元素节点样式 `element.className`通过style属性修改元素节点样式 `element.style.样式`获取元素相对带有定位父元素上方的偏移`element.offsetTop`获取元素相对带有定位父元素左侧的偏移`element.offsetLeft`获取元素可见宽度`element.offsetWidth`获取元素可见高度`element.offsetHeight`获取元素带有定位的父元素`element.offsetParent`获取上边框大小`element.clientTop`获取左边框大小`element.clientLeft`获取元素不包含边框的可见宽度`element.clientWidth`获取元素不包含边框的可见高度`element.clientHeight`获取被卷去的高`element.scrollTop`获取被卷去的宽`element.scrollLeft`获取元素实际的宽`element.scrollWidth`获取元素实际的高`element.scrollHeight`
六、事件6.1 事件概述 ` 事件是某些组件被执行了某些操作后，触发某些代码的执行。`6.2 事件三要素 `事件源(触发对象)、事件类型 、事件处理程序(执行函数)`6.3 模式6.3.1 内联模式 `在标签内使用onclick = 函数`6.3.2 外联模式 `element.on+事件类型 = function() {} `
6.4 执行事件的步骤6.4.1 `获取事件源`6.4.2 `注册事件`传统方式注册事件`element.on+事件类型 = function() {} `解绑事件`element.on+事件类型 = null`
事件监听器方式(IE8以上，首选)添加监听器 `element.addEventlistener('事件类型',function() {} ,true(事件捕获)/ false(事件冒泡,默认))`注销监听器 `element.removeEventListener('事件类型',函数名)`
6.4.3 `编写事件处理程序`
6.5 `DOM事件流`6.5.1 事件流描述的是从页面中接收事件的顺序6.5.2 DOM事件流`由事件捕获、到达目标、事件冒泡三个阶段组成`6.5.3 `事件捕获`由网景最早提出由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素(触发元素)接收，判断外部元素是否因为绑定了事件而触发主要目标是为了`给拦截事件提供可能`
6.5.4 `事件冒泡`IE 最早提出开始时由最具体的元素(触发元素)接收，然后逐级向上传播到到 DOM 最顶层节点。`所有浏览器都支持事件冒泡`，IE5.5之前只冒泡到document，之后都冒泡到window对象
6.6 事件类型6.5.1 `鼠标事件`单击事件 `onclick`双击事件 `ondblclick`鼠标移入 `onmouseover `鼠标移出 `onmouseout `鼠标移入 `onmouseenter `鼠标移出 `onmouseleave`鼠标按键被按下 `onmousedown `鼠标按键被松开 `onmouseup `鼠标被移动 `onmousemove `禁止鼠标右键菜单`oncontextmenu`禁止鼠标选中`onselectstart`
6.5.2 `键盘事件`键盘按键被按下 `window.onkeydown`键盘字符键按键被按下` window.onkeypress`键盘按键被松开 `window.onkeyup`执行顺序 `keydown -- keypress -- keyup`
6.5.3 `window事件`窗口加载完毕 `window.onload`窗口加载完毕 `window.onDOMContentLoaded`窗口大小变化 `window.onresize`页面加载即触发 `window. pageshow`页面滚动 `window.onscroll`
6.5.5 `移动端触屏事件`触摸到DOM元素`ontouchstart `在DOM元素上滑动 `ontouchmove`从DOM元素上移开 `ontouchend`
6.7 `事件对象`6.7.1 概述事件对象 `用event表示`、`包含跟事件相关的一系列信息数据、属性和方法``代表事件的状态`。比如键盘按键的状态、鼠标的位置、鼠标按钮的状态...
6.7.2 事件对象使用`在处理函数的参数中添加e`事件对象的兼容性方案 `var e = e || window.event`
6.7.3 `事件对象属性`获取事件触发的元素 `var target = e.target || e.srcElement`获取事件类型 `e.type`阻止默认行为 `e.returnValue = false`阻止事件冒泡 `e.cancelBubble = true`获取相对于可视化页面鼠标的坐标 `e.clientX、e.clientY`获取相对于完整页面的鼠标的坐标 `e.pageX、e.pagrY`获取相对于电脑屏幕的鼠标的坐标` e.screenX、e.screenY`获取按键的ASCII值 `e.keyCode`判断页面是否来自缓存 `e.persisted`正在触摸屏幕的所有手指的一个列表`e.touches`正在触摸当前DOM元素的手指的一个列表`e.targetTouches`手指状态发生变化的手指列表`e.changedTouches`
6.7.4 `事件对象方法`阻止默认行为 `e.preventDefault()`阻止事件冒泡 `e.stopPropagation()`
6.8 `事件委托`6.8.1 原理 `不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。`6.8.2 作用 `只操作了一次 DOM ，提高了程序的性能`6.8.3 使用`给父元素注册监听器``配合e.target使用可以灵活操作子节点`
总结
前言
本人自学Javascript所做的笔记，不足之处请多指正
一、JavaScript是什么？
1.1 运行在客户端的脚本语言
1.2 不需要编译，由 js 引擎逐行来进行解释并执行
1.2.1 渲染引擎(内核)：用来解析HTML与CSS内核
1.2.2 JS 引擎: 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行。
1.3 JavaScript = ECMAScript + BOM + DOM
1.4 JS执行机制
1.4.1 JS 是单线程
因为 Javascript 这门脚本语言本来的功能是处理页面中用户的交互，以及操作 DOM 而诞生的。
1.4.2 同步和异步
同步 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步 若前一个任务结束耗时很长导致进程长时间阻塞，则下一个任务不必等待前一个任务结束就先执行
1.4.3 同步任务和异步任务执行过程
同步任务 都在主线程上执行，形成一个执行栈。
异步任务 通过回调函数实现的。异步任务相关回调函数添加到任务队列中
异步任务类型备注
DOM事件如 click、resize 等资源加载(网络模块)如 load、error、ajax定时器setInterval、setTimeout
执行过程
事件循环 event loop 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为。
二、功能
2.1 表单动态校验,密码强度检测（ JS 产生最初的目的 ）
2.2 网页特效
2.3 服务端开发(Node.js)
2.4 桌面程序(Electron)
2.5 App(Cordova)
2.6 控制硬件-物联网(Ruff)
2.7 游戏开发(cocos2d-js)
三、ECMAScript5
3.1 与html的结合方式
3.1.1 行内式
将单行或少量 JS 代码写在HTML标签的以 on 开头的事件属性中
缺点：可读性差、引号易错导致非常容易弄混
3.1.2 内嵌JS
<script
>
...
<script
>
3.1.3 外部js(开发首选)
<script src
="...">
属性备注
async异步加载立即开始下载脚本，但不能阻止其他页面动作执行顺序不清楚，但一定在onload事件之前执行defer延迟到文档完全被解析和显示之后再执行直到解析</html>完成后才开始执行src可以是同域文件，也可以是不同域文件如果使用src同时添加代码到标签内，浏览器会忽略行内代码浏览器解析这个外部资源会发送一个GET请求，这个初始请求不受浏览器同源策略限制，但返回和执行的JavaScript会受限
三优点:可维护性强、 只需要下载一次,缓存该文件，多个页面都能用到、适应未来，不必考虑XHTML的问题
定义位置与数量 : <script>可以定义多个和在html页面的任何地方，但是定义的位置会影响执行顺序
把script放到<head>里，也就意味着必须把所有外部文件下载、解析完成后才开始渲染页面（浏览器解析到body就开始渲染)。这会导致渲染延迟，现代Web都是把script放到body的最后
动态加载脚本需要让加载器知道需要动态请求文件的存在，必须在文档头文件声明
//头文件声明
<link rel="preload" href="...js">
优雅降级适应旧版本，使用<noscript>，当浏览器不支持script标签则执行noscript的内容
<noscript>
<p>This page required a JavaScript-enabled browser.
</p>
</noscript>
3.2 注释
3.2.1 单行注释
快捷键 ctrl + /
书写规范:注释内容前应该有个空格
3.2.2 多行注释
修改快捷键为ctrl + shift + /
3.3 输入输出语句
方法说明用途
alert(‘msg’)浏览器弹出警示框显示消息给用户document.write(‘msg’)写入的信息在HTML页面输出出于测试目的prompt(info)浏览器弹出输入框给用户输入信息,并返回输入内容console.log(‘msg’)写入的信息在浏览器控制台输出给程序员自己看运行时的消息
3.4 变量
3.4.1 实质 程序在内存中申请的一块用来存放数据的空间, 变量是用于存放数据的容器.通过变量名获取数据和修改数据
3.4.2 声明 var 变量名
计算机会自动为变量分配内存空间
默认值是undefined
3.4.3 赋值 变量名 = 值
3.4.4 初始化 var 变量名 = 值
初始化 = 声明 + 赋值
3.4.5 语法扩展
同时初始化多个变量var 变量名1 = 值1， 变量名2 = 值2...
不声明不赋值直接使用变量则报错 Uncaught ReferenceError: ... is not defined
不声明就直接赋值则变量是全局变量 原理：变量未经var声明就初始化，它就会自动被添加到全局上下文
在严格模式下，不用关键字声明这样的做法会导致抛出异常
3.4.6 命名规则
组成 数字、字母、下划线和 $
“两不一区分” 不能有保留字和关键字, 不能以数字开头、严格区分大小写
关键字：JS本身已经使用了的字，不能再用它们充当变量名、方法名
保留字:意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名
见名知意 开发时一定要遵循的,在文档开头用注释补充解释变量名的意思，变量名用空格，函数名用动词
驼峰规则或下划线 首字母小写，后面单词的首字母需要大写
3.5 数据类型
3.5.1 JavaScript是一种弱类型、动态语言. 程序运行过程中，数据类型会被自动确定，意味着相同的变量可修改成不同的类型
3.5.2原始(基本/简单)数据类型
数字型 Number
数字型进制
进制用法例
八进制用0开头072十六进制用0x开头0x1ff
数字型范围
值备注
Number.MAX_VALUE最大值，这个值为1.7976931348623157e+308Number.MIN_VALUE最小值，这个值为：5e-32Infinity无穷大-Infinity无穷小NaNNot a number代表一个非数值,但它是一个数字型
数字型判断方法 isNaN()
数字型科学计数法 底数 + e + 次方数
字符串型 String
字符串引号嵌套外双内单或外单内双
字符串转义符 转义序列只算一个字符
字符串长度 length
字符串拼接 字符串 + 任何数据类型的数据 + 变量 = 拼接之后的新字符串
原理：将任何数据类型的数据转型为字符串型
数据类型转型的值
undefinedundefined，转数字是NaNnullnull，转数字是0
修改某个字符串必须先销毁原始的字符串，然后将包含新值得另一个字符串保存到该变量
布尔型 Boolean
值备注
true真，值为 1false假，值为 0
未定义型 Undefined
如果一个变量没有初始化值，则会被默认赋值为undefined
undefined是从null中派生出来的
空型 Null
一个对象为空的占位符
在定义将来要保存对象值的变量时，建议用null初始化
3.5.3 引用(复杂)数据类型
通过 new 关键字创建的对象,在存储时变量中存储的仅仅是地址（引用）
常用的有Object、Array、Date
3.5.4 获取变量数据类型 typeof 变量名
typeof是操作符不是函数，不需要对象调用
null返回的是object,理论上来说null是一个空对象的引用
未声明的变量返回undefined
3.5.5 数据类型的转换
转换为字符串型
数据类型字符串值
Number“数字”Boolean“true” 或 “false”Undefined“undefined”Null“null”
转换方法备注使用
toString()对数值、布尔值、对象和字符串值有效变量.toString()String()对数值、布尔值、对象、字符串值、null和undefined有效String（变量）字符串拼接隐性转换，后台使用了上述两种方法隐性转型字符串 + 任何数据类型的数据 + 变量
转换为数字型
数据类型数字值
Booleantrue = 1 false = 0Nullnull = 0Undefinedundefined = NaNString纯数字转为纯数字，其他进制数转换为十进制数 数字开头的混合字符串转为开头的数字部分空字符串转换为0其他情况为NaN
转换方法备注使用场景
parseInt(string [，进制数])按进制数解析将string转换整数数值型只对string有效parseFloat(string)将string转换为浮点数数字型只对string有效Number(变量)将其他数据类型转为数字型对所有数据类型都有效算数运算隐性转换后台使用了上述的三个方法转换对所有数据类型都有效
对象：调用valueOf方法返回自己本身，如果返回NaN，则调用toString方法，再按照上述规则转换
转换为布尔型
数据类型布尔值
Number其他 = true 0 和 NaN = falseNullnull = falseUndefinedundefined = falseString空字符串为false其他为true
转换方法备注使用场景
Boolean(变量)将其他数据类型转为布尔型所有类型
Symbol： 是 ES6 引入了一种新的原始数据类型，表示独一无二的值
3.6 运算符
3.6.1 算术运算符
运算符备注特殊情况
+加法运算符infinity + -infinity返回 NaN-减法运算符infinity - infinity返回 NaN*乘法运算符infinity * 0返回NaN/除法运算符infinity / infinity返回 NaN%取模操作符（取余数）如果两个操作数中含有无限值或0且被除数的绝对值比除数绝对值小，则返回被除数，否则返回NaN
不要直接让判断两个浮点数是否相等作为条件语句 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
3.6.2 一元运算符 只有一个运算数的运算符
变量值在语句被求值之前就被改变，这种现象称为副作用
运算符备注
++递增自加1，只能与变量使用- -递增自减1，只能与变量使用
前置与后置备注
变量++++后置，先取变量的值作为变量++的值，再进行+1的操作++变量++前置，先进行+1操作，再取变量的值作为++变量的值变量- -- -后置，先取变量的值作为变量–的值，在进行-1的操作- -变量- -前置，先进行-1操作，再取变量的值作为- -变量的值
3.6.3 比较运算符
会进行数据转型
当操作数是字符串时，则逐位比较编码值，当某一位不符合运算符则直接输出结果
当某个操作数是NaN就返回false
运算符备注
<小于>大于<=小于或等于>=大于或等于==等于，会隐性数据转型!=不等于===全等，值和不转型的数据类型都必须一致!==不全等
3.6.4 逻辑运算符
不会进行数据转型
运算符备注
&&逻辑与，短路特性,双true才true，有false则false||逻辑或，短路特性，双false才false，有true则true!逻辑非，操作数转换为布尔值并取反
短路运算：逻辑与若第一个操作数决定了结果，那么永远不会对第二个操作数求值
逻辑与第一个操作数第二个操作数返回值
对象（空对象为true奇怪?）任意第二个操作数非布尔数转型后为真（实际不转型）任意第二个操作数非布尔数转型后为假（实际不转型）任意第一个操作数
短路运算：逻辑或若第一个操作数决定了结果，那么永远不会对第二个操作数求值
逻辑与第一个操作数第二个操作数返回值
对象（空对象为true奇怪?）任意第一个操作数非布尔数转型后为真（实际不转型）任意第一个操作数非布尔数转型后为假（实际不转型）任意第二个操作数
3.6.5 赋值运算符
3.6.6 位运算符
运算符备注
~按位取反，最终结果就是该数值取反并减一&按位进行与运算|按位进行或运算^按位进行异或运算<<有符号位左移，除符号位的所有位向左移动n位>>有符号位右移，除符号位的所有位向右移动n位>>>无符号位右移，所有位向右移动n位负数以补码的形式存在，所以无符号右移可能和原来的数有很大的出入
console.log(~5); //-6
console.log(10 & 8); //8
console.log(10 | 8); //10
console.log(10 ^ 8); //2
console.log(2 << 5); //64
console.log(64 >> 5); //2
console.log(-64 >>> 5); //134217726
3.6.7 条件（三元）运算符
运算符备注
表达式1 ？ 表达式2 ： 表达式3表达式1为true则返回表达式2表达式1为false则返回表达式3
3.6.8 逗号运算符
运算符备注
，可以用来在一条语句中执行多个操作
let num1 = 1，num2 = 2，num3 = 3；
3.6.9 运算符优先级
运算符左右都应该有空格
3.7 流程控制语句
3.7.1 if-else语句
if (条件表达式
) {
}else if(条件表达式
2) {
}...
...
}else {
}
3.7.2 switch语句
switch( 表达式
){
case value1
:
break;
case value2
:
case value3
:
break;
default:
}
匹配方式是全等表达式的值和case的值必须值和类型完全一致
两个不省略,不要省略break和default；缺break导致程序会一直执行下一个case；缺default导致万一没有匹配到值则退不出程序
接收任何类型数据 但在其他很多语言中，它只能用于数值
当有相同的执行语句的匹配值，可以组合在一起执行同一个语句
语句使用场景
switch1、匹配确定值2、判断后直接执行程序的条件语句3、当分支比较多，执行效率比较高、结构更清晰if-else2、匹配范围2、有几种条件就判断多少次3、分支比较少、执行效率高
3.7.3 for循环语句
for循环的控制变量在循环结束后在内存中消失不能再用
for(初始化控制变量
; 判断条件表达式
; 操作控制变量表达式
) {
...
}
3.7.4 while循环语句
while（条件表达式）
{
...
}
3.7.5 do-while循环语句
do {
} while (条件表达式
)
循环类型判断执行情况
for先判断再执行while先判断再执行do-while至少先执行一次。以后就先判断再执行
3.7.6 continue和break 退出循环语句
中断类型备注
continue终止当次循环，从循环数+1开始继续循环break退出整个循环，强制执行循环后下一条语句
书写规范：括号左右都应该有空格
break + 标签：终止标签修饰的循环，包括其内循环 continue + 标签： 终止当次循环，回到标签修饰的循环继续循环
let num
= 0;
for(let i
= 0;i
<10;i
++){
for(let j
= 0;j
<10;j
++){
for(let k
= 0;k
<10;k
++){
if(j
==5 && k
==5){
continue;
}
num
++;
}
}
}
alert(num
);
let num2
= 0;
outermost
:
for(let i
=0;i
<10 ; i
++){
for(let j
= 0;j
<10;j
++){
if(i
==5 && j
==5){
break outermost
;
}
num2
++;
}
}
alert(num2
);
let num3
= 0;
outermost
:
for(let i
=0;i
<10 ; i
++){
for(let j
= 0;j
<10;j
++){
if(i
==5 && j
==5){
continue outermost
;
}
num3
++;
}
}
alert(num3
);
3.7.6 for-in遍历对象属性语句
for ( const 变量
in 对象名字
) {
执行下列代码
...
}
for...in语句以任意顺序迭代对象的可枚举属性。
不能保证返回的对象属性的顺序
（7）for of
for...of 语句遍历可迭代对象定义要迭代的数据。
会按照可迭代对象的next（）方法产生值的顺序迭代元素
可迭代对象：（包括Array，Map，Set，String，TypedArray，arguments 对象等
语法：
for(const key of 可迭代对象){
执行语句；
}
（8）标签语句
给语句添加标签
语法：
label：statement
例：
start：
for（
let i
= 0; i
<count
; i
++）
{
console
.log(i
);
（10）with语句
将代码作用域设置为特定的对象
意味着这个语句内部，每个变量首先会被认为是一个局部变量，如果没有找到该局部变量，则默认是对象的属性
开发基本不会用到
with（location）
{
let qs
= search
.substring(1);
let hostName
= hostname
;
let url
= href
;
}
3.8 数组
3.8.1 JS数组概述
一集合一组数据的集合
两优点 将一组数据存储在单个变量名下的优雅方式、可以存放任意类型的数据
3.8.2 创建数组
使用Array构造函数方式
var 数组名
= new Array() ;
var 数组名
= new Array(元素
1，元素
2...);
var 数组名
= new Array(长度
);
var 数组名
= new Array(new Array(), new Array()...) ;
var 数组名
= new Array(new Array(元素
1，元素
2...)，
new Array（元素
1，元素
2...)...)
var 数组名
= new Array(new Array(长度
), new Array(长度
)...)
使用数组字面量表示法
var 数组名
= [] ;
var 数组名
= [元素
1，元素
2...];
var 数组名
= [长度
];
var 数组名
= [[],[]...] ;
var 数组名
= [[元素
1，元素
2...],[元素
1，元素
2...]...]
var 数组名
= [[长度
],[长度
]...] ;
3.8.3 访问数组元素
通过索引来访问、设置、修改对应的数组元素
数组名
[索引值
]
3.8.4 遍历数组元素
把数组中的每个元素从头到尾都访问一次
遍历方法
for 循环
for (var index
= 0; index
< array
.length
; index
++) {
...
}
数组.forEach(function(item，index，arr){})
数组
.forEach(function(item
, index
, array
) {
...
})
参数备注
item数组当前项的值index数组当前项的索引array数组对象本身
3.8.5 检测是否为数组
使用instanceof运算符方法
变量名
instanceof Array;
使用isArray()方法
Array
.isArray(变量
);
3.9 函数
3.9.1 概念 封装了一段可被重复调用执行的代码块
函数参数
参数类型备注
形参形式上的参数实参实际传入的参数传参用实参给形参赋值，不是传引用
函数形参和实参个数不匹配的结果
传参过程中对象即使也是按值传递，但还是可以通过引用访问对象
function setName(obj
){
obj
.name
= "chx";
obj
= new Object();
obj
.name
= "fjj";
}
let person
= new Object();
setName(person
);
console
.log(person
.name
);
函数的返回值
停退返 执行 return 语句时函数会停止执行、退出函数并返回指定的值
只能返回一个值 如果用逗号隔开多个值，只返回最后一个
return 需要返回的值
;
return;
函数都是 Function 的实例对象
3.9.2 函数分类
普通函数
回调函数
回调，就是回头调用的意思。先执行完某个操作，再回头调用这个函数
使用场景 DOM事件、资源加载模块、定时器
立即执行函数
独立创建了一个作用域, 里面所有的变量都是局部变量,不会有命名冲突的情况
不需要调用，立马能够自己执行的函数
(function (参数
1,参数
2...){})(实参
1,实参
2...)
(function(参数
1,参数
2...){}(实参
1,实参
2...))
高阶函数
高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出
<script
>
function fn(callback
){
callback
&&callback();
}
fn(function(){...)}
</script
>
<script
>
function fn(){
return function() {...}
}
fn();
</script
>
3.9.3 函数使用
声明函数
function 函数名(形参
1，形参
2...){
return 需要返回的值
;
}
var 函数名 = function() {
return 需要返回的值
;
}
var 函数名
= new Function('参数1','参数2'..., '函数体')
调用函数
函数名(实参
1，实参
2...);
3.9.4 函数封装 把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
3.9.5 arguments
（1）是当前函数的一个内置对象
（2）存储了传递的所有实参
（3）以伪数组形式展示
伪数组特点备注
具有 length 属性arguments.length按索引方式储存数据arguments[index]不具有数组的 push , pop 等方法毕竟不是真正意义上的数组
（7）注意
方法定义时，形参的类型不需要写，写了没意义（全都是var类型）
方法是一个对象，如果定义名称相同的方法，会覆盖
在JS中，方法的调用只与方法的名称有关，和参数列表无关
3.10 自定义对象
3.10.1 创建对象
var 对象名
= {
属性名
: 属性值
,
方法名
: function（
...）
{
...;
}
...
}
var 对象名
= new Object();
对象名
.属性名
= 值
;
对象名
.方法名 = function（
...）
{
...;
}
function 构造函数名(属性
1,属性
2...) {
this.属性
= 值
;
this.方法 = function() {}
}
var 对象名
= new 构造函数名(实参
1,实参
2...);
3.10.2 调用对象属性和方法
对象名
.属性名
;
对象名
['属性名'];
对象名
.方法名();
3.10.3 遍历属性for-in
for ( const 变量
in 对象名字
) {
执行下列代码
...
}
3.10.4 对象方法
添加或修改属性Object.defineProperty(obj, prop, {descriptor})
descriptor备注
value设置属性的值writable值是否可以重写。true | falseenumerable目标属性是否可以被枚举。true | falseconfigurable目标属性是否可以被删除或是否可以再次修改特性 true | false
Object
.defineProperty(obj
, prop
, {
value
:...;
writable
: true | false;
...
})
获取由对象所有的属性组成的数组Object.keys(对象名)
删除属性
语法：delete 对象.属性
判断方法：对象实例 instanceof 对象
3.11 内置对象
内置对象 指 JS 语言自带的一些对象，提供了一些常用的或是最基本而必要属性和方法,常用有Math、Date、Array、String、Number和 Boolean
基本包装类型 把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。有String、Number和 Boolean
3.11.1 Math
内置属性
圆周率 Math.PI
内置方法
最大值 Math.Max(参数1，参数2...)
最小值 Math.min(参数1，参数2...)
向上取整 Math.ceil(参数)
向下取整 Math.floor(参数)
四舍五入 Math.round（参数）
随机数 Math.random()
绝对值 Math.abs(参数)
三角函数 Math.acos/asin/atan/cos/sin/tan(参数)
平方根 Math.sqrt(参数)
幂 Math.pow(参数1,参数2)
方法或属性备注
Math.PI圆周率Math.Max()返回参数中的最大值Math.min()返回参数中的最小值Math.ceil()将参数向大的数取，向上取整Math.floor()将参数向大的数取，向下取整Math.round()把参数四舍五入为最接近的整数并返回Math.random()静态方法，返回 [0,1) 的随机浮点数Math.abs()返回参数的绝对值Math.acos/asin/atan/cos/sin/tan()反三角函数/三角函数,单位是弧度、 1弧度 = Math.PI/180Math.sqrt()返回参数开平方的数Math.pow(参数1,参数2)返回参数1的参数2次幂
3.11.2 Date
时间对象创建
var date
= new Date();
var date
= new Date('year-month-day hour:minute:second');
var date
= new Date('month/day/year hour:minute:second');
var date
= new Date('year/month/day hour:minute:second');
var date
= new Date(year
, month
, day
, hour
, minute
, second
, microsecond
);
var date
= new Date(microsecond
);
日期格式化方法
返回对象对应的四位数年 对象.getFullYear()
返回对象对应的月份-1 对象.getMonth()
返回对象对应的日 对象.getDate()
返回对象对应的周几 对象.getDay()
返回对象对应的时 对象.getHours()
返回对象对应的分 对象.getMinutes()
返回对象对应的秒 对象.getSeconds()
获取总毫秒数的方法
var totalMicroSecond
= 对象
.valueOf();
var totalMicroSecond
= 对象
.getTime();
var totalMicroSecond
= +对象
;
var totalMicroSecond
= Date
.now();
Date.parse(String)
将表示日期的字符串转换为毫秒数
创建日期的时候其实不需要写入这个函数，因为Date在后台调用了Date.parse()
返回的是GMT时间
Date.UTC（year，month【，day，hour，minute，second，microsecond】）
将表示日期的字符串转换为毫秒数
月份是从0开始的
如果不提供日，那么默认为1日，其他参数默认值都是0
创建日期的时候其实不需要写入这个函数，因为Date在后台调用了Date.UTC()
返回的是本地时间，不是GMT时间
let start
= Date
.now();
var num
= 5;
setTimeout(function(){
alert(num
);
let end
= Date
.now();
alert(end
-start
);
},5000);
date.toString() 通常返回带时区的信息的日期和时间，24小时制。
date.toLocaleString（） 与浏览器运行的本地环境一致的时间和日期，通常包含AM（上午），PM（下午）。但不包含时区信息
date.valueof() 返回该对象的毫秒数
前两个方法只对用于调试，在许多浏览器的返回格式可能不一样
var date4
= new Date(1999,7,22,17,55,55);
alert(date4
.toString());
alert(date4
.toLocaleString());
alert(date4
.valueOf());
date.toDateString（）： 返回当前date对象对应的时间的星期几、月、日和年
date.toTimeString（）： 返回当前date对象对应的时间的时、分、秒和时区
这两个方法的时间组合起来就是toString（）的时间
date.toLocaleDateString（）：以特定地区格式返回当前date对象对应的时间的星期几、月、日和年
date.toLocaleTimeString（）：以特定地区格式返回当前date对象对应的时间的时、分、秒和时区
这两个方法的时间组合起来就是toLocaleString（）的时间
date.toUTCString() 显示完整的UTC日期。UTC是世界协调时间，UTC + 时区差 ＝ 本地时间，中国是东八区，UTC + 8 = 本地时间
var date4
= new Date(1999,7,22,17,55,55);
console
.log(date4
.toDateString());
console
.log(date4
.toTimeString());
console
.log(date4
.toLocaleDateString());
console
.log(date4
.toLocaleTimeString());
console
.log(date4
.toUTCString());
3.11.3 Array
尾部添加元素 数组名.push(元素1，元素2 ...)
头部添加元素 数组名.unshirt(元素1，元素2 ...)
指定区域增加元素 数组.splice（start，0，数据1，数据2….）
参数备注
start添加位置，在索引start-1和start之间添加0删除元素的个数，这里是增加所以是0
尾部删除元素 数组名.pop()
头部删除元素 数组名.shirt()
指定区域删除元素 数组.splice（start，length）
参数备注
start从索引start开始（包含start）length删除length个元素
指定区域修改元素 数组.splice（start，length，数据1，数据2...）
参数备注
start从索引start开始（包含start）length删除length个元素,接着添加数据
获取指定区域的元素 数组名.slice(start，end)
获取指定元素的首个索引 数组名.indexof(元素 [,start])
获取指定元素的最后一个索引 数组名.lastIndexof(元素 [,start])
获取满足条件的元素组成的新数组数组.filter(function(item，index，arr){})
数组
.filter(function(item，index，arr
){
return 条件语句
;
});
判断是否有满足条件的元素数组.some(function(item，index，arr){})
数组
.some(function(item，index，arr
){
return 条件语句
;
});
元素逆序排列 数组名.reverse()
元素排序 数组名.sort([比较函数])
比较函数的值备注
compareFunction(a, b) 小于 0a 排在 b 之前compareFunction(a, b) 等于 0a 和 b 的相对位置不变ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；compareFunction(a, b) 大于 0b 排在 a 之前
拼接两个数组 数组名1.concat(数组名2，[，元素1，元素2 ...])
用分隔符分隔每个元素 数组名.join('分隔符')
方法备注
push返回新的长度、栈的结构unshirt返回新的长度pop返回删除的元素shirt返回删除的元素，队列结构splice返回的是删除的元素组成的数组slice区间是 [start，end）、生成并返回提取出的元素组成的新数组concat拼接两个数组加上额外的数据、生成并返回新数组join将参数作为输出时每个元素的分隔符，返回元素+分隔符组成的字符串reverse改变原数组，返回逆序排列的数组sort默认按照元素每一个字符逐位比较unicode值排序的改变原数组，返回排序后的数组indexof可选参数是从索引是start开始查找，返回满足条件的第一个索引，没有则返回-1lastIndexof可选参数是从索引是start开始逆向查找，返回满足条件的第一个索引，没有则返回-1some根据条件查找元素，有返回true，没有false.只要找到符合条件就不再遍历filter返回筛选符合条件的元素组成的新数组
map（）：会遍历当前数组，然后调用参数中的方法，返回当前方法的返回值，arr是数组本身，index是代表数组的各个下标，item是代表数组的各个元素
格式：数组.map（function（item，index，arr）{
执行语句；
}）；
every（）：根据条件查找元素，有返回true，没有false
短路操作：只要找到不符合条件就不再遍历
格式：数组.some（function（item，index，arr）{
条件语句；
}）；
reduce（）：归并，返回最终执行结果
格式：数组.reduce（function（prev，next，index，arr）{
执行语句；
}）；
prev：第一次是遍历index为0的元素
第二次是遍历上一次return的值
next：第一次是遍历index为1的元素
第二次是遍历当前index的值
3.11.4 String
包装流程
var temp
= new String('字符串');
字符串名
= temp
;
temp
= null;
字符串不可变性 值不可变，虽然看上去可以改变内容，但其实内存中新开辟了一个内存空间
内置方法
删除字符串两端的空字符字符串.trim()
获取长度 字符串.length()
获取指定索引对应的字符 字符串.charAt(index)
获取指定索引对应的字符的码值 字符串.charCodeAt(index)
let s
= '𠮷a';
console
.log(s
.charCodeAt(0));
console
.log(s
.charCodeAt(1));
console
.log(s
.charCodeAt(2));
获取指定字符对应的首个索引字符串.indexof(str [,start])
获取指定字符对应的最后一个索引字符串.lastindexof(str [,start])
获取字符串指定的区域部分(主用) 字符串.substr(start,length)
获取字符串指定的区域部分 字符串.substring(start, end)
获取字符串指定的区域部分 字符串.slice(start,end)
截取方法备注
substr第二个参数是截取字符数，返回截取到的字符串部分当参数为负时，第一个负参数当成是字符串长度加上该负数，第二个负参数默认为0substring返回截取索引是[start,end)的内容当参数为负时，将所有的负参数转换为0，如果start>end，则将end和start交换slice返回截取索引是[start,end)的内容当参数为负时，把所有的负参数当成是字符串长度加上该负数
let str
= "hello world";
console
.log(str
.substr(3));
console
.log(str
.substring(3));
console
.log(str
.slice(3));
console
.log(str
.substr(3,7));
console
.log(str
.substring(3,7));
console
.log(str
.slice(3,7));
console
.log(str
.substr(-3));
console
.log(str
.substring(-3));
console
.log(str
.slice(-3));
console
.log(str
.substr(3,-7));
console
.log(str
.substring(3,-7));
console
.log(str
.slice(3,-7));
获取匹配字符串的首个索引字符串.search（str/pattern）
连接字符串 字符串.concat(str1，str2...)
替换字符串 字符串.replace(oldStr/pattern,newStr)
let array
= "cat, bat, sat, fat";
console
.log(array
.replace(/at/g,"ond"));
分隔字符串 字符串.split('分割符'，length)
let pattern
= /[^,]+/;
console
.log("red,blue,green,yellow".split(pattern
));
匹配字符串字符串.match（正则表达式）
返回装有匹配到的子串的数组（没有全局匹配和exec一样，有全局匹配则将所有结果都放入数组），若失败返回null
3.11.5 Boolean
包装流程
var temp
= new Boolean(值
);
变量名
= temp
;
temp
= null;
let booleanValue
= false;
let booleanObj
= new Boolean(false);
console
.log(typeof booleanValue
);
console
.log(typeof booleanObj
);
console
.log(booleanValue
instanceof Boolean);
console
.log(booleanObj
instanceof Boolean);
console
.log(booleanValue
&& true);
console
.log(booleanObj
&& true);
3.11.6 Number
包装流程
var temp
= new String('字符串');
字符串名
= temp
;
temp
= null;
let value
= 3;
let num
= Number(value
);
console
.log(typeof num
);
let obj
= new Number(value
);
console
.log(typeof obj
);
内置方法
toFixed(num) 返回包含指定小数点位数的数值字符串
toExponential（num） 返回以科学记数法表示的数值字符串
num：小数位数
toPrecision(num) 返回最合理的结果，num小于本身位数则用toExponential，大于本身位数用 toFixed
num：数字的总位数
let number
= 10;
console
.log(number
.toFixed(2));
console
.log(number
.toFixed(1));
console
.log(number
.toExponential(1));
console
.log(number
.toExponential(3));
console
.log(number
.toExponential(4));
console
.log(number
.toPrecision(3));
console
.log(number
.toPrecision(1));
isInteger() 是否是整数
console
.log(Number
.isInteger(number
));
console
.log(Number
.isInteger(12.3));
引用类型和原始值包装类型的区别（生命周期）
当使用到某个原始值的属性或方法时，后台都会创建一个相应原始包装类型的对象 通过new实例化引用类型后，得到的实例离开作用域后被销毁 自动创建的原始值包装类只存在于访问它的那行代码
let value
= 3;
let num
= Number(value
);
console
.log(typeof num
);
let obj
= new Number(value
);
console
.log(typeof obj
);
3.11.7 RegExp
概述
正则表达式是用于匹配字符串中字符组合的模式
正则表达式也是对象
功能
用来检索、替换那些符合某个模式的文本
还用于过滤掉页面内容中的一些敏感词
从字符串中获取想要的特定部分。
特点
灵活性、逻辑性和功能性
可以迅速地用极简单的方式达到字符串的复杂控制
实际开发是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达式.
创建
var 变量名
= new RegExp(/表达式
/标记
);
var 变量名
= /表达式
/标记
;
表达式组成
由简单字符和特殊字符组合而成
简单字符 数字和字母
特殊字符 也称为元字符
元字符 (特殊字符)
锚字符 用来提示字符所处的位置
行首匹配，正则表达式必须在字符串开头 ^
行尾匹配，正则表达式必须在字符串结尾 $
方括号字符 []
方括号内部的范围符 -
方括号内部 取反符 ^
替换字符 |
符号备注
[ ]表示有一系列字符可供选择，只要匹配其中一个就可以-表示有一范围的字符可供选择，只要匹配其中一个就可以^方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false。界符写到方括号外面|x|y，匹配x或y
量词符 用来设定某个模式出现的次数
匹配0个或1个 表达式?
匹配至少1个 表达式+
匹配任意个 表达式*
匹配m个 表达式{m}
匹配m到n个 表达式{m,n}
匹配至少m个 表达式{m,}
括号备注
大括号量词符. 里面表示重复次数中括号字符集合。匹配方括号中的任意字符.小括号表示优先级
预定义字符 某些常见模式的简写方式
匹配单个任意字符 .
匹配单个数字字符，等价于[0-9] \d
匹配单个非数字字符，等价于[^0-9] \D
匹配单个的数字、字母、下划线字符.相当于[A-Za-z0-9_] \w
匹配单个的非数字、字母、下划线字符相当于[^A-Za-z0-9_] \W
匹配任意单个的空白字符，空格，制表符和换行符等.等价于[\t\r\n\v\f] \s
匹配任意单个非空白字符.等价于[\t\r\n\v\f] \S
标记
忽略大小写 i
全局匹配 ，查找字符串所有内容 g
换行匹配 m
字符备注
i忽略大小写g查找字符串所有符合模式的匹配项，而不是查找到第一个匹配的内容就结束m换行匹配，表示查找到末尾时会继续换行查找
实例属性
global 布尔值，表示是否设置了 g 标记。
ignoreCase:布尔值，表示是否设置了 i 标记。
unicode: 布尔值，表示是否设置了 u 标记。
lastIndex: 整数，表示在源字符串中下一次搜索的开始位置，始终从 0 开始。
multiline 布尔值，表示是否设置了 m 标记。
dotAll: 布尔值，表示是否设置了 s 标记。
source: 正则表达式的字面量字符串(不是传给构造函数的模式字符串)，没有开头和结尾的斜杠。
方法
测试正则表达式 正则表达式.test(字符串)
匹配符合正则表达式的子字符串 正则表达式.exec(字符串)
方法备注
test开发常用，验证用户输入。true | falseexec若能匹配则返回装有第一个匹配项的数组，否则返回null数组含有四个值。匹配项、index、input、groups
exec四个值的含义备注
匹配项下标为0，匹配到的子字符串,如果有分组则分组排在匹配项后面，分组下标则递增index匹配项在字符串中的下标。若有下一个匹配项，则每次调用exec() index都会是下一个匹配项的起始位置input要查找的字符串groups
let text
= "mon and dad and baby";
let partern
= /mon( and dad( and baby)?)?/ig;
let array
= partern
.exec(text
);
console
.log(array
.index
);
console
.log(array
.input
);
console
.log(array
[0]);
console
.log(array
[1]);
console
.log(array
[2]);
有：每次调用exec()都会返回字符串的下一个匹配项，lastIndex每次都会变化
无：每次调用exec()永远只会返回第一个匹配项
let text
= "cat, bat, sat, fat";
let partern
= /.at/ig;
let array
= partern
.exec(text
);
console
.log(array
.index
);
console
.log(array
[0]);
console
.log(partern
.lastIndex
);
array
= partern
.exec(text
);
console
.log(array
.index
);
console
.log(array
[0]);
console
.log(partern
.lastIndex
);
let text
= "cat, bat, sat, fat";
let partern
= /.at/;
let array
= partern
.exec(text
);
console
.log(array
.index
);
console
.log(array
[0]);
console
.log(partern
.lastIndex
);
array
= partern
.exec(text
);
console
.log(array
.index
);
console
.log(array
[0]);
console
.log(partern
.lastIndex
);
构造函数属性
let text
= "this has been a short summer";
let pattern
= /(.)hort/g;
if(pattern
.test(text
)){
console
.log(RegExp
.input
);
console
.log(RegExp
.leftContext
);
console
.log(RegExp
.rightContext
);
console
.log(RegExp
.lastMatch
);
console
.log(RegExp
.lastParen
);
}
if(pattern
.test(text
)){
console
.log(RegExp
.$_
);
console
.log(RegExp
["$`"]);
console
.log(RegExp
["$'"]);
console
.log(RegExp
["$&"]);
console
.log(RegExp
["$+"]);
}
还有$1~$9代表最多九个捕获项
在开发时基本不使用所有的构造属性
let text
= "this has been a short summer";
let pattern
= /(..)o(.)t/g;
if(pattern
.test(text
)){
console
.log(RegExp
.$
1);
console
.log(RegExp
.$
2);
}
3.12 内存管理
3.12.1 堆和栈
内存区备注
栈由操作系统自动分配释放存放函数的参数值、局部变量的值、存放简单数据类型堆一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。存放复杂数据类型
3.12.2 简单类型的内存分配 数据直接存放在栈空间中
3.12.3 复杂类型的内存分配 引用类型指向实例对象的地址指针存放在栈空间中，真正的对象实例存放在堆空间中
3.12.4 简单类型传参 把变量在栈空间里的原始值复制了一份给形参
function fn(a
) {
a
++;
console
.log(a
);
}
var x
= 10;
fn(x
);
console
.log(x
)；
x10
x10
a11
3.12.5 复杂类型传参 把变量在栈空间里保存的堆地址复制给了形参，形参和实参保存的是同一个堆地址，所以操作的是同一个对象（引用值）
let obj1
= new Object();
let obj2
= obj1
;
obj1
.name
= "chx";
console
.log(obj2
.name
);
function setName(obj
){
obj
.name
= "fjj";
}
let person
= new Object();
person
.name
= 'chx';
setName(person
);
console
.log(person
.name
);
function setName(obj
){
obj
.name
= "chx";
obj
= new Object();
obj
.name
= "fjj";
}
let person
= new Object();
setName(person
);
console
.log(person
.name
);
3.13 执行上下文与作用域
3.10.1 执行上下文
通俗说法
在执行代码之前，把将要用到的所有的变量都事先拿出来，有的直接赋值了，有的先用undefined占个空
全局上下文数据内容操作
变量、函数表达式声明（默认赋值为undefined）函数声明赋值this赋值
函数上下文数据内容操作
变量、函数表达式声明（默认赋值为undefined）函数声明赋值this赋值参数赋值arguments赋值自由变量的取值作用域赋值
console
.log(f1
);
function f1(){}
console
.log(f2
);
var f2 = function(){}
console
.log(num
);
var num
= 10;
console
.log(this);
分类
执行上下文分为全局上下文、函数上下文、块级上下文（eval，一般不用）
（1）全局上下文：
全局上下文是最外层的上下文，在客户端中一般由浏览器创建.
它就是我们常说的window对象，包含所有通过var定义的全局变量和函数都会成为window对象的属性和方法
（2）函数上下文：
函数每被调用一次，都会产生一个新的执行上下文环境。因为不同的调用可能就会有不同的参数
创建执行上下文
执行上下文创建分为创建阶段与执行阶段两个阶段
创建阶段主要负责三件事：确定this---创建词法环境组件（LexicalEnvironment）---创建变量环境组件（VariableEnvironment）
（1）确定this（在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。）
构造函数this指向new出来的实例对象
函数作为对象的一个属性的this指向该对象
函数用call或者apply调用的this指向call的对象
全局&调用普通函数的this指向window
（2）词法环境组件
记录其他声明的绑定（如 let 、 const 、 class 等）
词法环境由环境记录与对外部环境引入记录两个部分组成
其中环境记录用于存储当前环境中的变量和函数声明的实际位置
外部环境用于保存自身环境可以访问的其它外部环境
词法环境也分为全局词法环境与函数词法环境两种
全局词法环境组件：
对外部环境的引入记录为null，因为它本身就是最外层环境。
除此之外它还记录了当前环境下的所有属性、方法位置。
函数词法环境组件：
包含了用户在函数中定义的所有属性方法外，还包含了一个arguments对象。
函数词法环境的外部环境引入可以是全局环境，也可以是其它函数环境，这个根据实际代码而来。
（3）变量环境组件
记录 var 声明的绑定
let a
= 20;
const b
= 30;
var c
;
function multiply(e
, f
) {
var g
= 20;
return e
* f
* g
;
}
c
= multiply(20, 30);
GlobalExectionContext
= {
ThisBinding
: <Global Object
>,
LexicalEnvironment
: {
EnvironmentRecord
: {
Type
: "Object",
a
: < uninitialized
>,
b
: < uninitialized
>,
multiply
: < func
>
}
outer
: <null>
},
VariableEnvironment
: {
EnvironmentRecord
: {
Type
: "Object",
c
: undefined
,
}
outer
: <null>
}
}
FunctionExectionContext
= {
ThisBinding
: <Global Object
>,
LexicalEnvironment
: {
EnvironmentRecord
: {
Type
: "Declarative",
Arguments
: {0: 20, 1: 30, length
: 2},
},
outer
: <GlobalEnvironment
>
},
VariableEnvironment
: {
EnvironmentRecord
: {
Type
: "Declarative",
g
: undefined
},
outer
: <GlobalEnvironment
>
}
}
执行上下文栈
执行上下文栈(下文简称执行栈)也叫调用栈，执行栈用于存储代码执行期间创建的所有上下文
总过程
代码执行流流入程序，都会先创建一个全局执行上下文并压入到执行栈中。
之后每当有函数被调用，都会创建一个新的函数执行上下文并压入栈内
函数执行完毕后上下文栈会弹出顶部的函数上下文，把控制权还给之前的执行上下文
let a
= 'hello world';
function first () {
console
.log('进入 first 函数执行上下文');
second();
console
.log('再次进入 first 函数执行上下文');
}
function second () {
console
.log('进入 second 函数执行上下文');
}
first();
console
.log('进入 全局执行上下文（Global Execution Context）')
当上述代码在浏览器加载时，Javascipt引擎创建了一个全局执行上下文并把它压入了执行上下文栈，用 globalContext表示它，并且只有当整个应用程序结束的时候（浏览器关闭），ECStack才会被清空，所以程序结束之前，ECStack最底部永远有个 globalContext
:
ECStack
= [
globalContext
];
当执行到一个函数的时候，就会创建一个执行上下文，并且压入执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出。知道了这样的工作原理，就可以分析出 ECStack的变化过程：
ECStack
.push(<first
> functionContext
);
ECStack
.push(<second
> functionContext
);
ECStack
.pop();
ECStack
.pop();
image
注意：函数中，遇到
return能终止可执行代码的执行，因此会直接将当前上下文弹出栈。
例如，看以下这个闭包例子：
function f1(){
var n
=999;
function f2(){
alert(n
);
}
return f2
;
}
var result
=f1();
result();
因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下：
ECStack
= [
globalContext
];
ECStack
.push(<f1
> functionContext
);
ECStack
.pop();
ECStack
.push(<result
> functionContext
);
ECStack
.pop();
3.10.2 作用域
作用域分类
作用域分类备注
全局作用域作用于所有代码执行的环境、一个独立的 js 文件局部作用域作用于函数内的代码环境，所以也称为函数作用域块级作用域块作用域由 { } 包括 、在ES6之前没有、ES6之前还归属于全局作用域
变量的作用域
变量分类备注特点区别
全局变量在全局作用域下声明的变量全局使用全局作用域下 var 声明的变量是全局变量在函数内不使用 var 声明的变量也是全局变量只有在浏览器关闭时才会被销毁，因此比较占内存局部变量在局部作用域下声明的变量该函数内部使用在函数内部 var 声明的变量是局部变量函数的形参也算局部变量当其所在的代码块被执行时，会被初始化当代码块运行结束后，就会被销毁，因此更节省内存空间
作用域链 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问
标识符查找 当内部函数引入一个标识符时，必须通过搜索作用域链要确定这个标识符是什么，搜索从作用域链前端（标识符位置）开始，沿着作用域链搜索，直至找到为止
上下文中的代码执行的时候会创建变量对象的作用域链，决定了各级上下文中的代码在访问变量和函数的顺序
3.10.3 预解析 在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
变量预解析变量提升
变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。
输出undefined可以验证变量会被提升
函数预解析函数提升
函数的声明会被提升到当前作用域的最上面
3.14 this
3.14.1 概述 this变量储存的是当前函数调用者的地址
3.14.2 各种情况下的this指向
全局作用域或者普通函数 this指向全局对象window
函数调用 谁调用this就指向谁
构造函数 this指向构造函数的实例
箭头函数 this指向函数定义位置的上下文this.注意是上下文的this，对象不产生上下文
3.14.3 修改this指向
方法名.call(新指向,方法参数1,方法参数2...)
方法名.apply(新指向, [方法参数1,方法参数2...])
方法名.bind(新指向,方法参数1,方法参数2...)
方法备注应用场景
call指向新的对象同时调用方法，第二个参数之后都是传给函数的参数.继承apply指向新的对象同时调用方法，第二个参数是包含传给函数的参数的数组并且函数接收到的是每个数组元素作为一个参数的格式，而不是整个数组跟数组配合使用bind指向新的对象但不调用方法，返回原函数改变this之后产生的新函数，新函数不用写参数不调用函数,但是还想改变this指向。例如定时器内部的this指向
3.15 严格模式
3.15.1 概述
在 IE10 以上版本的浏览器中才会被支持
在严格的条件下运行 JS 代码
3.15.2 功能
消除JS不合理、不严谨、不安全之处
提高编译器效率，增加运行速度
禁用了在 ECMAScript 的未来版本中可能会定义的一些语法
3.15.3 使用
脚本开启严格模式 在所有语句之前声明严格模式，在该script标签范围内生效
<script
>
(function (){
"use strict";
...
})();
</script
>
函数开启严格模式 在所有语句之前声明严格模式，在该函数范围内生效
function 方法名(){
"use strict";
...
}
3.15.4 严格模式相比普通模式的变化
禁止变量没有声明就赋值
严禁删除已经声明变量
全局作用域中函数中的 this 是 undefined
函数不能有重名的参数
构造函数必须加上new调用,否则this指向的是undefined,如果给他赋值则会报错
不允许在非函数的代码块内声明函数
3.16 闭包 closure
3.16.1 概述
有权访问另一个函数作用域中变量的函数
一个作用域可以访问另外一个函数内部的局部变量
功能 延伸变量的作用范围。
3.16.2 在 chrome 中调试闭包
当调用内部函数时,Scope 里面会多一个 Closure 参数 ，这就表明产生了闭包
3.16.3 闭包使用 通常与立即执行函数和高阶函数配合使用
(function (...) {
return function() {
}
})(...);
3.17 递归
3.17.1 概述
函数内部调用其本身
由于递归很容易发生“栈溢出”,所以必须要加退出条件 return。
3.17.2 浅拷贝 只是拷贝一层, 更深层次对象级别的只拷贝引用.
浅拷贝数据方法 Object.assign(newobj, oldobj)
3.17.3 深拷贝 拷贝多层, 每一级别的数据都会拷贝.
function deepCopy(newobj
, oldobj
) {
for (var k
in oldobj
) {
var item
= oldobj
[k
];
if (item
instanceof Array) {
newobj
[k
] = [];
deepCopy(newobj
[k
], item
)
} else if (item
instanceof Object) {
newobj
[k
] = {};
deepCopy(newobj
[k
], item
)
} else {
newobj
[k
] = item
;
}
}
}
四、BOM
4.1 概述
4.1.1 浏览器对象模型 Browser Object Model
4.1.2 把浏览器当做一个对象来看待,并把浏览器各个部分封装成对象，提供了独立于内容而与浏览器窗口进行交互的对象
4.1.3 每个浏览器都内置了 DOM、BOM 这样的 API 函数，因此，浏览器中的 JavaScript 才可以调用它们。
4.2 构成
4.2.1 由Window、Location、Navigator、Screen、History、document组成
4.3 Window
4.3.1 概述
Window对象是浏览器的顶层对象
Window代表一个浏览器窗口或一个框架
Window会在 body 或 frameset 每次出现时被自动创建
Window是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
4.3.2
4.3.3 定时器
设置倒计时定时器 setTimeout(回调函数名 [,延迟毫秒数])
清除倒计时定时器 clearTimeout(定时器变量名)
设置周期时间定时器 setInterval(回调函数名 [,间隔毫秒数])
清除周期时间定时器 clearInterval(定时器变量名)
confirm（“内容“）：显示一段内容以及确认按钮和取消按钮的对话框
如果用户点击确定按钮，则方法返回true
如果用户点击取消按钮，邪恶方法返回flase
定时器种类备注
setTimeout时间省略默认是0回调函数可以是匿名函数，也可以写函数名或函数名()经常给定时器加标识符(变量名)setInterval时间省略默认是0回调函数可以是匿名函数，也可以写函数名或函数名()经常给定时器加标识符(变量名)
4.3.4 属性
特殊变量window.name 变量名就不能取name
获取页面被卷去的高window.pageYOffset 、window.pageXOffset
open（“url”，“name”，“str”）：打开一个新的浏览器窗口，返回新的window对象
url：跳转的url，打开一个新窗户，加载url
name：给打开的窗口起一个名字
str：一串特殊含义的字符串，含有窗口的样式
close（）：关闭浏览器窗口 ，谁调用我，我关闭谁
- 特点
window.scroll(x,y) 页面滚动到指定位置
window对象不需要创建可以直接使用
window引用可以忽略
4.4 location
4.4.1 概述 获取或设置窗体的 URL，并且可以用于解析 URL
4.4.2 URL
统一资源定位符 (Uniform Resource Locator) 是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
完整url组成 protocol://host[:port]/path/[?query]#fragment
4.4.3 属性
设置或获取当前完整的url location.href
返回当前url的协议 location.protocol
协议备注
file本地磁盘文件访问httphttp协议https证书认证协议
返回当前url的主机名和端口 location.host
返回当前url的主机名 location.hostname
返回当前URL服务器使用的端口号 location.port
返回当前URL路径 location.pathname
返回当前URL的参数 location.search
返回当前URL的锚 location.hash
属性备注
location.port默认隐藏不可见
4.4.4 方法
重新加载(刷新)当前文档 location.reload()
不经过浏览器缓存直接从服务器获取数据重新加载当前文档 location.reload(true)
在当前页面跳转到指定url location.assign('url')
加载新的文档替换当前的文档location.replace('url')
方法备注
location.reload()如果有浏览器缓存则直接使用缓存数据location.reload(true)不经过浏览器缓存直接从服务器获取数据，解决了因为缓存原因而更新不了数据的问题location.assign(‘url’)和href一样location.replace(‘url’)不会在 History 对象中生成一个新的记录，即不能后退到上一个网页
4.5 navigator
4.5.1 概述
navigator 包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。
4.5.2 使用
if((navigator
.userAgent
.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window
.location
.href
= "";
} else {
window
.location
.href
= "";
}
4.6 history
4.6.1 概述
与浏览器历史记录进行交互 该对象包含用户在浏览器当前窗口中访问过的 URL。
4.6.2 属性
获取当前窗口历史记录的条数 history.length
4.6.3 方法
页面跳转到上一条历史记录 history.back()
页面跳转到下一条历史记录 history.forward()
页面前进后退到指定条数历史记录 history.go(number)
number的值备注
0刷新当前页面正整数页面前进number条记录负整数页面后退number条记录
五、DOM
5.1 API
5.1.1 Application Programming Interface,应用程序编程接口
5.1.2 是一些预先定义的函数. 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
5.1.3 Web API 是浏览器提供的一套操作浏览器功能(BOM)和页面元素(DOM)的 API
5.2 DOM概述
5.2.1 Document Object Model 文档对象类型
5.2.2 DOM树
由各种类型的节点构成的层级结构
document节点是每个文档的根节点
文档元素是文档最外层元素 <html>是每个html文档唯一的文档元素
5.3 DOM组成
5.3.1 将标记语言文档的各个组成部分，封装成对象。 可以使用这些对象，将标记语言文档进行CURD的动态操作。控制html文档的内容
5.3.2 主要由Node、Document、Element、Attribute、Text、Comment
5.4 节点类型 Node
5.4.1 节点 网页中的所有内容都是节点（标签、属性、文本、注释等），所有对象都需要继承Node类型
5.4.2 节点分类
节点至少拥有节点类型、节点名称、节点值这三个属性
nodeTypenodeNamenodeValue备注
元素节点Node.ELEMENT_NODE(1)标签名（大写）null/属性节点Node.ATTRIBUTE_NODE(2)属性名（大写）属性值/文本节点Node.TEXT_NODE(3)#text文本内容文本节点包含文字、空格、换行等注释节点Node.COMMENT_NODE(8)#comment注释的内容/文档节点Node.DOCUMENT_NODE(9)#documentnull根节点，指向document对象文档类型节点Node.DOCUMENT_TYPE_NODE(10)doctype的名称null包含着与文档的doctype有关的所有信息文档片段节点Node.DOCUMENT_FRAGMENT_NODE(11)#document-fragmentnull在文档中没有对应的标记，是一种轻量级的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源CDATA节点Node.CDATA_SECTION_NODE(4)#cdata-sectionCDATA区域中的内容只针对基于XML的文档，表示的是CDATA区域实体引用名称节点Node.ENTRY_REFERENCE_NODE(5)实体引用的名称null在实体声明中定义的名称随后将在 XML 中使用。 在XML中使用时，该名称称为实体引用。实体名称节点Node.ENTITY_NODE(6)实体名称null实体是一个声明，指定了在XML中取代内容或标记而使用的名称。处理指令节点Node.PROCESSING_INSTRUCTION_NODE(7)targetentire content excluding the target/DTD声明节点Node.NOTATION_NODE(12)符号名称null代表DTD中声明的符号
5.4.3 插入节点
sonNode插入到parentNode的子节点的末尾 parentNode.appendChild(sonNode)
sonNode插入到parentNode指定子元素broNode的前面parentNode.insertBefore(sonNode,broNode)
5.4.4 复制节点
复制节点本身node.cloneNode([false])
复制节点本身及其子节点node.cloneNode(true)
5.4.5 删除节点parentNode.removeChild(sonNode)
5.4.6 替换节点parentNode.replaceChild(newChild, oldChild)
5.4.7 获取父节点 node.parentNode
5.4.8 针对获取所有子节点的属性
获取首代指定下标的子节点 node.childNodes[index]
获取首代第一个子节点node.firstChild
获取首代最后一个子节点node.lastChild
5.4.9 针对获取所有子元素节点的属性
获取首代指定下标的子元素节点node.children[index]
获取首代第一个子元素节点node.firstElementChild
获取首代最后一个子元素节点node.lastElementChild
5.4.10 针对获取所有兄弟节点的属性
获取上一个兄弟节点 node.previousSibling
获取下一个兄弟节点 node.nextSibling
5.4.11 针对获取所有兄弟元素节点的属性
获取上一个兄弟元素节点 node.previousElementSibling
获取下一个兄弟元素节点 node.nextElementSibling
function getNextElementSibling(element
) {
var el
= element
;
while (el
= el
.nextSibling
) {
if (el
.nodeType
=== 1) {
return el
;
}
}
return null;
}
function getPreviousElementSibling(element
) {
var el
= element
;
while (el
= el
.previousSibling
) {
if (el
.nodeType
=== 1) {
return el
;
}
}
return null;
}
属性兼容性
firstElementChild、lastElementChild、nextElementSibling 、previousElementSiblingie9以上其他没有问题
只访问子节点中的属性节点（无序的，不重复的）：
node对象.attributes【index】 访问当前节点下，下标为index的属性节点
node对象.attributes【“属性名”】 访问当前节点下的属性
5.5 文档类型 Document
5.5.1 文档对象document是全局对象，是HTMLDocument(继承Document)的实例
5.5.2 创建节点
创建元素节点 document.createElement('标签名')
document.createAttribute(“属性的name”):创建属性节点
document.createElement(”元素的name“) ：创建元素节点
document.createTextNode(”文本“) ：创建文本节点
document.createComment(”注释内容“) ：创建注释`
node.getElementsByTagName（“标签名”）： 可以在node节点下，通过元素的名称获取符合条件的元素对象们，返回的是一个伪数组。
node.getElementsByClassName（“class属性的值”）： 可以在node节点下，根据class的属性值获取符合条件的元素对象们。返回值是一个伪数组
创建节点方式效率
document.write()直接将内容写入页面的内容流，会导致页面全部重绘innerHTML页面创建元素很多时使用，采取数组形式拼接效率极高，采取拼接字符串效率低creatElement果页面创建元素较少时使用
5.5.3 获取常用的元素节点
通过documentElement属性获取<html>元素节点 document.documentElement
通过body属性获取<body>元素节点 doucumnet.body
5.5.4 获取指定元素节点方法
通过id值获取元素节点 document.getElementById('id值')
通过标签名获取元素节点 document.getElementsByTagName('标签名')
通过class值获取元素节点 document.getElementsByClassName('class属性值')
通过name值获取元素节点document.getElementsByName('name属性值')
通过指定选择器获取元素节点 document.querySelector('选择器')
通过指定选择器获取所有元素节点 document.querySelectorAll('选择器')
方法备注
getElementById由于id值唯一 ，所以返回唯一的元素节点对象getElementsByTagName由于可能有多个同名标签，所以返回的是一个伪数组getElementsByClassNameH5新增方法，需要考虑兼容性。由于可能有多个class值相同的标签 ，所以返回的是一个伪数组getElementsByNameH5新增方法，需要考虑兼容性。由于可能有多个name值相同的标签 ，所以返回的是一个伪数组querySelectorH5新增方法，需要考虑兼容性。由于可能有多个使用相同的选择器的标签 ，但只返回第一个符合条件的元素节点。取不到伪类querySelectorAllH5新增方法，需要考虑兼容性。由于可能有多个使用相同的选择器的标签 ，所以返回的是一个伪数组
5.6 元素类型 Element
5.6.1 获取修改删除元素节点属性
删除H5自定义的属性element.removeAttribute('属性名')
修改内置和H5自定义的属性值 element.setAttribute('属性名','属性值')
获取修改内置属性的属性值 element.属性
获取内置和H5自定义属性的属性值element.getAttribute('属性')
获取H5自定义属性(以’data-'开头)的属性值element.dataset.属性、 element.dataset['属性']
console
.log(div
.dataset
.index
);
console
.log(div
.dataset
['index']);
console
.log(div
.dataset
.listName
);
console
.log(div
.dataset
['listName']);
方法备注
element.属性获取修改的是内置属性值getAttribute、setAttribute、removeAttribute获取修改的是内置和自定义属性， 删除自定义属性class属性可以直接写class，不再需要classNamedataset.属性dataset存放了所有以data开头的自定义属性的集合属性是去掉data-后的属性名
5.6.2 获取修改元素节点内容
通过innerHTML属性修改或获取标签内容element.innerHTML
通过innerText属性修改或获取标签内容element.innerText
属性备注
innerHTML返回标签内的内容。把标签、文本、空格和换行合成一个字符串innerText返回标签内的内容。把标签、空格和换行去除，只保留文本
通过outerHTML属性修改或获取标签内容element.outerHTML
（1）概念
从外标签开始到外标签结束获取内容
（2）用途
获取外标签内容：element对象.outerHTML；
修改外标签：element对象.outerHTML = "内容"
5.6.3 获取修改元素节点样式
通过class属性值修改元素节点样式 element.className
通过style属性修改元素节点样式 element.style.样式
获取元素相对带有定位父元素上方的偏移element.offsetTop
获取元素相对带有定位父元素左侧的偏移element.offsetLeft
获取元素可见宽度element.offsetWidth
获取元素可见高度element.offsetHeight
获取元素带有定位的父元素element.offsetParent
获取上边框大小element.clientTop
获取左边框大小element.clientLeft
获取元素不包含边框的可见宽度element.clientWidth
获取元素不包含边框的可见高度element.clientHeight
获取被卷去的高element.scrollTop
获取被卷去的宽element.scrollLeft
获取元素实际的宽element.scrollWidth
获取元素实际的高element.scrollHeight
属性备注
classNameclass属性是关键字，不能直接调用样式多于三个就用style若嵌套属性有‘-’字符，则去掉‘-’然后将后面的单词首字母大写JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高样式少于三个就用offsetTop、offsetLeft返回的不带单位的数值它以带有定位的父亲为准 如果没有父亲或者父亲没有定位 则以 body（有8px的外边距） 为准offsetWidth、offsetHeight返回不带单位的数值 包含contentWidth/contentHeight+border+paddingoffsetParent如果父级没有定位则返回bodyclientTop、clientLeft返回的不带单位的数值clientWidth、clientHeight不包含边框的可见宽高返回的不带单位的数值scrollTop、scrollLeft返回滚动条卷去部分内容的高宽，返回的不带单位的数值scrollWidth、scrollHeight如果内容高宽高于容器高宽，则返回实际内容不包含边框的高宽返回的不带单位的数值
（3）获取当前有效样式
元素节点.currentstyle（‘样式’） 兼容IE浏览器
getComputedstyle（元素节点）【“样式”】 兼容现代浏览器
六、事件
6.1 事件概述 事件是某些组件被执行了某些操作后，触发某些代码的执行。
6.2 事件三要素 事件源(触发对象)、事件类型 、事件处理程序(执行函数)
6.3 模式
6.3.1 内联模式 在标签内使用onclick = 函数
6.3.2 外联模式 element.on+事件类型 = function() {}
6.4 执行事件的步骤
6.4.1 获取事件源
6.4.2 注册事件
传统方式
注册事件element.on+事件类型 = function() {}
解绑事件element.on+事件类型 = null
事件监听器方式(IE8以上，首选)
添加监听器 element.addEventlistener('事件类型',function() {} ,true(事件捕获)/ false(事件冒泡,默认))
注销监听器 element.removeEventListener('事件类型',函数名)
方式备注
传统方式注册事件的唯一性，最后注册的处理函数将会覆盖前面注册的处理函数监听器方式IE8 之前的 IE 不支持此方法，可使用 attachEvent() 代替同一个元素同一个事件可以注册多个监听器按注册顺序依次执行
6.4.3 编写事件处理程序
var node
= ...;
node
.事件类型 = function() {
...
}
6.5 DOM事件流
6.5.1 事件流描述的是从页面中接收事件的顺序
6.5.2 DOM事件流由事件捕获、到达目标、事件冒泡三个阶段组成
6.5.3 事件捕获
由网景最早提出
由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素(触发元素)接收，判断外部元素是否因为绑定了事件而触发
主要目标是为了给拦截事件提供可能
6.5.4 事件冒泡
IE 最早提出
开始时由最具体的元素(触发元素)接收，然后逐级向上传播到到 DOM 最顶层节点。
所有浏览器都支持事件冒泡，IE5.5之前只冒泡到document，之后都冒泡到window对象
6.6 事件类型
6.5.1 鼠标事件
单击事件 onclick
双击事件 ondblclick
鼠标移入 onmouseover
鼠标移出 onmouseout
鼠标移入 onmouseenter
鼠标移出 onmouseleave
鼠标按键被按下 onmousedown
鼠标按键被松开 onmouseup
鼠标被移动 onmousemove
禁止鼠标右键菜单oncontextmenu
禁止鼠标选中onselectstart
鼠标事件备注
onmouseover鼠标移入，经过子节点会重复触发,有冒泡现象onmouseout鼠标移出，经过子节点会重复触发,有冒泡现象onmouseenter鼠标移入，经过子节点不会重复触发onmouseleave鼠标移出，经过子节点不会重复触发oncontextmenu主要用于程序员取消默认的上下文菜单onselectstart主要用于禁止外人复制内容
6.5.2 键盘事件
键盘按键被按下 window.onkeydown
键盘字符键按键被按下window.onkeypress
键盘按键被松开 window.onkeyup
执行顺序 keydown -- keypress -- keyup
6.5.3 window事件
窗口加载完毕 window.onload
窗口加载完毕 window.onDOMContentLoaded
窗口大小变化 window.onresize
页面加载即触发 window. pageshow
页面滚动 window.onscroll
window.unload： 当页面解构的时候触发（刷新页面，关闭当前页面） IE浏览器兼容
事件备注
window.onload当文档内容完全加载完成会触发该事件。如图像、脚本文件、CSS文件等而且传统注册方式只能写一个,监听器方式可以写多个window.onDOMContentLoaded纯HTMM加载完成会触发该事件。不包括样式表，图片，flash等等页面的图片很多,从用户访问到onload触发可能需要较长的时间时使用Ie9以上才支持window.onresize只要窗口大小发生像素变化，就会触发这个事件。经常利用这个事件配合window.innerWidth(屏幕宽度) 完成响应式布局window. pageshow无论页面是否来自缓存,这个事件在页面显示时触发针对火狐浏览器缓存问题
（4）表单事件
onblur： 失去焦点
onfocus： 获取焦点
onselect： 当我们在输入框内选中文本的时候触发
onchange： 当我们对输入框的文本进行修改并失去焦点的时候
下列事件必须添加在form元素上
submit： 当我们点击type = submit上的按钮才能触发
reset： 当我们点击type= reset上的按钮才能触发
6.5.5 移动端触屏事件
触摸到DOM元素ontouchstart
在DOM元素上滑动 ontouchmove
从DOM元素上移开 ontouchend
6.7 事件对象
6.7.1 概述
事件对象 用event表示、包含跟事件相关的一系列信息数据、属性和方法
代表事件的状态。比如键盘按键的状态、鼠标的位置、鼠标按钮的状态…
6.7.2 事件对象使用
在处理函数的参数中添加e
事件对象的兼容性方案 var e = e || window.event
var e
= e
|| window
.event
;
element
.on
+ 事件类型 = function(e
) {
...
}
element
.addEventListener('事件类型', function(e
) {
...
})
6.7.3 事件对象属性
获取事件触发的元素 var target = e.target || e.srcElement
获取事件类型 e.type
阻止默认行为 e.returnValue = false
阻止事件冒泡 e.cancelBubble = true
获取相对于可视化页面鼠标的坐标 e.clientX、e.clientY
获取相对于完整页面的鼠标的坐标 e.pageX、e.pagrY
获取相对于电脑屏幕的鼠标的坐标e.screenX、e.screenY
获取按键的ASCII值 e.keyCode
判断页面是否来自缓存 e.persisted
属性备注
e.target触发事件的元素,标准e.srcElement触发事件的元素，非标准、ie6~8使用this事件绑定的元素，由代码处看出e.type不带one.returnValue阻止某些标签的默认行为,只限于传统的注册方式在低版本浏览器中使用e.cancelBubble非标准。支持IE浏览器e.clientX、e.clientY返回可视化页面（浏览器窗口）的鼠标x，y坐标，原点是当前可视化页面的左上角，不带单位e.pageX、e.pagrY返回完整文档页面（包括滚动条的页面）的鼠标x，y坐标，原点是完整页面的左上角，不带单位e.screenX、e.screenY返回电脑屏幕的鼠标x，y坐标，原点是屏幕的左上角，不带单位e.keyCodeonkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。e.persisted如果返回的是true 就是说如果这个页面是从缓存取过来的页面
正在触摸屏幕的所有手指的一个列表e.touches
正在触摸当前DOM元素的手指的一个列表e.targetTouches
手指状态发生变化的手指列表e.changedTouches
（1） 鼠标按键
e.button
左键 ：返回0
滑轮 ：返回1
右键 ：返回2
（3）键盘按键
指示当事件发生时，某些键是否被按下并保持住
e.shirtKey：shirt键是否被按下并保持住
e.altKey：alt键是否被按下并保持住
e.ctrlKey：ctrl键是否被按下并保持住
e.metaKey：某些键是否被按下并保持住
6.7.4 事件对象方法
阻止默认行为 e.preventDefault()
阻止事件冒泡 e.stopPropagation()
方法备注
e.preventDefault()dom标准写法，支持firefox等现代浏览器及高版本ie浏览器阻止某些标签的默认行为。如让链接不跳转或者让提交按钮不提交e.stopPropagation()dom标准写法，支持firefox等现代浏览器
6.8 事件委托
6.8.1 原理 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
6.8.2 作用 只操作了一次 DOM ，提高了程序的性能
6.8.3 使用
给父元素注册监听器
配合e.target使用可以灵活操作子节点
总结
提示：这里对文章进行总结，本文主要写了Javascript常用的知识，方便复习的时候看，小白还是去菜鸟教程和b站上看视频吧。本人原创笔记，不喜勿喷！
