面向对象
类的概念
类是对对象的一种概括，而对象是类的一种具体实现
对象的分类
原生对象
原生对象又可以分为两类
内置对象
列如前面学习过的Date、Math、正则、数组等，这些就是典型的内置对象。它们是JavaScript这门语言本身所内置的，我们直接使用即可
自定义对象
自定义对象是我们开发人员自己定远的对象，列如在JS基础中介绍符的使用{}快速生成对象。这样的对象就可以被称之为自定义对象
宿主对象
顾名思义，就是依存于某一个特定的环境才会有的对象，一旦离开了特定的环境，则这些对象将不存在。列如前面我们在讲解DOM编程时介绍过的window、navigator、history等对象，这些都是依赖于浏览器环境的。一旦脱离浏览器环境，这些对象也就不存在了。
原型对象
在JavaScript里面，没有类这个概念，只有原型的概念。在JavaScript里面的每一个对象，都有一个原型对象，而原型对象上面也有一个自己的原型对象，一层一层向上找，最终到达null。
通过上面的图我们可以得出以下结论
每一个对象都有一个原型对象。我们可以通过__proto__来访问到某个对象的原型对象
通过__proto__一直向上寻找原型对象的话，最终会找到null
一个构造函数prototype属性指向一个对象，儿这个对象是通过该构造函数实挒化出来的对象的原型对象
JavaScript中的Object.prototype对象。Object.prototype对象是一个空对象，JavaScript中遇到的每个对象，实际上都是从Object.prototype对象克隆而来的。Object.prototype对象就是它们的原型。而Object.prototype对象的原型为null。
类与对象的创建
构造函数
JavaScript是一门很特殊的语言，在ES6之前都没有类的概念，而是通过构造函数老模拟其他编程语言里面的类的。构造函数实际上也是函数，不过这种函数是专门用于生产对象的，所以被称之为构造函数。它的外表和普通函数一模一样，区别在于被调用的方式上面。
构造函数的函数名又一个不成文的规定，就是首字母要大写，以便和普通函数进行区分。
用new运算符调用函数时，该函数总会返回一个对象，通常情况下，构造函数里面的this就指向返回的这个对象
但用new调用构造函数时，还需要注意一个问题，如果构造函数显示的返回了一个object类型的对象，那么此次运算结果最终会返回这个对象，而不是我们之前所期待的this，这里我们通过下面的两段代码搞清楚构造函数是否显示返回object类型对象之间的区别
构造函数显示的返回一个object类型的对象，那么最终使用的就是手动返回的这个对象
ES6类的声明
在ES6中，已经开始越来越贴近其他好几语言了，在ES6中有了类这个概念，使用class创建类。然后从类里面实挒化对象
但是，需要说明的是，虽然有了class这种关键字，但是这只是一种语法糖，背后对象的创建还是使用的是原型的方式
静态方法
所谓静态方法，又被称之为类方法。顾名思义，就是通过类来调用的方法。静态方法的好处在于不需要示例化对象，直接通过类就能够进行方法的调用
在ES6创建类的方法的时候，可以给方法前面添加一个关键字static，来创建一个静态方法
与原型相关的方法
prototype和__proto__
prototype是构造函数上面的一个属性，指向一个对象，这个对象是构造函数实挒化出来的对象的原型对象。实挒化出来的对象可以通过__proto__来找到自己的原型对象
Object.getPrototypeOf()
也可以通过Object.getPrototypeOf()来查找一个对象的原型对象
constructor属性
通过constructor属性，我们可以查看到一个对象的构造函数是什么，换句话说，就是这个对象是如何得来的
instanceof操作符
判断一个对象是否是一个构造函数的实挒，如果是返回true，否则返回false
HTML5 API
Web Storage
它提供了一种存储方式，可以让web页面实现在客户端浏览器中意键值对形式在本地保存数据
Cookie存储机制优点
简单易用
浏览器负责传送数据
浏览器自动管理不同站点的Cookie
Cookie缺点
因为他是简单的文本存储数据，所以Cookie安全性很差，保存在客户端浏览器，很容易被窃取
存储内容有限，上线只有4KB
存储Cookie数量有限，多数浏览器上限为30-50个
如果浏览器安全配置为最高级别，nameCookie会失效
Cookie不适合大量数据存储，因为Cookie由每个对服务器的请求来传递，从而造成Cookie速度缓慢效率低下
localStorage
它是一种没有时间限制的存储方式，可以将数据保存在客户端硬盘获其他存储器中
浏览器关闭不会让数据小时，再次打开浏览器，我们依旧可以访问到这些数据，除非我们删除，否则永不过期
sessionStorage
将数据保存在session对象中，web中session指用户浏览某个网站时，从进入到关闭浏览器所经过的时间
session对象在浏览器关闭后，这些数据会被删除
Web Storage优点
提供了易于使用的API接口，只需要设置键值对应即可使用，简单方便
在存储容量方面可以根据用户分配的磁盘配额进行存储，能够在每个用户域存储5MB-10MB内容，用户不仅可以存储session，还可以存储许多信息，如设置偏好，本地化的数据和离线数据等
它提供了JS编程的接口，开发者可以使用JS客户端脚本实现许多以前只能在服务器端才能完成的工作
使用
例
storage事件
key：告诉我们被修改的条目的键
newValue:告诉我们被修改后的新值
oldValue：告诉我们修改前的值
storageArea：告诉我们是本地存储还是会话存储
url：改变键的文档地址
Geolocation
他是html5新增的地理位置应用程序接口，它提供了一个可以准确感知浏览器用户当前位置的方法
子主题 1
Web Worker
它是一项后台处理技术，有了它，用户可以很容易的创建在后台运行的线程，这个线程被称为Worker
ie不支持，Firefox3.5以上支持，Opera10.6以上支持，Chrome3.0以上支持，Safari4.0以上支持
多媒体
为了做到浏览器兼容，我们可以将多媒体文件的路径卸载 source 标签中
如果取药插入视频，我们将audio（音频）标签换成video（视频）标签
相关属性和方法
在JS中，相关的属性和方法：
muted：是否静音，true开启
autobuffer：true后实现自动缓冲
autoplay：设置自动播放
loop：设置后将会重复播放
poster：设置封面，只有video可以，封面只是一张图，没有播放的时候显示的图片
width和height：设置视频的宽高
volune:设置音量
currentTime：获取多媒体当前所播放的具体时间
playbackRate：设置快进或者快退速度的数字值，值为1正常播放
duration：多媒体播放时长
paly：开始播放
pause：暂停播放
volumechange:调整多媒体音量
loadedmetadata：在多媒体所有原数据被加载时会触发该事件
Canvas画图
他是网页上一个矩形单元，可以用JS在上面绘画
添加canvas元素
直线
矩形
圆形
三角
清除
SVG
同上，也是画图工具，在Canvas出来之前，很长一段时间都是用它
SVG意为可缩放矢量图形，它是使用XML格式来定义图像通过SVG画出来的图形是矢量图，在放大或者改变尺寸，他的质量不会损失
优势
它可以被非常多的工具读取和修改（比如记事本）
他和JPEG和GIF图像比较起来，尺寸更小，且可压缩性更强
可伸缩
可在任何分辨率下被高质量的打印
可以在图像质量不下降的情况下被放大
他的文本可选，也可以被搜索（很适合做地图）
可以喝Java技术一起运行
是开放标准
他的文件是纯粹的XML
它的主要竞争者是Flash
绘图
矩形
圆形
椭圆
线
折线
多边形
路径
HTML5 拖放
拖放，就是抓取对象然后拖到另一个位置
源对象和目标对象
源对象：指的是我们鼠标点击的一个事物，可以是一张图片，一个div，或一段文本等等
目标对象：指的是我们拖动源对象后移动到一块区域，源对象可以进入到这个区域，然后在这个区域上方悬停（未松手），可以是松手释放讲源对象放置此处（已松手），也可以悬停后离开该区域
拖放相关API
源对象
dragstart：源对象开放拖放
drag：源对象拖放过程中（鼠标可能在移动也可能未移动）
dragend：源对象拖放过程结束
过程对象
dragenter：源对象开始进入过程对象范围内
dragover：源对象在过程对象范围内移动
dragleave：源对象离开过程对象的范围
目标对象
drop：源对象被拖放到目标对象内
DataTransfer对象
serData（）：dataTransfer对象中存入数据，接收两个参数，第一个表示存入数据种类的字符串，第二个为要存入的数据
getData（）：他可以从dataTransfer对象中读取数据，参数在为setData中指定的数据种类
clearData（）：清除dataTransfer对象存放的数据，参数可选，为数据种类，如果参数是空的，就清楚所有种类的数据
setDragImage（）：通过img元素来设置拖放图标，第一个为图表元素，第二个为图表元素离鼠标指针的X轴位移量，第三个为图标元素离鼠标指针Y轴位移量
effectAllowed和dropEffect属性:结合起来设置拖放的视觉效果
注：IE不支持data Transfer对象
拖放，例：
Notification
传统桌面通知可以写一个div放到页面右下角自动弹出来，并通过轮询等方法获取并推送给用户
弊端是：我们在一个网站购物时，不知道另一个网站有消息推送过来，我们必须等用户切换到另一个网站才能知道有消息推送过来，这种方法是基于页面存活的
所以需要用Notification，无论用户当前在看那一个页面，只要有消息，都能推送给用户
例
使用
创建
延时的系统通知
事件处理
Notification.onclick：处理click事件的处理，每当用户点击通知时被触发
Notification.onshow：处理show事件的处理，每当通知显示时被触发
Notification.onerror：处理error事件的处理，每当通知遇到错误时被触发
Notification.onclose：处理close事件的处理，每当用户关闭通知时被触发
混入技术
浅复制与深复制
虽然我们实现了对象的混入，但是，这种混入有一个缺点，那就是混入时如果对象的属性是一个引用类型的数据，例如是一个数组或者是一 个对象，那么只会发生浅复制，也就是说只会复制其引用
创建一个mixin()函数,该函数会对一一个对象的所有属性进行深度的复制
内置对象添加方法
this指向
普通函数中this指向
this指向全局对象。当this是在全局中使用，或者是在函数中，但是该函数不作为对象的方法，只是作为普通函数被调用时，指向的就是全局对象(node里面是global对象，浏览器环境里面是window对象)
以普通函数的方式调用的时候，无论嵌套多少层函数，this 都是指向全局对象
改变this指向
使用call或者apply来修改this指向
使用bind（）方法强行绑定this指向
语法如下:fun. bind(thisArg[, arg1[, arg2[, ...]]])
thisArg 当绑定函数被调用时，该参数会作为原函数运行时的this指向
arg1, arg2, .... 当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。
箭头函数的this指向
始终是指向的外层作用域。
继承
继承的缺点
首先如果继承设计得非常复杂，那么整个程序的设计也会变得庞大而臃肿，甚至经常会出现“大猩猩与香蕉”的问题。“大猩猩与香蕉”这个名字来自于Eriang编程语言的创始人Joe Armstrong的文章：你想要一个香蕉，但是得到是拿着香蕉和整个丛林的大猩猩
还有一个问题就是，如果是像c++那样的多继承语言，那么还可能会遇到菱形继承的问题。
单继承
所谓单继承，就是指只有一个父类
多继承
所谓多继承，就是指有多个父类
菱形继承问题
首先需要说明，菱形继承问题只会在多继承里面才会出现。列如：A和B都继承Base类，假设Base类里面有一个成员方法，那么A和B里面都会有这个成员方法，这个时候A和B两个类又都对这个成员方法进行了修改。接下来让一个C来同时继承A和B，那么这个时候就会产生一个问题，对于同名的方法，哪究竟使用哪一个，这就是所谓的菱形继承问题，这个是属于设计上的问题
不过，JavaScript是一门单继承的语言，所以一定程度上避免了菱形继承的问题
对象冒充
最早的时候，在JavaScript里面采用的是对象冒充的方式来实现的继承。所谓对象冒充，就是用父类（构造函数）去充当子类的属性
方法借用模式
现在属性JavaScript继承，基本上不会再使用对象冒充了，但是上面之所以要介绍对象冒充这种继承方式，是为了顺带引出JS中一个非常有特色的方法借用模式，这在JS中是相当灵活的一种模式，不需要继承，就可以从父类或者原型上面借用相应的属性和方法。
ES6继承模式
从ES6开始，可以使用extends关键字来实现继承了
封装
一般来讲，对于私有属性，又一个不成文的规定，那就是习惯使用_开头来命名私有属性。
封装后的属性，我们可以将其称之为私有属性，对于外部来讲，私有属性是不可见的，这个我们已经知道了，但是对于内部来讲，私有属性是可见的。这就好比电视机里面的零件封装后外部无法直接访问到，但是电视机内部是可以使用这个零件来完成相应的功能的
存储器
get ： 一旦目标属性被访问时，就会调用相应的方法
set ： 一旦目标属性被设置时，就会不调用相应的方法
Ajax
基本介绍
在2005年提出，一种新的Web应用程序方法，全称 Asynchronous JavaScript and XML。
Asynchronous：翻译成中文是异步的意思，当发送数据请求时，程序不必停下来等待相应，他可以继续运行，等待响应收到时触发事件。通过使用回调来管理这种过程，程序能够以有效的方式运行，避免了数据来回传输带来的延迟
JavaScript：利用JavaScript我们可以接受来自服务器端返回的数据，并将这些数据实时的更新到页面上
XML：最开始术语 Ajax 被创造，经常用XML文档返回，但实际上可以发送许多不同类型的数据。目前为止 Ajax 最常用的是JSON，他比XML更轻量且更容易解析，它还具备JS原生支持的优点，所以我们可以处理JS对象，不必使用DOM来解析XML
优点
页面无刷新，在页面内在于服务器通信，减少用户等待时间，增强用户体验
用异步方法与服务器通信，响应速度快
可以把一些原本服务器的冯作转接到客户端，利用客户端闲置能力处理，减轻了服务器和宽带的负担，节约空间和宽带租用成本
基于标准化的并被广泛支持的技术，并不需要下载插件或者小程序。
缺点
无法操作后退，就是不支持浏览器页面后退
对搜索引擎的支持比较弱
可能会影响程序中的异步处理机制
安全问题，对一些网站攻击，如csrf,xxs,sql注入等不能很好的防御
原生Ajax的实现
创建XMLHttpRequest对象
发出HTTP请求
接收服务器传回的数据
更新网页数据
Mock.js
前后端分离：让前端工程师独立于后端开发
开发无侵入：不需要修改既有的代码，就可以拦截Ajax请求，返回模拟的响应数据
数据类型丰富：支持生成随机的文本、数字。布尔值、日期、邮箱、链接、图片和颜色等
增加单元测试的真实性：通过随机数据，模拟各种场景
用法简单：符合直觉的接口
方便扩展：支持扩展更多数据类型，支持自定义函数和正则
语法规范
数据模板定义规范DTD
数据模板中的每个属性由3部分构成：属性名、生成规则、属性值
