js总结

语法约定：

1.区分大小写

2，代码缩进

3，建议每行只写一条语句，语句一分号;结尾，则以行末作为语句结束

4，代码执行顺序：从上到下，由左到右

引用 javscript 方式：``

1，写在 head 头部，内嵌 js 代码

2，引入外部 js 文件

3，写在 body 主体

变量：

1，在程序运行过程中其值可以改变的量，是一个数据存储空间的表示，即给内存空间起别名。

2，将数值通过变量进行存储，以便程序随时使用。通俗来说，变量就是存储数据的

3，声明，赋值 var i = 10； var 是’variable’:[可变的]

4，命名规范：只能以数字，英文字母，下划线以及$符号组成，但不能以数字开头。不能使用关键字和保留字。区分大小写，用驼峰命名法

数据类型：

1，string：存储一串字符串，用双引号或单引号括起来

2，number：表示整数或浮点数

3，boolean：表示真假，true 或 false

4，undefined：变量被声明了，但未被赋值

5，null：空

判断数据类型：

1，使用 typeof 判断数据类型

2，用法：typeof（变量)或字面量

3，返回值：string，number，boolean，undefined，object：对象，null

常用的输入/输出：

1，alert()：弹出提示框

2，console.log()向控制台输出信息。

3，document.write() 向网页中输出信息，代码调试。

4，prompt() 弹出输入框，获取用户输入的数据。声明一个变量以存储获取到用户输入的数据返回的数据类型是字符串。

运算符：

1，赋值运算符：=（当变量在左边的时候叫做赋值，在右边的时候叫做取值）

2，算数运算符：+，-，/，*，%

3，比较（关系）运算符：<，>，>=，<=，==，!=

4，逻辑与算符：&&，||，!

5，条件（三目）运算符：语法：条件？表达式 1:表达式 2

6，Nan：not a number 表示非数字，其自身是 number 类型。用来表示数值的一种不正常的状态，一般在计算出错时会出现。

7，isNaN（）：检查其参数是否是非数字，如果是非数字，则返回 true，否则返回 false。

复杂的算数运算 Math 对象：执行常见的算数任务

1，Math.abs(a)；得到 a 的绝对值。

2，Math.pow(a,b)；得到 a 的 b 次方

3，Math.round(a)；四舍五入

4，Math.ceil(a)；向上取整

5，Math.floor(a)；向下取整

6，Math.random()；产生随机数

7，Math.max(a,b…)；返回最大值

8，Math.min(a,b…)；返回最小值

9，Math.PI；返回圆周率的值

数据类型转换：

1，强制类型转换（显式转换）：

转换为 number：（会从第一个字符开始解析，直到遇到非数字符号停止，并返回已解析的部分数值）

1，使用 number()：如果内容可以转换成数字，则返回相应的数字（整数或者小数），如果内容不可以转换成数字，则返回 NaN，如果内容为空，则返回 0

2，使用 parseInt()：将内容转换成整数（直接去掉小数）

3，使用 parseFloat()：将内容转换成小数

转换为 string：

1，使用 string();

2，使用 tostring();

转换为 boolean

1,使用 Boolean();

2，自动类型转换（隐式转换）：转换为 number，转换为 string，转换为 boolean

流程控制语句：

选择结构：

1，if…else

2，switch

3，if…else…if

4，比较 switch 和多重 if 选择结构的区别：共同点是都是用来处理多分支条件的结构，不同点是 switch 选择结构只能处理等值条件判断的情况，多重 if 选择结构没有 seitch 选择结构的限制，特别适合某个变量处于某个连续区间时的情况。

循环结构：

1，while

2，do…while

3，for(表达式 1[参数初始化]；表达式 2[条件判断]；表达式 3[更新循环变量]){循环操作}

4，for(循环变量 in 集合）{}

二重循环：

1，一个循环体内又包含另一个完整的循环结构

2，外层循环变量变化一次，内层循环变量要变化一遍

3，各种循环可以互相嵌套。

数组：

1，数组是一个变量，用来存储一组数据。

2，数组得大小可以动态调整，没有长度限制，

3，可以存储任意类型的数据。

4，声明一个变量就是在内存空间划出一块合适的空间，声明一个数组就是在内存空间划出一串连续的空间。

5，创建数组：var 数组名 = new Array();//js 中的数组没有长度和类别限制。

6，为数组元素赋值：数组名[索引] = 元素值

7，获取元素值：数组名[索引]

使用字符串作为数组下标。

1，数组不仅可以使用非负整数作为索引下标，也可以使用字符串作为下标，一般称之为 key（键）

2，key 不会对 length 属性产生影响，所以不适合用普通 for 循环，而应该使用 for…in 循环（还会自动跳过 undefined 得数据）

数组常用方法

1，排序方法：sort（排序）：默认按数值升序或字符顺序排列，非 string 类型会自动转换为 string

2，反转方法：reverse（反转）：将数组倒叙排列

3，拼接操作：

1，join（连接）：将数组拼接为 string

2，concat（合并）：将多个数组拼接成一个数组

4，转换数组：tostring()；将数组转换为字符串；

valueOf()；返回数组对象本身；

5，迭代数组：forEach()；

冒泡排序：

//冒泡排序法

for (var i = 0; i < array.length - 1; i++) {

for (var j = 0; j < array.length - i - 1; j++) {

if (array[j] > array[j + 1]) {

var temp = array[j];

array[j] = array[j + 1];

array[j+1]= temp;

}

}

}

console.log(array);

内置函数：

1，isNaN()；判断是否为 NaN，如果是，返回 true；

2，isFinite()；判断是否为有限数字（或可以转换为有限数字），返回 true。如果是 NaN、或者是正，负无穷大。则返回 false

自定义函数：

1，创建函数：function 函数名（参数 1，参数 2…）{函数体;}

2，调用函数：函数名(参数值);

3，形参：定义函数时指定得参数，没有实际得值，占位置

4，实参：调用函数时指定得参数，有实际得值。

5，JavaScript 中调用函数时，实参得个数可以和形参得个数相等。

6，JavaScript 中没有重载得概念，后定义得同名函数会覆盖前面定义得函数。所以不要定义同名得函数。注意：在其他语言中会有重载得概念，即函数名相同，参数个数不同得多个同名函数。

7，形参和实参匹配问题：Js 中调用函数时，实参得个数可以和形参得个数不相等。

8，return 得作用：1，返回函数执行得结果，2 结束函数得执行。

9，定义函数的两种形式：

一：函数声明：function 函数名(参数){函数体}

二：函数表达式：var 变量名 = function(参数){函数体}；

三：两种形式的区别，函数声明不是匿名函数，结尾没有分号；函数表达式没有名字，成为匿名函数，一般用于回调，也可能用于一次执行的函数。变量提升问题；

10，回调函数 callback：不立即执行的函数调用，满足一定条件时执行或者由别的代码调用执行

用法：调用时只写函数名，没有小括号和参数

应用：事件绑定，函数参数。

11，函数也是一种数据类型（console.log(typeof myFun);

变量作用域：

1，局部变量：在函数内声明的变量，只能在该函数内访问，函数运行结束，变量自动销毁

2，全局变量：只要不是在函数内声明的变量（在函数内未使用 var 声明，直接赋值的变量，也是全局变量），在任何位置都可以访问，当所有页面关闭时销毁

3，就近原则：如果局部变量和全局变量同名，默认访问的是全局变量。

如果想访问全局变量，必须使用 window 前缀，在一定条件下也可以使用 this 前缀。

4，js 中没有块级作用域的概念，只要不是在函数中定义的 变量都是全局变量，在其他语言中，一对花括号 {}就是一个代码块。在代码块中定义的变量在代码块外是无法访问的。es6 中可以使用关键字 let 定义变量，支持块级作用域。

解析器执行 JavaScript 代码的过程：

1，首先执预解析（全局作用域【变量提升】）：将变量 var 和函数 function 的声明提前到作用域的最上面，需要注意的是变量的赋值操作不会提前。

2，然后执行代码：首先，从上往下，一行一行执行代码。当执行函数会进入函数内部，再次预解析（局部作用域）然后从上往下，一行一行的执行代码。

javascript 组成：

1，ECMAscript

2，DOM（文档对象模型）

3，BOM（浏览器对象模型）

文档对象模型（Document Object Model)是 W3C 制定的一套规范，提供了一组操作 HTML 和 XML 文档的 API，即提供一属性，方法和事件。DOM 可以把 HTML 和 XML 文档解析成一个文档树，书上的每一个分支都可以视为一个对象，通过 DOM 可以动态的操作该文档

DOM 的作用：

1，获取页面中的元素

2，获取/设置元素的属性

3，获取/设置元素的样式

4，删除/添加元素

5，绑定事件——触发响应

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZdGaKm7l-1611544030137)(<C:\Users\黄忠胜\AppData\Local\YNote\data\weixinobU7Vjic4GE4TjiFoZtThc2PB2Ig\f4c7b96cb73f4fb8b3fef482f85b672a\1605508422(1)].jpg>)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7r8QpxRL-1611544030138)(<C:\Users\黄忠胜\AppData\Local\YNote\data\weixinobU7Vjic4GE4TjiFoZtThc2PB2Ig\21cea407a0744e8997bdbff80d116369\1605508573(1)].jpg>)

window 对象常用的方法

1，alert("");显示一个带有提示信息和确定按钮的警告对话框

2，confirm（text）：显示一个带有提示信息，确定和取消按钮的对话框

3，prompt(text,val)：显示一个带有提示信息，确定和取消按钮以及文本输入框的对话框

4，open(url,name,options)：打开具有指定名称的新窗口，并加载给定 URL 所指定的文档

5，showModalDialog()：在一个模式窗口中显示指定的 HTML 文档。

6，close();关闭当前文档(FF 与 IE 规则不同)

7，setTimeout(func,delay)：设置一次性定时器，经过指定毫秒值后执行某个函数

8，setInterval(func,delay)：设置周期性定时器，周期循环执行某个函数

9，clearInterval(timer)：清除周期性定时器

10，clearTimeout(timer)：清除一次性定时器 1

window 对象的常用事件：

1，onload：一个页面或一幅图像完成加载

2，onmouseover：鼠标移到某元素之上

3，onmouseout：鼠标离开某元素时

4，onclick：当用户单击某个对象时调用的事件句柄

5，onkeydown：当某个键盘按键被按下

6，onscroll：窗口滚动条滑动

document 对象（表示整个 HTML 文档）：

document 操作可分为两类：读操作，更新操作

1，属性：

bgColor：设置或检索 document 对象的背景颜色

innerHTML：把内容解析到 DOM 书上

innerText：把内容解析成纯文本

2，方法：

1，write()：在当前页面中输出指定内容

2，getElementById("")：返回指定 id 的第一个对象的引用

3，getElementByName()：返回带有指定名称的对象的集合，返回一个数组

4，getElementByTagName()：返回带有指定标签名的对象的集合，不仅 document 对象具有此方法，其他 DOM 对象同样具有，用来在元素内部根据标签名查找。

DOM 相关类型：

1，Node:节点

Document：文档

Element：元素

Text：文本

Attr：属性

NodeList：节点列表集合

NamedNodeMap：属性映射集合

2，表示 DOM 树的最顶层节点，对应于 HTML 文档

3，属性：childNodes：子节点列表

4，document Element：获取文档的根元素

方法：creatElement(元素名)【创建元素节点】

createTextNode(文本内容)【创建文本节点】

appendChild(子节点)【添加子节点，主要添加元素】

createNode(类型，名称)【根据条件创建一个新节点】：节点类型：1 表示元素节点，2，表示属性节点，3，表示文本节点

Element 类型：

1，属性：nodeName【元素名】

attrbutes【返回属性集合，namedNodeMap 类型】

childNodes【返回子节点集合，nodeList 类型】

firstChild/lastChild【第一个/最后一个子节点】

parentNode【返回元素的父节点】

2，方法：appendChild()【添加子节点，包括子元素，文本节点等】

getAttribute()【获取指定属性的值】

setAttribute()【添加/修改属性】

document 写操作的步骤：

1，创建新元素：document.createElement(元素名)

2，设置文本内容（支持文本内容的元素）：元素.appendChild(document.createTextNode(文本内容));

3，设置属性：元素.setAttribute(属性名，属性值);

4，找到父元素：document.getElement…

其他元素操作：

1，克隆：node.cloneNode(true|false 是否包括内容);

2，插入：parent.insertBefore(新的节点，已经存在的节点);

3，删除：parent.removeChild(要删除的节点);

4，替换：parent.replaceChild(新的节点，被替换的节点);

js 访问 css 样式：

1，style 属性：1，单一单词的 CSS 样式属性，直接使用“对象名.style.样式名”来访问。如 obj.style.color = “red”;

2，复合词，将复合符号“-”去掉，并将其后的单词首字母改成大写，如 obj.style.fontSize = “18px”;

2,className 属性： 当修改的样式比较多时，可以借助于样式表，为不同状态下的样式分别定义一个类选择器，在脚本中使用“对象名.className"来访问

------------------------------------------------------

对象：

1， 特征：对象具有的属性：如学生的姓名，年龄的

2，行为：对象具有的能力：如学生可以学习，跑步，做自我介绍

1，面向对象：1，可以创建自定义的类型，自定义类。

2，支持封装、继承，多态（三大特征）

3，面向对象的语言：Java，C#，C++等

2，基于对象：1，无法创建自定义的类型，但可以模拟实现

2，不能很好的支持面向对象三大特征

3，基于对象的语言：javascript【我们可以认为 js 是面向对象的语言，但其不完全具有对象的特征】

javascript 中的对象： js 中对象是无序属性的集合【属性可理解为键值对，键是属性名，值是对应的数据，所以也可认为对象是键值对的集合。值可细分为基本值，对象，函数】

优点：对象可以封装一组数据，便于使用

创建对象：var 对象名 = new object（）

赋值：对象名.属性名=属性值

获取属性值：对象名.属性名 或 对象名[“属性名”]

对象的组成：属性，方法，事件

函数和方法的区别：函数【直接调用的就是函数，如 parseInt();】

方法【通过对象调用的是方法，如 stu.study();】

创建对象的三种方式：1，直接使用 Object【var person = new Object();】

2，使用构造函数【function Person(name){this.name=name}】

3，使用对象字面量【var stu = { name:“tom”,}】

构造函数：1，用来创建对象的函数，称为构造函数【构造器】，构造函数可以在创建对象的同时设置属性值。

2，定义构造函数，模拟类的定义 i：

function 构造函数名(){

this.属性名=属性值；

this.方法名=function(){方法定义};

}

调用构造函数，创建对象：var 对象名 = new 构造函数名();

带参数的构造函数：为了便于对象的创建以及初始化，通常会使用带参数的构造函数

function 构造函数名(形参 1，形参 2…){

this.属性名=形参 1；

this.属性名=形参 2;

this.方法名=function（）{方法定义};

}

var 对象名 = new 构造函数名(实参 1，实参 2…)

this 关键字

1，this 表示当前对象，构造函数中的 this，表示将来 new 出来的当前对象。

通过对象字面量创建对象：

var stu={

name:"tom",
​ age:12,
​ sex:"男",
​ "js-score":92,
​ study:function(){
​ console.log("正在学习js中...");`` ​ ``}
}

十、Debug 调试
1，简介：程序得故障和缺陷，称之为 bug，排除程序得故障和缺陷称之为 debug
debug 代码调试得方式：alert(),console.log(),打断点，使用开发人员工具
2，步骤：1 设置断点 2（暂停执行得代码行）单步执行 3 观察变量

更新操作

方法	含义
document.createElement(“标签名”)	创建一个元素节点，即标签
document.createTextNode(“文本内容”)	创建一个文本节点，即标签中得文本内容
node.appendChild(newNode)	将一个新的节点 newNode 添加到指定得节点 node 中子节点得末尾
node.insertBefore(newNode.refNode)	将一个新的节点 newNode 插入到 node 节点得子节点 refNode 之前
node.replacChild(newNode.refNode)	用一个新的节点 newnode 替换原有得 node 节点中得子节点 refNode
node.removeChild(refNode)	删除当前节点中指定得子节点
node.remove()	删除当前节点

绑定事件：

1. 静态绑定：通过为标签得事件属性赋值

2. 动态绑定：通过为 DOM 对象得事件属性赋值
   

4. 动态绑定：通过为 DOM 对象进行事件监听，使用 addEventListene(“事件名”，回调函数);

5. 1. <script>
          var btn = document.getElementById("btn");
      	btn.addEventListener('click',function(){
              console.log("动态绑定");
          });
      </script>
      

6. 注意：
   ​ 可以通过事件回调函数得第一个参数获取事件对象 Event，在事件回调函数中，this 表示事件源，即发生事件得元素

7. 可以通过事件回调函数得第一个参数获取事件对象 event，属性含义

   target：事件的目标元素，即事件源
   type：事件类型
   timeStamp：事件生成得日期和时间
   clientX：当事件被触发时，鼠标指针得水平坐标
   clientY：当事件被触发时，鼠标指针得垂直坐标
   在事件回调函数中，this表示事件源
   

常用事件：

事件名	含义
onclick	鼠标单击
ondblclick	鼠标双击
onmouseover	鼠标移动到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下
onmouseup	鼠标按钮被松开
onmousemove	鼠标被移动
oncontextmenu	鼠标右键被单击
onkeydown	某个键盘上得按钮被按下
onkeypress	某个键盘按钮按下去且松开
onkeyup	某个键盘上得按键被松开

表单事件：

事件名	描述
onblur	元素失去焦点
onfocus	元素获得焦点
onchange	域得内容发生改变，一般用于文件选择器和下拉列表
onselect	文本内容被选中
onsubmit	表单提交前触发，回调函数返回 true 表示允许表单提交，返回 false 表示阻止表单提交

事件流：
当一个 HTML 元素产生事件时，该事件会在当前元素与根元素之间按特定得顺序传播，所有经 过得节点都会收到该事件并执行，这个传播过程就是 DOM 事件流

事件冒泡/事件捕获
事件冒泡：当一个元素上得事件被触发时，事件从事件源开始，往上冒泡知道页面得根元素，这个过程称为事件冒泡（默认方式）
事件捕获：当一个元素上得事件被触发时，事件从页面得根元素，往下直到事件目标元素，这过程被称为事件捕获
阻止事件冒泡：event.stopPropagation();

事件代理/事件委托
概念：利用事件冒泡/事件捕获机制，通过给父元素绑定事件，从而实现对所有子元素得事件处理。无需为每个子元素绑定事件
优点：减少事件注册，降低内存占用。新增元素时实现动态绑定事件
事件默认行为：
当一个事件发生时浏览器自己会默认做得事情，如：点击链接时默认会跳转，右键点击时默认会弹出菜单，阻止事件得默认行为：e.preventDefault();

BOM

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xt50p0vk-1611544030139)(<C:\Users\黄忠胜\Desktop\1606827845(1)].jpg>)

英文	含义
window	窗体
frames	框架
history	历史记录
navigator	导航
location	地址栏
screen	屏幕
document	正文文档
anchors	超链接
applets	小程序
forms	表单
image	图片
layers	图层面板
embeds	集合
links	链接

Window 对象

名称	含义
history	有关客户访问过得 URL 信息
location	有关当前 URL 得信息，子级 DOM 对象
document	表示浏览器窗口中得 HTML 文档，子集 DOM 对象
alert(text)	显示一个带有提示信息和确定按钮得警告框
prompt(text)	显示一个带有提示信息，文本输入框，确定和取消按钮得输入框，返回值为输入得数据
confirm(text)	显示一个带有提示信息，确定和取消按钮得确认框，确认返回 true，取消返回 false
open(url,name,options)	打开具有指定名称得新窗口，并加载给定 url 所指定得文档
setTimeout(fn,delay)	设置一次性定时器，在指定毫秒值后执行某个函数
clearTimeout(timer)	清楚一次性定时器
clearInterval(timer)	清除周期性定时器
scrollTo(xpos,ypos)	吧内容滚动到指定得坐标，即设置滚动跳得偏移位置
scrollBy(xnum,ynum)	把内容滚动到指定得像素数，即设置滚动条得偏移量
setInterval(fn,dalay)	设置周期性定时器，周期性循环执行某个函数

引用数据类型：
基本数据类型（简单数据类型）：string、number、boolean、undefined、null
引用数据类型（复杂数据类型）：Object、Array、
内存：
栈内存：基本数据类型得变量和引用数据类型得变量得引用，会存储栈内存中，存取速度比较快
堆内存：引用数据类型得变量，会存储在堆内存中，存取速度较慢
基本数据类型和引用数据类型作为函数参数：
基本类型作为方法得参数：传递得是参数得值，在函数内部修改参数得值，不会影响外部变量
引用类型作为方法得参数：传递得是参数得引用，在函数内部修改参数得值，会影响外部变量

闭包：**
闭包是 JS 中特有得现象，在一个函数内部又定义了一个函数，这个定义在内部得函数，就是闭包
闭包就是能够读取其他函数内部变量得函数，闭包是在某个作用域内定义得函数，该函数可以访问这个作用域内得所有变量，从作用来说，闭包就是将函数内部和函数外部链接起来得一座桥梁**

JSON(JavaScript Object Notation)
JavaScript Object Notation 是一种轻量级得数据交换格式，用于表示 Js 对象得一种方式
采用与编程语言无关得文本格式，易于阅读和编写，同时也易于解析和生成
语法：{“属性名”:属性值,“属性名”:属性值…}
注意：JSON 结构是由一系列得键值对所组成，称为 JSON 对象，属性名使用双引号括起来。JSON 和对象字面量得区别，JSON 得属性必须加双引号，而对象字面量可以不加
使用：
1，简单得 JSON 对象
2，复合属性，属性得值为 JSON 对象
3，JSON 对象的集合
JSON 转换：
JSON 转换为字符串：

var person = {
  name: "杨小洋",
  age: 18,
  height: 180.5,
};
var str = JSON.stringify(person);

字符串转换为 JSON：

var str = '{"name":"tom","age":18}';
var obj = JSON.parse(str);
var user='[
{"id":1,"userName":"admin","password":"123"},
{"id":2,"userName":"tom","password":"456"}
]';
var objs=JSON.parse(users);

原型 prototype:
在构造函数中有一个属性叫 prototype
1，prototype 是一个对象属性，其属性值为对象，称为原型对象
2，可以通过 prototype 来添加新的属性和方法，此时所有该构造函数创建的对象都会具有这些属性和方法
3，由该构造函数创建的对象会默认链接到该属性上
语法：
构造函数.prototype.属性名=值
构造函数.prototype.方法名=function（）{方法定义体}
访问对象属性的查找顺序：
1，首先在当前对象中查找对应的实例属性
2，如果没有，就会到该对象关联的构造函数的 prototype 属性中查找，即到原型对象中查找
作用：
对象间共享数据
为“类”（系统内置或自定义）增加新的属性，方法，并且新增内容对于当前页面中已经创建的对象也有效
_ proto _
prototype 是一个隐藏属性，于是为每个对象提供一个叫——proto——的属性
对象的 proto 与创建他的构造函数的 prototype 本质上是一个东西
proto 是对象的属性，是站在对象的角度，来讨论其原型对象
prototype 是构造函数的属性，是站在构造函数的角度，来讨论其原型属性
注意：由于 proto 是非标准属性，因此一般不建议使用
对象的类型
判断数据的类型：
1，使用 tyeof：可以判断任意变量的类型，判断对象的类型总是返回 object
2，使用 instanceof：只能判断对象是否为某种类型，需要指定判断的目标数据类型，无法获取对象的类型名称
语法：对象 instanceof 你猜想的数据类型，返回 boolean 值
获取对象的类型：
1，函数有一个 name 属性，通过该属性可以获取函数的名称。
2，构造函数的名称就是对象的类型

var stu = new Student()---->Student类型
var p = new Person()  ----->Person类型
var nums = new Array()  ---->Array类型
var obj = new Object() ---->Object类型

constructor 属性：
每个对象都有一个 constructor 属性，该属性描述的就是其构造函数
对象的 constructor 属性是其原型对象提供的，因为每个对象都链接到其原型属性上
call 和 apply：
作用：以某个对象的身份来调用另一个对象的方法
区别：传参的方式有所不同，第一个参数是相同的，都表示由该对象来调用执行，后面的参数不同，call 是逐个传参，后面参数可以由多个逗号隔开，apply 是以数组形式传参，后面参数只能由一个，会自动拆分为多个元素传入

继承：
1，对象冒充继承（构造继承）
核心：使用 call，以对象冒充的形式调用父类的构造函数，相当于是复制父类的实例属性给子类
缺点：只能继承父类构造函数中的属性和方法，无法继承原型中的属性和方法
2，原型链继承：
核心：使用 prototype，将父类的实例做为子类的原型
缺点：创建子类实例时，无法想父类构造函数传参，导致继承的父类属性没有值

3，组合继承：
​ 对象冒充+原型链
原型链： 任何对象都有其原型对象，原型对象也有原型对象，对象的原型对象一直往上找，找到 null 为止，在这一过程中，有一个 Object 类型的，有很多方法，他就是 Object.prototype，位于顶层

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XyTzZAs3-1611544030140)(<C:\Users\黄忠胜\Desktop\1606979770(1)].jpg>)

内置对象：

string：
1，定义方式：var str=“welcome”
var str = new string(‘welcome’)
常用的字符串的方法：

方法	含义
charAt(index)	返回在指定索引位置的字符，也可使用[索引]的方式
charCodeAt(index)	返回在指定的位置的字符的 Unicode 编码。
indexOf(字符串,index)	返回某个指定的字符串值在字符串中首次出现的位置，找不到则返回-1
toLowerCase()	把字符串转换为小写
toUpperCase()	把字符串转换为大写
substr(start,length)	从起始索引号提取字符串中指定数目的字符
slice(start,stop)	提取字符串中两个指定的索引号之间的字符
slice(start,end)	提取字符串的某个部分，并返回提取到的新字符串
split(separator,howmany)	把字符串分割为字符串数组
trim()	去除字符串开头和末尾的空格
fromCharCode()	将字符编码转换为字符串，静态方法
lastIndexOf(字符串,index)	返回某个指定的字符串值在字符串中最后出现的位置

Date
定义方式：
语法：

var date = new Date(); //定义一个日期对象，表示当前事件
var date = new Date(year, month, day, hour, minute, second); //参数为指定得年月日时分秒
var date = new Date(millSeconds); //参数与1970-1-1相差得毫秒数

常用方法：

方法名	含义
getFullYear()	以四位数返回年份
getMonth()	返回月份（0~11),0 表示一月
getDate()	返回一个月中得某一天（1~31）
getHours()	返回小时（0~23）
getMinutes()	返回分钟（0~59）
getSeconds()	返回描述（0~59）
getMilliseconds()	返回毫秒（0~999)
getDay()	返回一周中得某一天
getTime()	返回从 1970-1-1 00:00:00 至今得毫秒数
toUTCtring	把 Date 对象转换为世界标准事件得字符串
toLocaleString()	把 Date 对象转换为本地时间得字符串

正则表达式：
是一门独立得语言，有自己得语法，用于检测指定字符是否符合特定规则
他就是用来定义规则得，称为：Regular Expression
在 JavaScript 中提供了 RegExp 对象，表示正则表达式
创建方式：
1，使用字面量：

var reg = /pattern/abeirtttu;

2，使用构造函数：

var reg = new RegExp(pattern, attribute);

说明：Pattern 表示匹配模式，用于指定匹配规则，由元字符，量词，特殊符号组成
​ attribute 表示匹配特征，取值：i 忽略大小写，g 全局匹配，m 多行匹配
​ 方法：

方法	描述
test()	测试方法，用于测试字符串是否符合正则表达式对象所指定得模式规则，返回 true 或 false
exec()	搜索方法，用于在字符串中查找符合正则表达式对象所指定得模式得子字符串，返回找到得结果，若找不到则返回 null

String 对象得以下方法，支持使用正则表达式：

方法	描述
search()	检索与正则表达式相匹配得子字符串，返回第一个匹配得子串得起始位置，若找不到则返回-1
match()	检索与正则表达式相匹配得子字符串，返回第一个匹配结果(无全局标志 g)或存放所有匹配结果得数组(有全局标志 g)
replace()	检索与正则表达式相匹配得子字符串，然后用第二个参数来替换这些子串，然后用第二个参数来替换这些子串，全局 g 标志有效
split()	按照与正则表达式匹配得字符作为分割符

匹配规则：

符号	描述
\s	匹配任何得空白字符
\S	匹配任何非空白字符
\d	匹配一个数字字符，等价于[0-9]
\D	除了数字之外得任何字符
\w	匹配一个数字，下划线或字母字符
\W	任何非单字字符
.	匹配除了换行符之外得任意字符

量词：指定字符出现得次数

符号	描述
{n}	匹配前一项 n 次
{n,}	匹配前一项 n 次，或者多次
{n,m}	匹配前一项至少 n 次，但是不能超过 m 次
*	匹配前一项 0 次或者多次，等价于{0，}
+	匹配前一项 1 次或者多次，等价于{1，}
？	匹配前一项 0 次或者 1 次，也就是说前一项时可选得，等价于{0，1}

特殊符号：具有特殊含义得符号

符号	描述
/…/	代表一个模式得开始和结束
^	匹配字符串得开始，即表示行得开始
$	匹配字符串得结束
[ ]	表示可匹配得列表
（）	用于分组
|	表示或者
[^ ]	在[ ]中得尖括号表示非

注意：[\u4E00-\u9FA5]用来匹配中文字符

表单校验：
客户端表单校验得目的：1，保证输入得数据符合要求
2，减轻服务器得压力
通过 onsubmit 事件绑定回调函数，判断表单数据是否符合要求，符合返回 ture，否则 false

下拉列表：
Select 对象：表示 HTML 表单中得一个下拉列表

属性	描述
length	设置或返回下拉列表中选项得数量
selectedindex	设置或返回下拉列表中被选中项得索引
value	返回下拉列表中备选选项得值
options	返回下拉列表中所有得选项，值为 Option 对象数组（当该数组改变时对应下拉列表中选项也会跟着变

方法	描述
add()	向下拉列表添加一个选项，第一个参数，添加的元素，第二个，添加的位置

事件	描述
onchange	下拉列表得选项改变时触发

Option 对香港：表示 HTML 表单中下拉列表得一个选项

属性	描述
text	设置或返回在页面中显示得文本值
value	设置或返回传送给服务器的值

构造函数	描述
Option(文本值，服务器值)	创建一个选项

客户端存储：
简介：出于记录用户特定数据的目的，需要客户端数据存储技术。
常用存储机制：
1，Cookie：
优点：需要与服务器交互，浏览器自动管理不同站点的数据并发送到服务器端
缺点：安全性受限，数据量受限（4kb），可用性受限，明文存储
2，Web Storage：HTML5 新增，分为 localStorage 和 sessionStorgae
优点：操作简单，不会自动发送到服务器端、存储空间大（浏览器可支持到 10MB 以上）
缺点：安全性受限，永不过期，不区分站点，明文存储。

Cookie：
以键值对形式存储，在客户端通过 document 对象的 cookie 属性进行操作
写入 cookie：语法

document.cookie = "键=值;expires=失效事件的GMT格式字符串";

如果未指定 expires，则浏览器关闭时 cookie 就失效
​ 读取 cookie：先通过 document.cookie 进行整体读取，然后再根据分号和等号进行拆分

WebStorage:
WebStorage 是 HTML5 中引入的本地存储解决方案，可以在客户端本地存储数据由两部分组成
1，localStorage：在本地永久性存储数据
2，seccionStorage：存储的数据只在会话期间有效，关闭浏览器自动删除
基本用法：

方法/属性	作用
setltem(key,value)	写入数据，添加/修改键值对
getltem(key)	读取数据，根据键读取对应的值
removeltem(key)	删除数据，根据键删除对应的键值对
key(index)	根据索引获取对应的键
clear()	清空数据
length	获取键值对数量

注意：WebStorage 中只能存储字符串数据，如果要存储对象，需要先转换为字符串格式

事件监听：
监听 WebStorage 中数据的变化，当数据发生变化时触发执行回调函数
语法：window.addEventListener(‘storage’,回调函数)
1， storage 事件，对 localStorage 和 sessionStorage 中的数据进行监听
2，回调函数，接收一个 StorageEvent 类型的事件对象参数。包括：
key：发生变化的键
olaValue 原值
newValue 新值
storageArea 发生变化的 localStorage 对象
url 引发变化的页面的 URL