面向对象


 类的概念
  类是对对象的一种归纳,而对象是类的一种具体实现
 对象的分类
  原生对象
   原生对象又能够分为两类
    内置对象
     列如前面学习过的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部分构成:属性名、生成规则、属性值html

相关文章
相关标签/搜索