javascript学习

1. 函数返回值

什么是函数？

函数是被设计为执行特定任务的代码块，执行完任务后，把任务的结果给我们。

1.1 函数返回值

细节：
1.在函数体内使用return关键字能将内部的执行结果交给函数外部使用

2.return后面的代码不会再被执行，会立即结束当前函数，所以return后面的数据不要换行写

3.有的函数可以没有return，这种情况函数默认返回值 undefined

一个完整的 求任意数组的最大值并且返回。

如果想要返回多个值

return [max,min];   相当于返回的是一个数组

进入函数内部看执行过程 F11

1.2 函数作用域

一段代码中所用到的名字并不总是有效和可用的 ，而限定这个名字的可用性的代码范围就是这个名字的作用域

作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突

全局作用域： js标签内，js文件中。 

强烈不允许：

就近原则： 优先执行函数里面的num

1.3 匿名函数

没有名字的函数 无法直接使用

匿名函数的使用方式：

1.3.1.. 函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式。

                                           函数表达式和具名函数的不同？

1. 函数表达式，必须先声明函数表达式，后调用。

2. 具名函数的调用可以写到任何位置。

1.3.2  立即执行函数

场景介绍：避免全局变量之间的污染。

第二个小括号本质是调用函数；

立即执行函数的两种写法：

1.3.3  逻辑中断

如果函数fn实际参数不传值的话，并且函数的形式参数没有初始化，那么会输出NAN

undefined+undefined=NAN   

解决方法：

1. 函数的形式参数 x=0,y=0

2.  涉及逻辑中断    undefined||0   都是假则取最后一个0

1.3.4 转化为boolean 形式

隐式转换相关的记忆

2. js对象

什么是对象，对象使用，遍历对象，内置对象。

知道对象数据类型的特征，具备对象数组数据渲染页面的能力

保存网站用户信息，比如姓名，年龄，电话号码，...用以前学的数据类型方便吗？

我们是不是需要学习一种新的数据类型，可以详细的描述某个事物？

2.1 对象是什么？

对象（object）：JavaScript里的一种数据类型。

可以理解为是一种无序的数据类型，注意数组是有序的数据集合。

2.2 对象有什么特点？

无序的数据的集合。 可以详细的秒速某个事物。

2.3 对象使用：

2.4 对象的增删改查

 2.4.1 查：

  查的另外一种属性：适合用属性名是字符串    

                                                                       

改：

        增：

删：

 2.4  对象的方法： 函数

这种情况 没有return 返回undefined  下面：

2.5 对象的遍历

对象是无序的，没有规律，不像数组里面有规律的下标

for  in 语法！

我们很少使用for in遍历数组，因为拿到的是字符串类型不是数字型

通过 for in遍历对象。

为什么要取对象的值？

要得到属性里面的值，进行页面的渲染

错误提示：

obj.k 相当于 obj.'uname'    但是对象里面只有uname的属性。

但是我们之前学到 查不止一种写法 如果有字符串可以使用另外一种写法

   k==='uname'                        非常重要

2.6  对象遍历的案例   

2.6.1 根据数据渲染生成表格   

将数组中存储的学生信息，以表格的形式输出到网页中。

JS和css和html相结合 

2.7 内置对象

目标：学会调用JavaScript为我们准备好的内置对象

学习路径：

1.内置对象是什么

2.内置对象math

3.生成任意范围随机数

2.7.1内置对象是什么

JavaScript内部提供的对象，包含各种属性和方法给开发者调用。

math对象

math对象的使用

null类似于空对象

2.7.2 random()函数

如果我们想要0-11之间的随机数？  暂置

3. const

    变量声明   建议：能用const尽量用const

    const语义化更好。

3.1 const 在开发中使用!为什么？

在原数组的基础上追加了一个，数组没变地址就没变   只要地址不变 对象就不会有错误。

const 基础数据类型不能修改值，复杂数据类型我们没有改地址，只要地址不修改就不报错

数组还是那个数组 只是添加一个元素。

ocean 今天穿了一件棉衣 ocean还是ocean 只是在原来基础上增加一件衣服，ocean没有变化。

如果对象发生了变化，就不可以  例如如下：

3.2 const 重要总结

4. web API 基本认知

4.1 作用和分类

作用：就是使用JS去操作html和浏览器

分类：DOM（文档对象类型）BOM（浏览器对象模型）

4.2 什么是DOM

DOM：文档对象模型 是用来呈现以及与任意HTML或XML文档交互的API。

DOM是浏览器提供一套专门用来操作网页内容的功能    操作标签。

操作网页内容 可以开发网页内容特效和实现用户交互。

4.3 DOM树

将HTML文档以树状结构直观的表现出来，我们称之为文档数或DOM树。

描述网页内容 关系的名词。

作用：文档树直观的体现了标签与标签之间的关系。

4.4 DOM对象  非常重要

 div在html中是标签，但是在js标签中获取过来的是dom对象 对象就会有属性和方法

document 是我们页面最大的对象。

4.5获取DOM对象 非常重要

把标签抓过来，css中通过选择器抓取标签，js中通过两种方法：

1.根据 css选择器 来获取DOM元素（重要）

页面所有的内容都在document文件中存储。
1. 1. 选择匹配的第一个元素

document.queryselector("css选择器")

参数：包含一个或多个有效的css选择器 字符串   

例如下面的 后代选择器。

1.2 选择匹配的多个元素  获取多个小li

lis   是数组

根据css选择器获取dom对象。

2.其他获取DOM元素方法（了解）

 

 4.6 操作元素文本内容

把页面中的某一个标签通过js拿过来，目的是修改它。

4.6.1  对象.innerHTML属性   对象.innerText属性

        目标：能够修改元素的文本更换内容

innerText 显示纯文本，不解析标签。

4.6.2. 元素.innerHtml属性

1.将文本内容添加/更新到任意标签位置。

2.会解析标签，多标签建议使用模板字符串。

innerHTML 获取标签可以加粗   innerText不可以。

随机抽奖 案例：

const random=math.floor(math.random()*personarr.length);  产生随机的整数。

从数组里面删除 splice 

4.6.3  操作元素常用属性

可以通过js修改/设置标签元素属性，比如通过src更换 图片

最常见的属性比如： href title src等。

先获取过来，再进行处理。

4.6.3.1 页面刷新案例：

4.6.4 操作元素样式属性  重要

 通过style修改

跟样式相关的属性，我们可以通过js去修改，盒子的位置 最典型的就是轮播图，点击之后图片可以滚动。

比如 通过类名的方式操作，style一个一个的改很麻烦，我们可以写一个类，把类名调过来就行了。

页面刷新  页面随机更换背景图片

需求：当我们刷新页面，页面中的背景图片随机显示不同的图片

分析：

1.随机函数

2.css页面背景图片 background-image

3.标签选择body, 因为body是唯一的标签，可以直接写 document.body.style

通过类名修改

如果修改的样式比较多，可以写一个类名，强行加载到盒子上，盒子有类名可以执行多个样式

class相当于.

如果我们即想要 有想要 就用  “ nav box“

 通过classList修改样式属性

通过类名修改的话可能会有一个问题：会覆盖掉原先的类名，我们要添加某个类的时候，一定要查找一下这个标签有没有类名，别给覆盖掉了 很麻烦 为了解决这个问题 

删除类 remove

切换类  toggle()   有还是没有 有就删掉，没有就加上。

classname和classlist的区别？
修改大量样式的更方便。
修改不多样式的时候方便。
classList 是追加和删除不影响以前类名。

轮播图没听

 操作表单元素属性

可以拿到表单里面的值！

如何做选中文本框的实例：

checked  只接受布尔值

disabled是禁用吗？       true就禁用 按钮点不了

check = true就是勾选      disabled = true 就是禁用！！！

 自定义属性

在很多情况下自带的属性不够我们使用，我们要自定义属性 我在标签上自定义属性。

4.7 定时器-间歇函数

使用场景

4.7.1 定时器函数介绍

目标：能够使用定时器函数重复执行代码

定时器函数可以开启和关闭定时器 

使用示例：       setInterval         函数或者函数名都行 

5. 事件监听（绑定）

5.1 事件监听 

目标：能够给DOM元素添加事件监听。

什么是事件？

事件是在编程时系统内发生的动作或者发生的事情。

比如用户在网页上单击一个按钮。

什么是事件监听？

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出   “响应”  ，也称为 绑定事件或者注册事件，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等。

比如：给这个按钮绑定一个事件，一点击图片发生切换

没有字符串 “ ” 当做变量

随机点名案例：

1. 首先先业务分析： 一个模块一个模块写！！！

5.2 事件类型

5.2.1 焦点事件类型

加一个类名

获得的时候把这个类加进来 失去的时候再把这个类取消掉。 一会有颜色 一会没有颜色了。

5.2.2 键盘事件类型

检测有没有按下和弹起。

input 检测用户输入的内容  input的value值可以看输入的内容。

5.3 案例 评论字数统计 

需求：用户输入文字，可以计算用户输入的字数

5.4 事件对象event

5.4.1 获取事件对象

事件对象是什么？ 存储了事件的信息（鼠标的信息 键盘的信息）

也是个对象，这个对象里有事件触发时的相关信息

例如 ：鼠标点击事件中，    事件对象就存了鼠标点在哪个位置等信息

使用场景：

可以判断用户按下哪个键，比如按下回车键可以发布新闻

可以判断鼠标点击了哪个元素，从而做响应的操作。

语法：如何获取

在事件绑定的回调函数的第一个参数就是事件对象

5.4.2 事件对象常用的属性

key:  如果我想要按回车键才能触发，就用到了key   事件对象   只有按下了回车键才能发表评论。

事件对象的属性 key

5.5 环境对象

目标：能够分析判断函数运行在不同环境中this所指代的对象

环境对象：指的是函数内部特殊的变量 this 他代表当前函数运行时所处的环境。

每个函数里面都会有this  环境对象 

第一个：普通函数里面 this指向的是window。

第二个：this指向函数的调用者  this 就是 btn对象。

this有什么用：

我们想点击按钮 按钮自动变颜色

5.6 回调函数

目标：能够说出什么是回调函数

如果将函数A做为参数传递给函数B时，我们称函数A为回调函数

过了1秒钟 我就回头调用这个函数 简称回调函数。

setinterval第一个简称回调函数

6. 事件流

                                                    事件委托 其他事件  元素尺寸和位置 综合案例

6.1 事件流和两个阶段的说明

 事件流  指的是事件完整执行过程中的流动路径。

捕获阶段：山东 济南 蓝翔

冒泡阶段：蓝翔 济南 山东

6.2 事件捕获

如果设置的是同名事件 那么点击事件是不断往下流的   爷爷 爸爸 儿子 

6.3 事件冒泡

目标：能够说出事件冒泡的执行过程
事件冒泡的概念：

 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发，这一过程成为事件冒泡。  （反过来的  冒泡！ 从下到上 从子到父）  

同名事件 同一种类型 点击类型

6.4 阻止冒泡

阻止流动传播  是一种方法   要借助事件对象 属于事件对象的方法

阻止默认行为：

我们某些情况下需要阻止默认行为的发生，比如 阻止链接的跳转，表单域跳转。

6.5 解绑事件

鼠标经过事件的区别？

mouseover 和 mouseout  会有冒泡效果

mouseenter和mouseleave  没有冒泡效果  推荐使用！

6.6 事件委托

目标：能够说出事件委托的好处！

事件委托是 利用事件流的特征解决一些开发需求的知识技巧 

优点：减少注册次数，可以提高程序性能。

原理：事件委托其实是利用事件冒泡的特点。

给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。

利用事件冒泡 会冒泡到父类身上

如果我们只要点击li才会有效果 点击别的不会有效果

事件对象.target.tagname 可以获得真正触发事件的元素。

6.7 其他事件

6.7.1页面加载事件

这样会报错 可以使用页面加载事件解决！ 

6.7.2 元素滚动事件

滚动条在滚动的时候持续触发的事件

为什么要学？： 很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部。

事件名：scroll

监听这个页面滚动。

 滚动条往上一拉 往上走 粉色的就是scrolltop. 被卷去的块

111-115没听

6.7.3  页面尺寸事件

7. 日期对象

7.1 实例化

目标：掌握日期对象，可以让网页显示日期

日期对象 ：用来表示时间的对象

作用：可以得到当前系统时间

实例：倒计时

7.2日期对象方法

定时器刷新：

7.3时间戳

目标：能够获得当前的时间戳

8. 节点操作

8.1 dom节点     

元素节点（标签）

8.2 查找节点

对元素节点进行操作  按照关系进行操作

 我们以前怎么把 li 获取过来，先把ul获取过来 再把li获取过来，现在可以直接从ul拿 

8.3 增加节点

1.创建节点

创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

创建元素节点方法：

1. 放到后面的实例：

2. 放到前面的实例：

ul.children 是一个数组       ul的孩子  只有一个元素也是数组

    120的案例没写

案例：

克隆节点：

克隆节点  1 2 3 1 类似这种

如果把true变成false那么就把标签克隆过来 称为浅克隆

8.4 删除节点

9.BOM window对象

Bom 浏览器对象模型  整个浏览器属于bom, bom比dom大, bom 里面 包含 dom

9.1 定时器 延时函数

点击一个页面 出现一个大广告 几秒之后关闭  不会再出来了

案例：

9.2 js的执行机制

132                                                                              132

js只有单线程 浏览器可以多线程，

宿主环境 浏览器 node

由于主线程不断的重复获得任务，执行任务，在获取任务，再执行，所以这种机制被称为 事件循环  （event loop）

9.3 window  location对象

location 的数据类型是对象，它拆分并保存了URL地址的各个组成部分  可以省略window

href 经常用href 利用js的方法去跳转页面。

10. 本地存储

本地存储的介绍

本地存储的分类

存储复杂数据类型

10.1 正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。

作用：通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

正则表达式是什么?
        是用于匹配字符串中字符组合的模式
正则表达式有什么作用?
        表单验证(匹配)
        过滤敏感词(替换)
        字符串中提取我们想要的部分(提取)

正则表达式使用分为几步?
        1.定义正则表达式
        2.检测查找是否匹配

10.1.1元字符

目标:能说出什么是元字符以及它的好处
普通字符:
        大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
        也就是说普通字符只能够匹配字符串中与它们相同的字符。
元字符  (特殊字符)
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
        比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm.......
        但是换成元字符写法:  [a-z]

10.1.2 边界符

10.1.3 量词

量词用来设定某个模式出现的次数。

{n} 写几就必须出现几次

逗号两侧千万不能出现空格

10.1.4 字符类

只要包含ABC的任意一个字符就可以

       

11. js进阶

11.1 作用域

作用域链

1.作用域链本质是什么?
        作用域链本质上是底层的变量查找机制

2.作用域链查找的规则是什么?
        会优先查找当前函数作用域中查找变量

        查找不到则会依次逐级查找父级作用域直到全局作用域

11.2 垃圾回收机制 gc

垃圾回收机制(Garbage Collection)简称 GC，JS中内存的分配和回收都是自动完成的，内存   在不使用的时候会被垃圾回收器自动回收。

11.2.1  js垃圾回收机制-算法说明

堆栈空间分配区别:
        1.栈(操作系统):由操作系统自动分配释放函数的参数值、局部变量等，基本数据类型放到栈里面。
        2.堆(操作系统):一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型放到堆里面。

下面介绍两种常见的浏览器垃圾回收算法:  引用计数法    和   标记清除法

数组的存放：

引用计数的缺点：

两个对象无法正确回收 造成内存泄漏。

11.2.2  标记清除法

现代的浏览器已经不再使用引用计数算法了。
现代浏览器通用的大多是基于标记清除算法的某些改进算法，总体思想都是一致的。

标记清除法
核心:
        1.标记清除算法将“不再使用的对象”定义为“无法达到的对象”
        2就是从根部(在IS中就是全局对象)出发定时扫描内存中的对象。凡是能从根部到达的对象，都是还需要使用的。
        3.那些无法由根部出发触及到的对象被标记为不再使用，稍后进行回收。

如何解决引用计数的缺点！

我从根部出发 发现变量是在函数里面  从根部无法进入函数内部找到这两个对象 所以就清除这两个对象。

11.3 闭包

目标:能说出什么是闭包，闭包的作用以及注意事项

概念:一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域

简单理解:闭包 = 内层函数 + 外层函数的变量。

外部函数使用函数内部的变量。

闭包应用:     实现数据的私有
比如，我们要做个统计函数调用次数，函数调用一次，就++

利用标记清除法 从根部往下找，由于const fun=count()是全局 不会被立刻回收，只有关闭的时候才会回收，fun里面有count ,count里面有fn  ,i不会被回收！！！

按照标记清除法 只要我们能找到就不销毁

11.4 变量提升

目标:了解什么是变量提升
变量提升是JavaScript 中比较“奇怪”的现象，它允许在变量声明之前即被访问(仅存在于var声明变量)

1.用哪个关键字声明变量会有变量提升?
        var
2.变量提升是什么流程?
        先把var 变量提升到当前作用域于最前面    只提升变量声明，不提升变量赋值   然后依次执行代码
我们不建议使用var声明变量

11.4.1函数提升

知道函数参数默认值、动态参数、剩余参数的使用细节，提升函数应用的灵活度，知道箭头函数的语法及与普通函数的差异。

目标:能说出函数提升的过程函数提升与变量提升比较类似，是指函数在声明之前即可被调用

函数表达式必须先声明赋值 后调用。 否则必报错。

11.4.2 函数参数

函数参数的使用细节，能够提升函数应用的灵活度。
学习路径:

14.4.2.1  动态参数

1.当不确定传递多少个实参的时候，我们怎么办?       arguments 动态参数

2.arguments是什么?                                                   伪数组，它只存在函数中
14.3.4 剩余参数与展开运算符

剩余参数主要的使用场景是?    用于获取多余的实参
剩余参数和动态参数区别是什么?   开发中提倡使用哪一个?
        1. 动态参数是伪数组
        2. 剩余参数是真数组
        3.开发中使用剩余参数想必也是极好的

11.5 箭头函数

11.5.1 箭头函数(重要）
目标: 能够熟悉箭头函数不同写法
目的: 引入箭头函数的目的是 更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁

使用场景:  箭头函数更适用于那些本来需要匿名函数的地方
学习路径:   基本语法       

箭头函数参数          箭头函数this      

  =>   相当于  function。

1. 只有一个形参的时候可以省略小括号

2.只有一行代码的时候，我们可以省略大括号

11.5.1 箭头函数的this   只有函数才有this

这个函数里面没有this  去找上一层 就是window
是上一层作用域的this

obj上面还有 window.obj       obj其实是window调用的。

函数里面才有this。

11.6 解构赋值

11.6.1 数组解构

目标: 知道解构的语法及分类，使用解构简洁语法快速为变量赋值

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。

数组解构 其实 就是把数组里面的元素快速赋值给变量。

示例 交换两个变量     必须要加；

11.6.1.1 数组解构的案例：

 

横着写竖着写一样。 一定要加；

11.6.1.2 数组解构的情况

1.变量多 单元值少
实参多了 匹配不上的时候  没有的为undefined 相当于声明一个d变量没有给值。

2.变量少 单元值多

        2. 1 利用剩余参数来解决这个问题

4.防止undefined传递  可以给默认参数

                                                           11.6.2  对象解构

我们想使用对象的属性比较麻烦，obj.uname...  比较麻烦。解构出来更方便一些

对象解构的语法：

        1. 如果前面有属性名重名 可以使用这种方法 重新改名

11.6.3 数组对象解构

示例1： 请将以上msg对象 采用对象解构的方式   只选出 data 方面后面使用渲染页面。

以前我们要msg.data 现在只需要data就行 书写代码简单

示例二： 传data  上面msg是后台传递过来的数据，我们需要把data选出当参数传递给函数

代码更简洁 更实用。   选择出来可以直接使用 写法简单。

// msg 虽然很多属性，但是我们利用解构只要 data值

需求3，为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData。

11.6.4 遍历数组 for each方法

      加强版的for循环。适合于遍历数组对象。

案例：通过for_each 遍历数组 拼接字符串 渲染数据

因为我们的foreach在遍历， 每当遍历一次生成新的div ，把带有8个字符串的div 复制给 list,  innerHTML带有解析标签的功能 。

1. 声明字符串，一定在foreach外面声明，如果在里面声明会每次重新清空

2.数组遍历 每次遍历+=

3.把拼接完的字符串赋值给list 因为innerHTML是解析标签的

示例：

  由于数组的每一个item是一个对象 考虑解构  因为每一次写item.name太费劲了 直接写变量名

结果：

12 深入对象

------------------------------------------------------------------------------------------------------------------
掌握基于构造函数创建对象，理解实例化过程。
掌握对象数组字符数字等类型的  常见属性和方法，便捷完成功能。

12.1 创建对象三种方式：

12.2  构造函数

目标: 能够利用构造函数创建对象
构造函数:  是一种特殊的函数，主要用来初始化对象。
使用场景: 常规的{........}语法允许创建一个对象。比如我们创建了佩奇的对象，继续创建乔治的对象还需要重新写一遍，        此时可以通过构造函数来快速创建多个类似的对象

实例化的执行过程

实例成员:
通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员(实例属性和实例方法）

1.为构造函数传入参数，创建结构相同但值不同的对象

2.构造函数创建的实例对象彼此独立互不影响

静态成员

12.3 内置构造函数

   js把基础数据类型包装成复杂数据类型

12.2.1 内置构造函数之 object

Object.keys 静态方法获取对象中所有属性（键值）

不用for循环了。

还可以追加方法。

12.2.2 内置构造函数之 array

 12.2.2.1 利用map() 和 join() 数组方法实现字符串拼接

map方法 处理数据 并且返回一个数组。

小括号为空 则逗号分隔。

案例：根据持久化数据渲染页面

我们想通过map+join的方法来渲染页面。

1.通过map遍历数组，进行操作 返回新的数组 返回 tr格式 存到新数组里面

结果：

开发中 多使用数组字面量来创建数组 更简单一些

13.2.3 内置构造函数之  string

14.  面向对象 

理解面向对象思想，掌握函数原型对象。
运用面向对象封装确认框对话框功能。

14.1 封装 引出原型对象

封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。

前面我们学过的构造函数方法很好用，但是 存在浪费内存的问题

因为我们想函数的代码是一样的 结果每创建一个对象都要有自己的function，创建200个对象就会有200个function 会造成浪费内存 因为我们想函数function 共用一个。

能不能共用一个呢？

15. 什么是原型？

原型 : 解决构造函数浪费内存的问题

1. 目标:     能够利用原型对象实现方法共享。
2. 构造函数通过原型分配的函数是所有对象所 共享的。
3. JavaScript 规定，每一个构造函数都有一个 prototype   原型属性，指向另一个对象，所以我们也称为原型对象这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存。
4. 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

5.构造函数 和 原型对象中的this 都指向    实例化的对象。

function只写了一次 实现了共享 不用写很多function了

公共的属性写到构造函数里面。   

公共的方法写到原型对象里面。

this指向函数的调用者。 

案例 写一个sum方法 如何写   

我想定义一种方法想让所有的数组都能用，所以方法要挂载在原型身上，数组的原型。

this是谁？ 实例对象是arr 因为是arr调用的max 

挂载到array身上 不是arr身上

15.1 constructor属性

单词是：构造函数的意思
在哪里?  每个原型对象里面都有个constructor属性(constructor 构造函数)

作用:  该属性指向该原型对象的构造函数，简单理解，就是指向我的爸爸，我是有爸爸的孩子

验证了 constructor 指回构造函数。

constructor的作用就是让原型对象找到构造函数 谁创造了原型。

发现了一个问题   两次的prototype不一样  

因为之前是追加的，在对象的基础上一步一步添加。
现在是等于了 相当于重新给了一个新对象。不知道属于哪个构造函数的了

使用场景：

需要指回构造函数 重新指回创造这个原型对象的构造函数

constructor属性的作用是什么?      指向该原型对象的构造函数

15.2 对象原型

对象都会有一个属性   __proto__    指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype原型对象的属性和方法，就是因为对象有   __proto__  原型的存在。

只要实例化对象，都有这个属性 __prote__ ，这个属性就指向原型对象，能指过来就能找到。

构造函数和原型对象里面的this指向谁？    指向实例化的对象。

__proto__ 只读的 只能获取不能赋值。

对象原型（__proto__）指向原型对象（prototype）。

15.3 原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承的特性。
龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。

公共的部分我想要放在哪个地方都能使用------------放到原型身上

添加一个方法，挂载到原型身上，只要是通过这个构造函数new出来的，都会有这个函数。

因为指向同一个对象。  但会有Man里面也输出body

子类的原型 = new 父类 

15.4 原型链

object是最大的对象，所有的对象都归属object

串起来的链子 我们就叫原型链。

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链。

1. 只要是对象就有   __proto__    ，指向原型对象。

2.__proto__ 指向   根据谁构造出来的  原型对象。 我是根据star构造出来的，那么我一定指向star的原型对象。

3.因为star是对象也有__proto__ 接着往上指，找到最大的object的原型对象。

4.只要是原型对象里面就有constructor，指向创造我的构造函数。

原型链的作用：为对象成员查找机制提供一个方向。

原型链：原型链就是一个查找规则，可以查找一些属性和方法沿着一条线来找，先看当前原型对象身上有没有，如果没有那么就找上一层原型对象，如果有就能拿过来使用，虽然实例身上没有这个方法，但是上面有就可以使用。

比如说array的map方法 

那么任何一个数组 我当前没有没关系 都可以通过原型对象一层一层查找，只要能找到就能用。

15.5 instanceof 运算  判断前者是不是属于后者

instanceof运算符用于检测   构造函数的prototype 属性是否出现在   某个实例对象的原型链上。

他属不属于另外一个构造函数。

模态框案例：采取面向对象的思想来做

打开和关闭模态框是共享的，任意一个都有相应的功能，写到构造函数的原型对象身上。

模态框有打开和关闭功能，而且每个模态框都包含两个功能，所以考虑到使用原型对象。

业务2 打开方法：

模态框结构都一样 就是内容不一样 所以使用原型对象 只需要修改内容就行。构造函数里面传入

1. 封装了一个open的方法，把创建的模态框显示到页面中  给我们的页面创建的盒子追加到body中，一定要加this 因为this指向的是实例对象，点了哪个按钮，一定要让当前的实例对象调用open显示出来

this指向this.modalBox.

逻辑&&

如果box为没有 则中断，不再执行后面的代码 box.remove，执行下一行的代码。

如果box为有 则执行 box.remove，再执行下一行的代码。

16.深浅拷贝

对象赋值的问题：因为堆和栈的问题  直接赋值对象有很大的风险

遇到复杂的还是有问题！！！  浅拷贝只拷贝外面一层，把值给了他

深拷贝

首先浅拷贝和深拷贝只针对引用类型。

深拷贝:拷贝的是对象，不是地址。

常见方法:
1.通过递归实现深拷贝
2. lodash/cloneDeep
3.通过JSON.stringify()实现

目前这样会有问题 我修改了 会造成修改

因为 简单类型传的是值直接拷贝，数组复杂数据类型 传的是地址。

要把这个传进去   ['乒乓球','足球'] 相当于oldobj[k] 相当于 hobby  可以取值传进去                 oldobj[k]是hobby

解决浅拷贝问题！！！

1. 如果你是正常的数据类型我就不执行if里面的代码 ，如果是数组的，先给我的新对象创建hobby,hobby只能存数组，先给空的，然后依次循环往里面复制

当是数组属性的时候递归调用，把旧数组的值依次取出来 放到新数组中，新数组就有值了

因为这里面的k是 'uname' 所以不能用 o.'uname'新增属性。不能用newObj.k   
只能使用newobj[k]相当于o.uname。

一定先写array再写object不能反过来 先把数组删完再删对象

1. 深拷贝新对象不会影响旧对象，实现深拷贝用到函数递归

2.当遇到数组再次调用递归函数 如果遇到对象再次递归 先数组后对象。

17.异常处理

17.1 throw抛异常   

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行

1.抛出异常我们用那个关键字?它会终止程序吗?
        throw 关键字
        会中止程序
2.抛出异常经常和谁配合使用?
        Error 对象配合 throw 使用

17.2 try/catch捕获异常   

2.怎么调用错误信息?
利用catch的参数，参数是我们自定义的，但是想要拿到详细信息，一定要有message，错误的详细信息。

17.3 debugger

如果代码特别长，一打断点就跳过来debugger的地方

18. this总结

this 是JavaScript 最具“魅惑”的知识点，不同的应用场合 this 的取值可能会有意想不到的结果，在此我们对以往学习过的关于【 this 默认的取值】情况进行归纳和总结。

目标: 了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方法
学习路径:
1.普通函数this指向：谁掉用我，我就指向谁。

2. 箭头函数this指向：向外层作用域中，一层一层查找this，直到有this的定义。

this是函数里面的this  对象没有this 

18.1 this指向

JavaScript 中还允许指定函数中 this 的指向，有3个方法可以动态指定普通函数中 this 的指向

18.1.1 call()

18.1.2 apply()

18.1.3 bind()

最大的好处就是名字改变了不用修改 比如 btn改成 btn1  this跟随调用者不改变。

下面是个坑  函数的this指向调用者 

但是 setTimeout 是windows调用的 所以setTimeout里面的this指向window

解决方法1：将setTimeout改成箭头函数。

解决方法2：bind修改this指向。不会调用只是修改this

btn变化名字也不用再改了。

19. class基础  基于原型实现的。

类（手机模版）是抽象出来的，对类进行实例化 获取类的对象

class  new出来的实例要写在定义类后面。class没有声明提升这样的功能。

19.1 constructor关键字

this指向创建的实例 ldh. 返回给ldh, 这样ldh就有了uname的属性

我们都想要每个实例拥有自己特有的属性，但是都享用同一套代码。就要用到constructor。

每次new的时候就会触发constructor方法。

构造函数 创建和初始化一个由class创建的对象。

        构造方法是一种特殊的方法：

        构造方法名为 constructor()。

        构造方法在创建新对象时会自动执行。

        构造方法用于初始化对象属性。

        如果不定义构造方法，JavaScript 会自动添加一个空的构造方法。

19.2 extends关键字

我们不想把代码重新写一遍有没有方法呢？extends 实现的功能一模一样

extends 关键字用于创建一个类，该类是另一个类的子类。

子类继承了另一个类的所有方法。

继承对于代码可重用性很有用：在创建新类时重用现有类的属性和方法。

super() 方法引用父类的构造方法。

通过在构造方法中调用 super() 方法，我们调用了父类的构造方法，这样就可以访问父类的属性和方法。

我们在子类写constructor方法的时候，会覆盖原来父类的constructor方法。
而且下面的代码 不能执行。 

如果在子类写了constructor之前就必须要调用super.

问题就在于this , 我们父类里面也有this, 子类里面也有this,父类和子类的this都是绑定各自实例的，我们子类既然继承了父类的东西，把父类的this拿过来会很混乱的，因此需要用到super方法来初始化this。

我们在这里用super 并且传入父类的两个参数。子类不需要重复写父类的代码，直接用super来调用。不止是继承，子类还有自己独有的属性。还可以改方法

父类里面的sum的sum指向的是父类里面的数据

new son(1,2)是传给了子类的constructor构造函数，所以子类的constructor里面的this指向的是子类的constructor

父类里面是没有得到 1,2 这两个数值的 所以sum没有办法直接进行相加

父类 sum函数里面的this.x和this.y必须是父类接受过来的参数才能相加。

19.3 super关键字

继承中的属性或者方法查找原则 就近原则。

1. super 关键字用于调用一个对象的父对象上的函数，可以是构造函数可以是普通函数。

2. 在构造函数中使用时，super关键字将单独出现，并且必须在使用 this 关键字之前使用。

3. 父类里面的函数必须使用父类里面的属性。

1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
2. 继承中,如果子类里面没有,就去査找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则）

19.4 使用类的注意事项

在ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象

      在类里面的共有的属性和方法一定要加this使用，因为这些属性和方法是属于实例对象的， this指向实例对象。

this.sing后面不要加小括号 加小括号会立即调用，我们想点击完之后调用，所以不要加小括号，sing里面存的就是函数，一点击就调用。

 this指向

constructor 里面的this指向实例对象,方法里面的this指向这个方法的调用者

19.4 static

不想要创建新的实例，用static创建一个方法

在一个静态方法里面 调用另一个静态方法是可以使用this的，这里的this并不是绑定实例的，这里的this是用来绑定类本身的，因为静态方法是需要用类去调用，而不是用实例去调用。千万不要用实例去调用this方法 会出错的

19.5 setter getter

同一个名字即可以赋值也可以输出内容。

get不改变值时调用 set值被改变时调用。

19.6 公有属性 私有属性

public  
在构造函数中用this.age定义

在类的外层直接声明

特点：

• 可以被实例访问和修改

• 也可以被类外部直接修改

1. css

1.1 传统网页布局的三种方式
网页布局的本质--用 CSS 来摆放盒子。把盒子摆放到相应位置,CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)

实际开发中，一个页面基本都包含了这三种布局方式

1.1普通流

        所谓的标准流: 就是标签按照规定好默认方式排列

        1.块级元素会独占一行，从上向下顺序排列。
        常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table

        2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

        常用元素:span、a、i、em等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式

1.2 浮动(float)

1.2.1 为什么需要浮动？

        1.如何让多个块级盒子（div）水平排成一行？

        2.如何实现两个盒子的左右对齐？

总结:有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式.

浮动最典型的应用：可以让多个块级元素一行内排列显示

网页布局第一准则:多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

1.2.2 什么是浮动？

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

1.2.3 浮动特性：脱标

加了浮动之后的元素,会具有很多特性,需要我们掌握的,
        1.浮动元素会脱离标准流(脱标)。
        2.浮动的元素会一行内显示并且元素顶部对齐。
        3.浮动的元素会具有行内块元素的特性。

设置了浮动的元素最重要的特性：

1.脱离标准普通流的控制（浮）移动到指定位置（动）（脱标）

2.浮动的盒子不再保留原先的位置

粉色的盒子会压住蓝色的盒子

2.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

3.浮动元素会具有行内块元素特性。

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

行内块元素给多大内容撑多宽。

1. 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
2. 浮动的盒子中间是没有缝隙的，是紧挨着一起的
3. 行内元素同理

1.2.4 浮动元素经常和标准流父级搭配使用

怎么样让这两个浮动的盒子在页面中央进行显示呢？

margin-right 设置边距。

1.2.5 浮动布局注意点

1.浮动和标准流的父盒子搭配。
        先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

2.一个元素浮动了，理论上其余的兄弟元素也要浮动。
           一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。 

        因为第一个大毛已经把第一行全部占了，二毛浮动是没法压着大毛的 所以在第二行，没法压住上面优先的标准流。

        浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流        

我们前面浮动元素有一个标准流的父元素,他们有一个共同的特点,都是有高度的.

但是,所有的父盒子都必须有高度吗?

理想中的状态,让子盒子撑开父亲,有多少孩子,我父盒子就有多高,

但是不给父盒子高度会有问题吗?..… 

给孩子加上浮动父元素高度会变成0

为什么需要清除浮动 ?
由于父级盒子很多情况下，不方便给高度,但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

父元素在很多情况下是不方便给高度的，但是里面的子元素又需要浮动，一浮动就刚脱离了文档流的位置，不再进行占有位置，就需要重新排版

清除浮动的本质是清除浮动元素造成的影响。

如果父盒子本身有高度，则不需要清除浮动。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

清除浮动方法

        1. 额外标签法也称为隔墙法，是W3C推荐的做法。

上面写完clear类之后，div标签调用clear类  

        2. 父级添加 overflow 属性

        3. 父级添加after伪元素

        4.父级添加双伪元素

总结:
1.清除浮动本质是?
清除浮动的本质是清除浮动元素脱离标准流造成的影响
2.清除浮动策略是?
闭合浮动.只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子

3.额外标签法?
隔墙法,就是在最后一个浮动的子元素后面添加一个额外标签, 添加 清除浮动样式

        图片格式        

2.定位

能够说出为什么要用定位
能够说出定位的4种分类
能够说出4 种定位各自的特点
能够说出为什么常用子绝父相布局
能够写出淘宝轮播图布局
能够说出显示隐藏的2 种方式以及区别

2.1 为什么需要定位

以上效果，标准流或浮动都无法快速实现此时需要定位来实现,
所以:
        1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
        2.定位则是可以让盒子  自由的在某个盒子内移动位置   或者   固定屏幕中某个位置，并且可以压住其他盒子。

2.2定位组成

定位:将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位 = 定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

2.2.1 定位模式

定位模式决定元素的定位方式，它通过CSS 的 position属性来设置，其值可以分为四个：

static静态定位

静态定位是元素的默认定位方式，无定位的意思

2.2.2  相对定位 relative

        相对定位是元素在移动位置的时候，是相对于它原来的位置来说的(自恋型)

距离左上角坐标原点  上面100px    距离左边100px

定位特有的

之前的位置别人不能使用，不脱标。

2.2.3 绝对定位（重要）

如果父元素没有定位 爷爷元素有定位 就以爷爷元素为主，可以脱离父元素的盒子，在爷爷元素的盒子里。

绝对定位和相对定位到底有什么使用场景呢?

子绝对父相对 意思:子级使用绝对定位，父级则需要相对定位

要使用浮动的话有两个问题？？？？

1.浮动只会影响浮动后面的元素，不能影响之前的元素。

2.浮动只能一行进行显示，多行很困难。

绝对定位不占有位置，可以在盒子内任意摆放。，父元素必须加定位才能把子盒子束缚在父盒子内，不能加绝对定位。

2.2.4 固定定位 fixed（重要）

固定定位是元素 固定于浏览器可视区的位置。
主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。

固定定位的盒子不一定永远在浏览器的四边，还可以以版心来对齐。

固定定位小技巧:固定在版心右侧位置。
小算法：
1.让固定定位的盒子left:50%.走到浏览器可视区(也可以看做版心)的一半位置
2.让固定定位的盒子margin-left:版心宽度的一半距离。 多走 版心宽度的一半位置
就可以让固定定位的盒子贴着版心右侧对齐了。

2.2.5 定位总结

 一定记住 相对定位、固定定位、绝对定位两个大的特点:
        1.是否占有位置(脱标否)
        2.以谁为基准点移动位置。

                                                                   学习定位重点学会子绝父相。

           2.2.6 定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)。

数值可以是正整数、负整数或0,默认是 auto，数值越大，盒子越靠上

                                                        

三个盒子重叠到一起了。

标准流 浮动没有z-index属性。

2.2.7 定位的拓展

1.绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

2.2.8 定位的特殊性

绝对定位和固定定位也和浮动类似。
        1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度，
        2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

脱标的盒子不会触发外边距塌陷
        浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题

绝对定位(固定定位)会完全压住盒子
        浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)但是绝对定位(固定定位)会压住下面标准流所有的内容

3. flex布局 

能够说出 flex 盒子的布局原理
能够使用 flex 布局的常用属性
能够独立完成携程移动端首页案例

flex 布局体验
flex 布局原理
flex 布局父项常见属性
flex 布周子项常见属性
携程网首页案例制作

3.1 体验flex布局

3.2 flex布局原理

fiex 是 flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex布局。

当我们为父盒子设为fiex布局以后，子元素的float、clear和vertical-align属性将失效伸缩布局 =弹性布局 =伸缩盒布局=性盒布局 =flex布局

伸缩布局=弹性布局=伸缩盒布局=弹性盒布局 =fex布高

采用 Flex布局的元素，称为Flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目(flexitem)，简称“项目“

3.3 flex布局父项常见属性

3.3.1 flex-direction

flex会设置变化的 设置不同的主轴。

3.3.2 justify-content

fix-start

fix-end  顺序不变

center:

space-around:

space-between 先两边贴边 再平分剩余空间

以前传统布局的时候，父盒子只有固定的宽度，只能装下三个小盒子摆放，如果出现了第四个盒子
以前利用浮动 如果摆不开另起一行

flex会让我们的子元素宽度发生改变。

flex-wrap设置子元素是否换行

默认情况下，项目都排在一条线(又称”轴线”)上。fiex-wrap属性定义，flex布局中默认是不换行的。 如果装不开，会缩小子元素的宽度，放到父元素的里面。

3.3.3 flex-wrap

3.3.4 align-items

我们想要盒子即水平居中 又垂直居中如何设置

如果主轴是y轴的话 就这样显示

上面只能适用于单行的方式，元素都在单行

3.3.5 align-content 

单行下没有效果

3.3.6 flex-flow

3.3.7 flex布局子项常见属性

flex子项目占的份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序(前后顺序)

左侧固定 右侧固定 中间自适应。  flex布局简单

由于三个span没有宽度 默认是0，所以父亲的剩余空间就是全部
flex:1 代表每个p里面的span各 占p的一份

屏幕拉伸还会自动变

flex伸缩盒子布局 弹性盒子布局

如果我们想让三号盒子自己下来呢 如何操作？？？

order 属性定义项目的排列顺序

order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0.
注意:和 z-index不一样。