JavaScript基础

三、变量、作用域和内存问题

       1、基本类型和引用类型的值

          （1）、动态的属性  ：基本类型的值不能添加属性，引用类型的值可以添加属性。

           （2）、复制变量值：复制基本类型的值会在变量对象上创建一个新值，然后把该值复制到新变量分配的位置上。复制引用类型的值同样也会将储存在变量中的值复制一份放到新变量分配的空间中，复制介绍后两个变量实际上引用同一个对象，因此改变其中一个变量也会影响另一个变量。

          （3）、传递参数：两个类型的参数传递与其变量复制相对应。在向参数传递基本类型的值时，被传递的值会被复制给一个局部变量。在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部。

      2、检测类型：instanceof 操作符：某个值是什么类型的对象。

      3、执行环境及作用域  （作用域链）  

         （1）、延长作用域链   执行：try-catch 语句的catch块；with语句。

        （2）、没有块级作用域  （1、声明变量：使用var声明的变量会自动被添加到最接近的环境中。在函数内部，最近的环境就是函数的局部环境。在with语句中，最接近的环境是函数环境。如果初始化变量时没有使用var声明，该变量会自动被添加到全局环境。2、查询标识符。）

        （3）、垃圾收集（标记清除、引用计数、性能问题、管理内存）

四、引用类型

         （1）、object 类型

var person = new object();person.name="Nicholas";person.age=29;

           一般访问对象属性使用的都是点表示法，但当属性名中包含非字母数字或者是空格时需要用方括号语法访问该属性。 eg：alert(person["first name"])
          （2）、Array 类型

1、var colors=new Array();2、var colors=new Array(20);

                      [1、 检测数组：if（value instanceof Array）{//对数组执行某些操作}     if（ Array.isArray(value)）{//对数组执行某些操作}；2、转换方法：toLocaleString()：创建一个以逗号分隔的字符串的数组值，通过调用每项的toLocaleString()方法获取每项的值、toString()：返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字【join()】、valueOf()：返回的是数组；3、栈方法：后进先出，puash()推入、pop()弹出；4、列队方法：shift()：移除数组中的第一项并返回该值，同时数组长度减1，相反unshift()方法。结合push()方法；5、重排序方法：reverse()：反转数组项的顺序、sort()：按升序排列数组项；6、操作方法：concat()：添加到数组末尾、slice()：从该参数指定位置开始到指定结束位置所有项，不包括结束位置项。、splice()：向数组的中部插入、删除、替换项。7、位置方法：indexOf()、lastIndexOf()。8、迭代方法：every()、filter()、forEach()、map()、some()；9、缩小方法：reduce()、reduceRight()：函数接受4个参数（前一个值、当前值、项的索引和数组对象）]

           （3）、Date 类型  （1、继承的方法：toLocalString()：按照浏览器设置的地区相适应的返回日期和时间、toString()：返回带有时区信息的日期和时间，一般用军用时间、valueOf()：不返回字符串，返回日期的毫秒表示，可以用比较操作符（小于或大于）比较日期。2、日期格式化方法：toDatestring()、toTimeString()、toLocalDateString()、toLocaleTimeString()）、toUTCString()。3、日期/时间组件方法。）

          （4）、RegExp 类型 （正则表达式：var expression= /pattern / flags;   g：表示全局模式； i：表示不区分大小写模式；m：表示多行模式；1、实例模式；2、实例方法：exec()：index()、input()；test()；3、构造函数属性；4、模式的局限性）

          （5）、Functions 类型 （1、没有重载（同样时后面的函数会覆盖前面的）；2、函数声明与函数表达式；3、作为值的函数：可以把一个函数传递给另一个函数，也可以将一个函数作为另一个函数的结果返回；4、函数内部属性：arguments：保存函数参数和对象callee属性、this：是在全局对象中使用；5、函数属性和方法：length：表示函数希望接收的命名参数个数、prototype：call()：传递给函数的参数必须按顺序列举出来、apply()：接收两个参数，一个是在其中运行函数的作用域，另一个是参数数组。）

          （6）、基本包装类型 （Boolean、Number、String：1、字符方法：charAt()、charCodeAt()；2、字符串操作方法：concat()、slice()、substr()、substring()；3、字符串位置方法：indexOf()、lastIndexOf()；4、trim()：创建一个字符串的副本，删除前置及后缀的所有空格；5、字符串大小写转换方法：toLowerCase()、toLocaleLowerCase()、toUpperCase()、tolocaleUpperCase()；6、字符串的模式匹配方法：针对正则：match()、search()、replace()；7、localeCompare()方法：这个方法比较两个字符串，若字符串在字母表中应该排在字符串之前，则返回一个负数（2）；若字符串等于字符串参数则返回0；若字符串在字母中应该排在字符串参数之后，则返回一个正数（1）；8、fromCharCode()方法：string的一个静态方法；9、HTML 方法）

         （7）、单体内置对象（Global对象：1、URL编码方法：encodeURL()：decodeURL()、encodeURLComponent()：decodeURLComeponent()；2、aval() 方法：只接受一个参数；3、Global 对象的属性；4、window 对象；Math 对象：1、Math 对象的属性；2、min()和max() 方法；3、舍入方法：Math.ceil()：向上舍入、Math.floor()：向下舍入、Math.round()：四舍五入；4、random() 方法：返回介于0到1的随机数，不包括0和1；5、其他方法）

五、面向对象的程序设计

     1、理解对象（1、属性类型    要修改属性默认的特性使用：Object.defineProperty()方法，只接收三个参数：属性的对象、属性的名字、一个描述符对象；描述符只能是以下四个  数据属性：Configurable(true)：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性；Enumerable(true)：表示能否通过for-in循环返回属性；Writable(true)：表示能否修改属性的值；Value(undefined);：包含这个属性的数据值；2、访问器属性：getter、setter；访问器属性有如下四个特性：Configurable(true)、Enumerable(true)、get(underfined)、set(undefined)；2、定义多个属性：Object.defineProperties()方法接收两个参数对象与对应的属性；3、读取属性的特性：Object.getOwnPropertyDescriptor()方法，接收两个参数对象和相应的属性：configurable、enumerable、writable、value）

      2、创建对象（1、工厂模式；2、构造函数模式：（1）创建一个新对象；（2）将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；2、执行构造函数中的代码（为这个新对象添加属性）；（4）返回新对象。：1、将构造函数当作函数：任何函数只要通过new操作符来调用，那它就可以作为构造函数；2、构造函数的问题：每个方法都要在每个实例上重新创建一遍；3、原型模式：（1）理解原型对象：创建一个prototype属性，每个对象都会自动获得一个constructor（构造函数）属性；2、原型与in操作符：单独使用、for-in循环中使用；3、更简单的原型语法；4、原型的动态性；5、原生对象的原型；6、原型对象的问题：共享。4、组合使用构造函数模式和原型模式：构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性。5、动态原型模式：通过检查某个应该存在的方法是否有限，来决定是否需要初始化原型。6、寄生构造函数模式：返回的对象与构造函数或者构造函数的原型属性之间没有关系。7、稳妥构造函数模式：稳妥对象：没有公共属性，而且方法也不引用this对象）

       3、继承（1、原型链：别忘记默认的原型、确认原型与实例的关系、谨慎地定义方法、原型链的问题；2、借用构造函数：传递参数、借用构造函数的问题；3、组合继承；4、原型式继承；5、寄生式继承；6、寄生组合式继承）

六、函数表达式

      函数声明：function functionName(arg0,arg1,arg2){//函数体}

     1、递归

function factorial (num){if (num <=1){return1;}else{reture num*factorial[a](num-1);}}

    2、闭包：有权访问另一个函数作用域中的的变量的函数（常见方式，就是在一个函数内部创建另一个函数）：1、闭包与变量（闭包只能获取函数中任何变量的最后一个值；创建另一个匿名函数强制让闭包的行为符合预期) 2、关于this对象 3、内存泄露

1、function createFuction(){     var result = new Array();     for (var i=0;i<10; i++){     result[i]=function (num){     result function(){     return num;    };    }(i);    }     return result;    }

  3、模仿块级作用域（私有作用域）

(function(){//这里是块级作用域}) ();

  4、私有变量 （特权方法：publicMethod()）（1、静态私有变量；2、模块模式：为单例创建私有变量和特权方法，单例指的是只有一个实例的对象；3、增强的模块模式）

 七、Bom
      1、window 对象（1、全局作用域；2、窗口关系及框架；3、窗口位置；screenLeft和screenTop；4、窗口大小；5、导航和打开窗口：window.open()：接收四个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示是否取代浏览器历史记录中当前加载页面的布尔值。弹出窗口、安全限制、弹出窗口屏蔽程序；6、间歇调用和超时调用：开始：setTimeout() 停止：clearTimeout()     开始： setInterval() 停止：clearInterval()；7、系统对话框：alert()、confirm()、prompt() ）

      2、location对象（1、查询字符串参数：location.search；2、位置操作：location.assign()）

      3、navigator 对象（1、检测插件：hasPlugin()；2、注册处理程序：registerContentHandler()、registerProtocolHandler()）

      4、screen 对象

      5、history 对象（go()、back()、forward()、history.length）

八、客户端检测

       1、能力检测：特性检测

        2、怪癖检测：

        3、用户代理检测

九、DOM

       1、节点层次（1、node 类型：appendChild()、insertBefore()：参数：要插入的节点和作为参照的节点、replaceChild()：参数：要插入的节点和要替换的节点、removeChild()、cloneNode()：接受一个布尔值参数，表示是否执行复制；2、Document 类型：文档的子节点：DocumentType、Element、ProcessingInstructior或Comment，查找元素：getElementById()、getElementsByTagName()、getElementsByName()、document.anchors：包含文档中所以带name的<a>元素、document.forms：包含文档中所有的<form>元素、document,images：包含文档中所有的<img>元素、document.links：包含文档中所有带href特性的<a>元素，文档写 入：weite()、weiteIn()、open()、close()；3、Element 类型：getAttribute()、setAttribute()、removeAttribute()，创建元素：document.createElement()；4、Text 类型；5、Comment 类型；7、DocumentType 类型；8、DcumentFragment；9、Attr 类型）

     2、DOM操作技术（1、动态脚本；2、动态样式；3、操作表格；4、使用NodeList：namednodemap、HTMLCollection）

十、DOM 扩展

    1、选择符API（querySelector()、querySelectorAll()、matchesSelector()）

     2、元素遍历（Element Traversal）

     3、HTML5（1、与类相关的扩充：getElementsByClassName()、classList 属性；2、焦点管理：document.activeElement、document.hasFocus()；3、HTMLDocument 的变化：readyState 属性、字符集属性、自定义数据属性、插入标记：innerHTML属性、outerHTML 模式、insertAdjacentHTML()、scrollIntoView()）

     4、专用扩展（1、文档模式；2、children 属性；3、contains()；4、插入文本：innerText 属性、outerText属性；5、滚动：scrollIntoViewIfNeeded(alignCenter)、scrollByLines(lineCount)、scrollByPages(pageCount)）

十一、事件

     1、事件流（事件冒泡、事件捕获、DOM 事件流：事件捕获阶段、处于目标阶段、事件冒泡阶段）

     2、事件处理程序（HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序：addEventListener()、removeEventListenter() ：都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值：true表示正在捕获，false表示在冒泡阶段调用事件处理程序、IE事件处理程序：attachEvent()、detachEvent()：都接受相同的两个参数：事件处理程序名称与事件处理程序函数 ，添加的事件处理程序会被添加到冒泡阶段，事件处理程序会在全局作用域中运行、跨浏览器的事件处理程序：用的对象是EventUtil：addHandler()、removeHandler()：接受三个参数：要操作的元素、事件名称和事件处理程序函数）

     3、事件对象（DOM中的事件对象、IE中的事件对象、跨浏览器的事件对象）

     4、事件类型（UI事件：load、unload、abort、error、select、resize、scroll；焦点事件：与document.hasFocus()方法及document.activeElement属性配合：blur、focus、focusin、focusout；鼠标事件和滚轮事件：click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup、mousewheel；键盘事件与文本事件：keydown、keypress、keyup和textInput；合成事件：用于处理IME（Input Method Editor 输入法编辑器，可以让用户输入在物理键盘上找不到的字符）的输入序列：compositionstart、compositionupdate、compositionend；变动事件：DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMNodeInsertedIntoDocument、DOMNodeRemovedFromDocument、DOMAttrModified、DOMCharacterDataModified；变动名称事件；HTML5事件：contextmenu事件、beforeunload事件、DOMContentLoaded事件、readystatechange 事件、pageshow和pagehide事件；设备事件：orientationchange事件、MozOrientation事件、deviceorientation事件、devicemotion事件；触摸与手势事件：触摸事件：touchstart、touchmove：调用preventDefault()阻止滚动、touchend、touchcancel，手势事件：gesturestart、gesturechange、gestureend）

    5、内存和性能（事件委托、移除事件处理程序）

    6、模拟事件（DOM中的事件模拟：createEvent()、dispatchEvent()；IE中的事件模拟：document.createEventObject()）

十二、表单脚本

     1、表单的基础知识：HTMLFormElement） （提交表单：form.submit()；重置表单：form.reset()；表单字段：form.elements[]、autofocus、blur、change、focus）

     2、文本框脚本：input、textarea（选择文本：select()、selectionStart、selectionEnd、setSelectionRange()；过滤输入：屏蔽字符、操作剪贴板：clipboardDate：getDate()、setDate()、clearDate()、自动切换焦点、HTML5约束验证API：必填字段：required、其他输入类型：email、url、数值范围：number、range、datetime、datetime-local、date、month、week、time、max、min、step、输入模式：pattern、测试有效性：checkValidity()、禁用验证：novalidate）

     3、选择框文本：select、option（选择选项：selectedIndex、添加选项、移除选项、移动和重排选项）

     4、表单序列化：serialize()

     5、富文本编辑：designMode（使用conteneditable属性、操作富文本：document.execCommand()：接受三个参数：要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值和执行命令必须的一个值、富文本选区：getSelection()、表单与富文本：onsubmit）

十三、使用Canvas绘图

     1、基本用法：getContext()、toDataURL()

     2、2D上下文（填充和描边：fillStyle和strokeStyle、绘制矩形：fillRect()、strokeRect()、clearRect()、绘制路径：beginPath()、closepath()、绘制文本：fillText()、strokeText()、measureText()、变换、绘制图像：drawImage()、阴影、渐变：createLinearGradient()、addColorStop()：色标位置是一个0（开始的颜色）到1（结束的颜色）、createRadialGradient()、模式：createPattern()：参数：一个HTML<img>元素和一个表示如何重复图像的字符串、使用图像数据：getImageData()、putImagedate()、合成：globalAlpha、globalcompositionOperation）

      3、WebGL（类型化数组、WebGL 上下文）

十四、HTML5脚本编程

      1、跨文档消息传递XDM：postMessage()

      2、原生拖放（拖放事件：diagstart、drag、dragend、自定义放置目标：重写dragenter和dragover事件的默认行为、dataTransfer对象：getData()、setData、dropEffect与effectAllowed、可拖动：draggable、其他成员）

      3、媒体元素：audio、video（自定义媒体播放器：play()、pause()、检测编解码器的支持情况：canplayType()、Audio类型）

      4、历史状态管理：history.pushState()：参数：状态对象、新状态的标题和可选的相对URL

十五、错误处理与调试

       1、浏览器报告错误

       2、错误处理（Try-catch语句：finnally子句、错误类型；抛出错误：throw；错误（error）事件）

       3、调试技术（将消息记录到控制台、将消息记录到当前页面、抛出错误）

十六、JSON

     1、语法（简单值：JSON的字符串必须使用双引号；对象：JSON没有变量的概念不用声明变量，没有末尾的分号，对象的属性必须加双引号；数组：与JS一样，但是没有变量和分号）

     2、解析与序列化（JSON对象：stringify()、parse()；序列化选项：JSON.stringify()：参数：第一个参数是过滤器，可以是一个数组也可以是一个函数。第二个参数是一个选项，表示是否在JSON字符串中保留缩进。第三个参数用于控制结果中的缩进和空白符。toJSON()；解析选项：JSON.parse()：也可以接收另一个参数，该参数是一个函数）

十七、Ajax与Comet（Ajax：从页面向服务器请求数据的技术）

      1、XMLHttpRequest 对象（XHR的用法：open()：3个参数：要发送的请求的类型（get、post）、请求的URL和表示是否异步发送请求的布尔值。xhr.send()：作为请求主体发送的数据、xhr.abort()：取消异步请求；HTTP头部信息：setRequestHeader()：接收两个参数：头部字段的名称和头部字段的值，在调用open()方法之后且调用send()方法之前调用。getResponseHeader()；GET请求：使用encodeURIComponent()进行编码。addURLParam()：三个参数：要添加参数的URL、参数的名称和参数的值；POST请求：）

       2、XMLHttpRequext 2级（FormData；超时设定：timeout；overrideMimeType()方法）

       3、进度事件（load事件：火狐用其代替readystatechange事件；progress事件：在调用open()方法前调用）

       4、跨源资源共享（IE对CORS的实现：XDR、abort()方法可以终止请求；其他浏览器对CORS的实现：open()；Preflighted Reqeusts；带凭据的请求；跨浏览器的CORS）

        5、其他跨域技术（图像ping；JSONP：JSON with padding：包括两个部分回调函数和数据；Comet：服务器向页面推送数据的技术：两种实现Coment的方式：长轮询和流：HTTP流：createStreamingClient()：三个参数：要连接的URL、在接收到数据时调用的函数以及关闭连接时调用的函数；服务器发送事件：SSE API、事件流；Web Sockets）

   十八、  高级技巧  

       1、高级函数（安全的类型检测：object.prototpye.toString()；作用域安全的构造函数；惰性载入函数；函数绑定：使用一个闭包返回一个函数；函数柯里化：使用一个闭包返回一个函数，返回函数还需设置一些传入的参数）

      2、防篡改对象（不可扩展对象：object.preventExtensions()；密封的对象：object.seal()；冻结的对象：object.freeze()；）

      3、高级定时器（setTimeout()；setInterval()；Yielding Processes；函数节流：throttle()：接收两个参数：要执行的函数以及在哪个作用域中执行。）

    十九、离线应用与客户端存储

       1、离线检测（navigator.onLine、online与offline）

       2、应用缓存：appcache（manifest file：描述文件，能在缓存区中保存数据）

      3、数据存储（Cookie：CookieUtil.get()、CookieUtil.set()、CookieUtil.unset()、子Cookie：get()、getAll()、set()、setAll()、unset()、unsetAll()；IE用户数据：userData：seetAttribute()、save()、load()；Web存储机制：Web Storage：sessionStorage和globalStorage。storage类型、sessionStorage对象、globalStorage对象、localStorage对象、storage事件：setIten()、delete或者removeItem()、clear()；IndexedDB：Indexed Database：数据库：indexDB.open()、对象存储空间、事务：transaction()、使用游标查询：openCursor()、键范围：only()、lowerBound()、upperRange()、bound()、索引：createIndex()）

   二十、最佳实践