第一周到第六周复习笔记

第一周到第六周知识复习笔记

第一周到第四周

• 闭包：当函数被调用的时候，会形成一个私有作用域，保护里面的变量不受外界的干扰，函数的这种保护机制叫做闭包；
• 对象的特征指的是属性和方法；
• 逻辑运算符：
  • a&&b中，若a为真，b运行，返回b,若a为假，b不运行，返回a;
  • a||b中，若a为假，b运行，返回b,若a为真，b不运行，返回a;
    • "||"作为判断语句，用在函数形参赋值中，若调用函数时，传入实参，则函数体内的形参值为传入的实参值，若没有传实参，则赋值默认值；

     function fn(arg){
          arg= arg || "默认值";//代表的意思是，若传入实参，则arg为传入的实参值，若未传入实参值，则为"默认值";
      }
    

• 运算符的优先级： 算术 》比较 》逻辑 》赋值；
• 基本数据类型是对键值对的引用，引用数据类型是对地址的引用；
• 对象的克隆
  • 通过for..in..来遍历原对象，然后复制一份；地址不同；
• 数组的克隆
  • var cloneary=ary.splice(0)通过splice来删除原数组的所有内容，返回一个新的数组，返回的新数组与原来数组相同；即克隆一份，但是原数组发生改变；
  • var cloneary=ary.slice(0)或ary.slice()通过slice来从第一项截取数组，返回一个新数组，新数组与原数组相同；即克隆，原数组不发生变化；
  • var cloneary=ary.concat()通过concat来拼接一个空元素，进而返回一个新的数组，新数组与原数组相同，即克隆，原来数组不发生改变；
• 数组常用的方法：14种；
  • 数组的增加，删除，改、替换；即：push(),pop(),unshift(),shift();splice()(任意位置的删除，增加，修改);
  • 数组元素的查找；即：indexOf();
  • 数组的截取，拼接；即：slice(),concat();
  • 数组转字符串；即：toString(),join();
  • 数组的翻转和排序；即：reverse(),sort();
  • 数组的遍历；即：forEach(),map();
• 数组查找是否存在某元素的方法：indexOf()；如果存在，则返回它的索引值，如果不存在，就返回-1;
• eval()方法：参数为原始字符串，即计算某个字符串，并执行其中的JS代码；
  • 实例：

   //1.计算字符串，执行其中JS代码；
   eval("x=10;y=20;document.write(x+y)")//输出的结果为30，即执行document.write(x+y)这个JS代码；
   //2.将数组元素加法运算求和
   var ary=[1,2,3,4,5];
   var str=ary.join("+");//将数组转化为字符串；str为"1+2+3+4+5";
   var sum=eval(str);//即执行js代码运算；
  

• 数组排序
  • sort()排序：正序：参数为function (a,b){ return a-b }；倒排：参数为function (a,b) { return b-a }；
  • 利用对象的属性名默认升序排列的特性，将数组元素作为对象的属性名，然后将属性名遍历，通过push()或unshift()插入到新数组中，就能达到升序和降序的效果；
  • 快排：
    1. 取数组中间项作为比较项；
    2. 遍历数组元素，依次与目标项比较，若大于则放在right数组中，若等于则放在middle数组中，若小于则放在left数组中；
    3. 封装函数，利用递归思想，将生成的left和right数组再进行此循环，直到left和right数组长度小于等于1,则返回此数组，停止递归；
    4. 注意：
       1）递归函数的返回值为：return fastSort(left).concat(middle,fastSort(right));
       2. 函数中的条件判断：if(arr.length<=1) return arr;其中arr为函数形参，其每个排序的数组；
  • 插排：
    1. 取数组中的一项，利用splice删除，通过返回值获取此项；作为数组arr;
    2. 遍历数组ary,同时也遍历arr,用ary中的每一项与arr中的每一项进行比较；
    3. arr中从前面开始比较；若ary元素小于arr中第一项，则将其插到此项前面，break阻断arr循环；若大于等于，则向后继续循环，直到最后一项，然后插在末尾；
    4. 注意：
       1）在ary元素确认插在arr元素中后，就break阻断arr的循环；
       2）若ary元素均比arr元素大，则插在arr数组的末尾；需要进行条件判断；
       3）在arr遍历循环中，直接写j<arr.length；会出bug，页面会持续加载，需注意；
• 数组去重：五种；
  • sort排序后，遍历数组，让i项和i+1项比较，若相同删除一项，注意防止i塌陷；以及i的最大值为ary.length-1;
  • 两个遍历,数组中每一项和后面所有项进行比较，若相同，则删除其中重复项j，注意防止j塌陷；
  • 新建空数组arr,遍历ary数组，通过indexOf()方法，判断arr中是否存在ary遍历的元素，若为-1,则不存在，插入arr中；
  • 利用对象的不重复特性；将ary遍历，元素作为obj对象的属性名，通过判断属性名是否存在，若不存在，则赋值为1，若存在，则在ary中删除元素；
  • 利用对象的不重复特性，与d中方法相同，不再删除ary中的元素，而是，获取生成的obj对象中的所有属性名，通过for..in循环，来将所有属性名push进一个数组中，但需注意：获得的属性名为字符串，所以需要Number来转化；
• NaN和isNaN()的运用
  • NaN为假，用在if条件语句中，会执行条件不成立时的语句；
  • isNaN(NaN)为真，用在if条件语句中，会执行条件成立时的语句；
• 对象的特性
  • 属性名不重复性；
  • 属性名为数字时，遍历对象拿到的为字符串，属性值为数字，遍历对象后拿到的为数字；
  • 属性名为数字时，不管定义顺序如何，定义后，获得的对象，均按升序排列，数字在前，字母在后，字母按定义顺序排列；
• 字符串
  • 常用的方法：charAt(),indexOf(),substr(),substring(),split(),toUpperCase(),toLowerCase();
  • 与正则配合的方法：split(),match(),replace(),search();
• undefined出现的四种情况
  • 函数中变量只声明未定义，获得的值为undefined;
  • 函数未设置返回值，则函数执行完的返回值为undefined;
  • 函数体设置形参，函数调用时未传入实参，则获得的形参值为undefined;
  • 对象身上不存在某属性，则属性值拿到的为undefined；
• 隐式数据类型的分类及比较
  1. 隐式数据类型分类
  • 提示种类
    • 如果一个元素存在某一属性，但是未设置，则使用的时候，就会报错： xxx is not defined;
    • 如果一个元素身上不存在此类属性，使用的时候，就会出现undefined,属性不存在不会报错；
    • 获取元素时，若未获取元素，则使用元素时，会报错：of null;
  • 数据类型
    • 基本数据类型（5种）:字符串string，数字number，布尔值Boolean，null，undefined；
      • undefined出现的几种情况：1）函数变量找不到会报错，但是变量只声明未定义，则会返回undefined；2）函数定义中未设置返回值，此时函数为一个操作，而不是一个数值，所以使用函数的结果输出的值为undefined；3）对象身上的属性不存在的时候；4）定义了形参，但没有实参，拿到的参数是undefined;
  • 其他数据类型转化为number数据类型
    • 一个严格转换：Number();转换的字符串中只能存在数字，不能存在其他字符；即"123"；可以保留小数；
    • 两个非严格转换：parseInt()-只能转化为整数，向下取整；parseFloat()-可以保留小数；
      • 如：var num="123.6666美好345";其中parseInt(num)转换结果为123；parseFloat(num)转换结果为123.6666；Number(num)转换结果为NaN;
    • 如果转换失败的话，返回的结果是NaN:not a number;不是数字；但NaN是number数据类型；
  • 关于NaN:
    • NaN是number数据类型；
      • 函数中在没有传实参时，两个变量相加，则值为NaN;

    function sum(m,n){
            alert(m+n);
            //当没有传实参的时候，拿到的n=undefined;m=undefined;
            //undefined+undefined=NaN;
        }
        sum();
    

    • isNaN()判断是否为非有效数字（即判断是否为NaN）；非有效数字（为NaN时）：true；有效数字：false；
  • 算术运算符：+,-,*,/,%
    • 加号"+"：1）字符串拼接（只要不是数字间相加，其余的全部拼接）；2）加法运算:全部是数字之间的加法；3）null+10的值为10；
    • 减号"-",乘号"*",除号"/",取余"%":全部进行数学运算，会默认进行数据转换（按照严格转换Number());
    • 比较：null在与数字进行运算时，会被严格转换为0；undefined参加运算时，会被严格转换成NaN，结果为NaN;
    • 例：("123px"+3)=123px3；("123px"*-/%3)=NaN;
  • 严格比较===:不仅在乎结果，而且在乎数据类型;非严格比较==：只在乎结果，不在乎数据类型；
    //==非严格比较，===严格比较 console.log(123=="123");//结果打印出true; console.log(123==="123");//结果打印出false;因两者数据类型不同；
  • 真假情况：
    • 假：共6个；空字符串“”，0,false,null,undefined,NaN;
      • 6个假中有两个为Number类型：0，NaN；
    • 真：除了假全是真；注：字符串中有空格的情况为真，即"空格";
  2. 隐式数据类型比较：
  • 转化基础：
    • 空数组[]默认通过toString()转化成空的字符串再通过Number转换成0；即[]—》""—》0；
    • null==undefined 为真；
    • null与数字比较为假，即：null==0为假；但是null+10==10为真;
    • undefined+10==NaN;
    • false默认转换为0；true默认转换为1；
  • 数字与其他类型比较
    • 数字==字符串 即：字符串非严格转为数字，如""==0,"123"==123;
    • 数字==布尔值 即：布尔值转为数字，其中（false默认为0，true默认为1）如0==false; 1==true;
    • 数字==undefined 即：结果为假；
    • 数字==对象 即：对象转为数字，[]默认转为0；[12]转为12；如[]==0,[12]==12;均为真；
      • 0==![]为真；即当[]添加!后，先执行！，即转换为数字与布尔值的比较，[]为真，![]则为假；变成数字与布尔值的比较，不再是数字与对象的比较；
    • 总结：数字与任何基本数据类型或引用数据类型非严格计较，其他类型全部转化为数字，再进行比较；
  • 字符串与其他类型比较
    • 字符串与布尔值 即：都转为数字，进行比较。如""==false;"1"==true;
    • 字符串与对象（数组） 即：都转化为字符串进行比较，如 ""==[];"12"==[12];"12"==["12"]均为真；
  • 布尔值与其他类型进行比较
    • 布尔值与对象（数组） 即：都转化为数字，再进行比较；如：false==[];false==[0];false==["0"];true==[1];true==["1"]均为真；
    • 布尔值与对象比较实例：[]==![],![]添加!后，就变成布尔值，即转化为对象与布尔值的比较，二者全部转化为数字，前者[]转化为数字0；后者![]中[]为对象，为真，加非后为假，false转化为数字为0；所以[]==![]为真；
  • null与undefined比较
    • null==undefined为真；
    • null与任何其他类型都不等；
    • null与数字比较为假，即：null==0为假；但是null+10==10为真;
    • undefined与任何其他类型都不等；只与null相等；
  • NaN与任何其他类型都不等，跟自身也不相等；
  • 对象与对象的比较：即[]==[]为假，因为引用数据是对地址的引用，不同的地址比较，不同；
  • 优先级：在数据类型比较中，一旦遇到!，立即或优先进行布尔值的转换；
• DOM节点属性
  • 分为：nodeName,nodeValue,nodeType;
    • 元素节点：nodeName：大写的标签名；nodeValue：null；nodeType:1;
    • 文本节点：nodeName:#text;nodeValue:文本内容；nodeType:3;
    • 注释节点：nodeName:#comment;nodeValue:注释内容；nodeType:8;
    • 文档节点：nodeName:#document;nodeValue:null;nodeType:9;
• 遍历DOM树
  • elementNode.childNodes:获取元素节点下所有的子节点；
    • 兼容性不同：IE7/8浏览器中不存在空白节点；而在firefox/chrome/opera/safari浏览器中存在空白节点；
  • nodeObject.previousSibling/nextSibling：获取本节点的上、下一个同级节点；若无，则返回null；
  • nodeObject.previousElementSibling：返回给定子节点的上一个哥哥元素子节点；
    • 兼容性不好，IE浏览器不支持；
  • 封装兼容函数：获取指定子节点的上一个哥哥和下一个弟弟元素节点；
    • 判断浏览器是否支持node.previousElementSibling;
    • 若不支持，则筛选节点类型nodeType；筛选条件while(pre && pre.nodeType!==1){ pre=pre.previousSibling }；
• 判断对象属性是否存在的两种方法
  • in:属性名 in 对象,存在,返回true,不存在，返回false;
  • ".":对象.属性名,存在，返回属性值，为真；不存在，返回undefined;
  • "hasOwnProperty":obj.hasOwnProperty("xx"),判断xx是否为obj的私有属性；判断普通对象身上的属性是否存在；若存在，则返回true，不存在，返回false;
• 可视区域的宽高
  • 浏览器可视区域的宽高的兼容处理:不包括滚动条；默认17px滚动条；
    • 可视区域的宽度：document.documentElement.clientWidth || document.body.clientWidth;
    • 可视区域的高度：document.documentElement.clientHeight || document.body.cilentHeight;
    • 兼容性问题分析：
      • document.documentElement.clientWidth/Height：除了IE5浏览器不支持，其他的都支持；
      • document.body.clientWidth/Heigth：在IE5浏览器中作为浏览器的可视区域宽高获取；
      • document.body.clientWidth
        • 在IE8以上浏览器中，与document.documentElement.clientWidth差16px，即body元素默认的margin值(8px);
        • 在IE7浏览器中，与document.documentElement.clientWidth差20px,即body元素默认的margin值(10px);
        • 在IE5浏览器中作为浏览器的可视区域宽度获取；document.documentElement.clientWidth失效；
      • document.body.clientHeight
        • 在IE7及以上浏览器中，用于获取body标签的高度；
        • 在IE5浏览器中，作为浏览器的可视区域高度获取；
  • HTML中body标签的可视区域宽高
    • body标签的可视区域宽度：document.body.clientWidth;指body标签的宽度；
    • body标签的可视区域高度：document.body.clientHeight;除IE5以外，均指body标签的高度；
  • window.innerWidth/Height
    • 作用：IE9及以上浏览器支持；与document.documentElement.Width/Height的唯一区别是，它包含滚动条，若页面生成滚动条，则包含滚动条的默认17px，而document.documentElement.Width不包含滚动条；
• children与childNodes的区别
  • children：获取元素节点的所有子元素节点；除IE8浏览器外，获得所有的元素子节点；在IE8中会将注释节点算入，会出错；
  • childNodes:获取元素节点的所有子节点，子节点包含：元素节点，空白文本节点，文本节点，注释节点等；
  • 封装函数：获取指定元素节点的所有元素子节点；判断条件为：判断浏览器的种类；
• 判断浏览器种类
  • window.navigator.userAgent：获取当前浏览器的信息；
  • 通过字符串方法indexOf()来判断浏览器种类；其中谷歌为Chrome，火狐为FireFox；IE浏览器为MSIE 8.0/7.0/10.0；
• DOM操作
  • 节点克隆：node.cloneNode(true/false);
    • node:为被克隆的节点；
    • 返回值为克隆后的新节点；
    • 参数：true:深度克隆，此节点的子孙节点均克隆；false:浅克隆，只复制本节点，不复制子孙节点；false为默认值；
• 元素节点设置属性和获取属性的两种方式及对比
  • .或[]设置和获取属性；设置的自定义属性不显示在标签上；
  • getAttribute/setAttribute:获取和设置属性；设置的自定义属性显示在标签上；
  • 区别：
    • 通过点设置的自定义属性，不能在标签上显示，而setAttribute设置的自定义属性可以在标签上显示；
    • 元素身上已经设置的自定义属性，通过点获取不到，只能通过getAttribute来获取；
  • 注意：二者不能混搭，即通过点设置的自定义属性，不能通过getAttribute来获取；
• 数据类型检测
  • in:用于检测对象上是否存在某属性；
  • obj1 instanceof Object :检测前面的对象是否属于后面的类；
  • typeof xxx：检测xxx所属的数据类型；
  • obj.constructor：拿到所属的构造函数；
• 数据类型转换
  • Number(null)为0，Number(undefined)为NaN;
  • Number("")为0，Number("空格")为0；
  • Number(new Date())为距格林尼治时间的毫秒数；为数字类型，则isNaN()为false;
  • Number(new Date().toString())为NaN;
  • if条件语句中，条件会默认转化为布尔值；
• 类数组：htmlCollection元素集合，arguments：实参类数组；
• arguments.callee()：拿到函数本身；
• 通过setTimeout()来实现setInterval()
  • 需要一个setTimeout()来实现，setInterval()的开始时延迟效果；
  • 需要第二个setTimeout()来实现函数的递归思想，自己调用自己，可以通过arguments.callee来获取函数体自身；

第五周

• git的基本操作：上传文件到Github，从Github上克隆东西；
• 预解释
  • 只有带var和function的进行预解释；
  • 同级作用域下同一个变量名不能重复声明，但可以重新赋值；
  • function进行预解释后，自上而下运行到function定义函数时，跳过不做任何操作；
  • 自执行函数不会提前进行预解释，只有在执行到它时，才开始声明+定义+调用同步完成；
  • 函数中return后面的语句不会进行预解释，而下面的语句会进行预解释，但不会执行；
  • IE10及10以下浏览器中，在条件判断语句中，不管条件是否成立，只要存在function定义函数，就都会进行预解释，声明加定义，当运行到function函数时，跳过不做任何操作；
  • IE11和其他非IE浏览器，不管条件是否成立，if和else语句中的function定义函数会进行预解释，但不同的是，预解释函数只会声明，但不定义，意思是在私有作用域中，预解释会存在私有变量名，但不会赋值，所以在未赋值之前，获取变量名值为undefined，不会向上级作用域查找该变量名；当运行到定义阶段时，就会给变量赋值；
  • 回调函数中，function的定义阶段作为值赋给变量后，不再进行预解释；
• 作用域链：
  • 作用域：函数调用后，会形成一个私有作用域，两个独立的私有作用域之间无联系；
  • 上级作用域：私有作用域对应的堆地址的开辟空间；
  • 作用域与上级作用域组成作用域链；
• 内存及内存释放
  • 堆内存释放：
    • 如var a=[1,2,3],释放a=null;
  • 栈内存包含全局作用域和私有作用域；
    • 全局作用域的形成和释放
    • 私有作用域的形成和释放
• this指向
  • 元素身上的事件触发时，匿名函数中的this指向当前元素；
  • 自执行函数中的this指向window;
  • 回调函数：函数体作为参数传入另一个函数中，此函数称为回调函数；
    • 回调函数中的this指向，赋给另一个函数点前面的对象，如果没有，则为window；
    • 回调函数的几种情况：定时器
• 面向对象
  • 面向对象的oop,oo思想：封装，继承，多态；
  • 设计模式
    • 单例模式：多个独立的对象，对象自身属性的调用，和对象间的属性调用；
      • 缺点：对象需要全部定义，重复设置对象属性，非常麻烦；
    • 工厂模式：封装函数，函数内创建新对象，通过形参赋值，添加属性，来获取不同的对象；
      • 缺点：当对象属性值为函数时，会在创建对象时，形成新的堆地址；内存量会很大，不利于优化；
    • 构造函数模式：精简工厂模式中的创建对象和返回对象两个步骤，其他的没有实质改变；
      • 缺点：与工厂模式类同，每创建一次实例对象，则对象中属性值为函数的情况下，都会形成新的堆地址；
    • 构造函数原型模式：在构造函数基础上，将公共的属性和方法，放在了类函数的原型上，原型只有一个，里面设置的属性名为函数时，只建立一个堆地址，通过实例对象调用公共属性方法；
      • 优点：解决了单例模式的重复创建属性方法的麻烦，解决了工厂模式和构造函数模式的属性名为函数时，堆地址的重复创建问题；
  • 类函数的实质：创建一个函数，返回一个对象；
• 形成的三个条件反射
  • 看到构造函数——存的是私有属性和方法；
  • 看到protoType——存的是公共属性和方法；
  • 看到_ _proto_ _——指的是原型链；
• 数据类型判断
  • 在JavaScript里使用typeof来判断数据类型，只能区分六种，即"number","string","undefined","boolean","object","function";
  • 对于数组，null，对象来说，使用typeof都会统一返回"object"字符串；
  • 要区分数组，null，对象可以使用对象原型上的toString()方法；
    • 对象可以直接调用toString()使用；但数组和null不能直接使用；会出错；
    • 通过Object.prototype.toString.call(xxx);来判断xxx的具体数据类型；
    • 对象返回的结果为"[object Object]";数组返回的结果为："[object Array]";null返回的结果为："[object Null]"
• 原型链
  • 通过__proto__来查找所属类的原型；
  • 通过obj1.isPrototypeOf(obj2)来判断obj1是否在obj2的原型链上；如Function.prototype.isPrototypeOf(Object);
• 函数的三种角色
  • 普通函数：函数的调用执行；需注意的是当函数定义阶段，如果添加返回值，可能会影响实例this的返回，如果返回值为基本数据类型，不会影响this，如果返回值为引用数据类型，函数不再返回this，而是该引用数据类型的地址；
  • 类函数：实例，原型，原型链
  • 普通对象：函数名作为对象名，拥有对象的功能，添加的属性称为静态属性；通过Fn.xx来设置和获取；
  • 三种角色的实际考察题

   <script>
       function Foo() {
           getName=function () { alert(1);};
           return this;
       }
       Foo.getName=function () { alert(2);};//将函数当做对象添加属性名及属性值；
       Foo.prototype.getName=function(){ alert(3);};//将函数作为类，添加公共的属性及方法，只有当函数被作为类调用时，才进行这步；
       var getName=function (){alert(4);};//预解释：只声明不赋值，var getName;
       function getName(){ alert(5);}//预解释：声明加定义，由于名字一样，所以会覆盖var的声明；
       Foo.getName();//结果为2；考察的是将函数作为普通对象使用；
       getName();//结果为4；考察的是全局变量；
       Foo().getName();//结果为1；
        //1）考察函数执行中自己私有作用域中查找不到变量，去上级作用域中查找；并重新赋值；考察作用域链；
       // 2）考察的是Foo()函数执行中的this指向，为window;再进行window.getName()执行；
       getName();//结果为1；此时的全局变量已经被重新赋值，考察全局变量；
       new Foo.getName();//结果为2；考察：先执行Foo.getName，对象属性，在通过new把Foo.getName看作类；
       new Foo().getName();//结果为3；考察：先执行new Foo(),把Foo看作类；然后再查找实例对象中的getName属性，没有去所属类的原型中查找；考察原型链；
   </script>
  

• 基类（Object类）原型上的属性方法
  • obj.hasOwnProperty("xxx")：用于判断obj对象身上是否存在xxx私有属性，一般用于实例对象的判断；
    • 对比in方法，in方法也是判断对象身上是否存在某属性，但in判断属性时，私有和公有属性都会返回true；
  • toString()：输出this所属类的详细信息；通过call来改变this；就可以输出其他数据的详细信息；
    • Object.prototype.toString.call(xxx)：利用call方法，来使用对象原型上的方法；来判断xxx的详细种类；输出结果如"[object Array]"
    • 代码验证：

     console.log(Object.prototype.toString.call(123)) //[object Number]
     console.log(Object.prototype.toString.call('123')) //[object String]
     console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
     console.log(Object.prototype.toString.call(true)) //[object Boolean]
     console.log(Object.prototype.toString.call({})) //[object Object]
     console.log(Object.prototype.toString.call([])) //[object Array]
     console.log(Object.prototype.toString.call(function(){})) //[object Function]
    

  • isPrototypeOf()：判断原型链的关系，如obj1.isPrototypeOf(obj2)则代表，判断obj1是否在obj2的原型链上；如Function.prototype.isPrototypeOf(Object);
• 对象的遍历（for..in）
  • 通过for..in..循环来遍历对象：
    • 遍历对象自定义的私有属性；
    • 遍历对象原型上自定义的公有属性；(不包括constructor属性)
    • 遍历对象所属基类(Object类)上自定义的属性；
• Function类原型上三个改变this执行的属性
  • call(arg1,arg2,arg3,...):改变this指向为arg1,给函数传参数，剩余的参数从左向右依次传参；
  • apply(arg1,ary):改变this指向为arg1,给函数传参，ary为数组，将数组中的元素依次传参；
  • bind(arg1,arg2,arg3,...):函数的预处理，即函数定义阶段预处理，方法与call相同，不过，函数不会立即执行，需要出发执行，多与事件一起使用；
    • 注意：bind不兼容，IE8及其以下浏览器不支持；
  • 若不需要改变this指向，则必须赋值为null；
• 继承
  • call继承：通过在子类构造函数中，调用父类函数，改变父类函数中的this指向为子类的实例对象this，然后调用函数执行，即对this进行赋值；
    • 结果：继承了父类函数的私有属性；即，父类构造函数中进行的操作，在子类函数中再做了一遍；
  • 拷贝继承：封装函数，通过for-in循环遍历父类原型对象，将属性赋值给子类原型对象；
    • 优点：1）for-in循环遍历对象，只会遍历其自定义的私有属性和公有属性，不会遍历其系统属性，即不会遍历父类原型上的constructor属性，这样子类原型上的constructor不会被重新赋值；2）可以在遍历函数类的静态属性，将函数类作为普通对象遍历，然后赋给子类函数，拷贝类函数的静态属性；
    • 缺点：比较麻烦，需要自己封装函数；
  • 原型继承：子类的原型作为父类的实例；实质：通过原型链查找属性和方法；
    • 缺点：1）子类的原型被重新赋值地址，自带的constructor没有了，需要重新设置；2）子类原型上会存在父类的私有属性，所以可以省去call来继承私有属性，可以通过原型链使用父级身上的私有属性；二者取其一，避免重复；
  • 寄生式组合继承：添加中间介质，新建类函数，让类函数的原型等于父类的原型；然后子类原型作为新建类的实例；
    • 优点：可以解决原型继承中的问题，子类的原型上会存在父类的私有属性；但是必须通过call来获取父类私有属性；
    • 缺点：子类原型上的constructor，需要重新设置；

第六周

• 数组的平均值
  • 规则：删除数组中的最大值和最小值，然后剩下的求和取平均值；
  • 方法：sort(),pop(),shift(),join(),eval(),toFixed();
• 类数组
  • 类数组的类型分为两种：htmlCollections(元素集合)，arguments(函数中获取的所有实参组成的数组)；
  • 类数组不能使用数组的方法；
    • 通过数组拿到原型上的方法，可以通过call来改变this，将类数组传入方法中就可以使用该方法，如Array.prototype.slice.call(arguments);
  • 类数组转数组
    • 核心：就是将类数组中的属性复制一份返回一个新的数组，这样新的数组就可以使用数组原型上的属性和方法了；
    • 如何做：通过循环遍历类数组，然后进行赋值；——这种方法太low；
    • 方法：与数组克隆的知识相结合，以及通过call来使类数组调用数组的方法；
      • 运用silce方法：[].slice.call(arguments)或Array.prototype.slice.call(arguments);
      • 运用splice方法：[].slice.call(arguments,0)或Array.prototype.splice.call(arguments,0);兼容性不好，不采用;
      • 不能使用concat方法；
    • 兼容性：
      • 针对于arguments类数组转数组；slice方法所有浏览器都兼容，splice方法IE8及其以下浏览器不兼容；
      • 针对于htmlCollections类数组转数组；slice方法在IE8及其以下浏览器下不支持；splice方法都不支持；
  • 封装类数组转数组的兼容函数
    • 在IE8及其以下浏览器，用循环遍历赋值，IE8以上浏览器，用slice方法；
    • 判断条件：利用try{}catch(e){}来进行条件判断；
      • 因为，两种类数组的兼容性不同，slice方法在arguments转化时，所有浏览器都兼容，而htmlCollections转化时，IE8及其以下浏览器不兼容，会报错；
      • 所以，判断条件只能是用报错捕获try{}catch(e){};
• 浏览器异常捕获
  • 代码：try{...}catch(e){...}finally{...};
  • 解读：
    • 当try里面的语句不报错时，不走catch，走finally内语句；
    • 当try里面的语句报错后，走catch，也finally内语句；
    • catch语句处理错误e
      • 代码：console.log(e);输出结果：打印出黑色的报错代码；
      • 代码：console.error(e);输出结果：打印出红色的报错代码；
      • 代码：throw new Error(e);输出结果，阻断下面代码执行(不会阻断finally中代码执行)，将错误抛出；
      • 总结：finally内的语句不会受影响，都会运行；
• window为Window的实例对象；JSON为window的私有属性；
• JSON对象
  • JSON对象中的属性名也要写成字符串的类型；
  • 属性方法
    • JSON.parse():将json格式的字符串转化为json格式的对象；
    • JSON.stringify():将json格式的对象转化为json格式的字符串；
  • 兼容性：在IE7以下浏览器中，window不存在JSON属性；window.JSON得到的值为undefined;
• 封装兼容性函数：将json格式的字符串转化为json格式的对象；
  • 兼容性：IE7及其以下浏览器，window中JSON属性不存在；
  • 判断条件：window.JSON是否存在，若不存在，返回undefined;
    • 存在：使用JSON.parse(str)获取；
    • 不存在：使用eval("("+str+")");
• sort排序
  • 数组内容为数字，数字的升序降序,ary.sort(function(a,b){ return a-b; })
  • 数组内容为数字开头+汉字或字母，通过内容前面的数字进行排序，即

   ary.sort( function(a,b){
      a=parseInt(a);
      b=parseInt(b);
      return a-b;
    }
  

  • 数组内容为汉字，按照内容汉字的首字母进行排序；

   ary.sort( function(a,b){
      return a.localeCompare(b);//按照从a-z排列；
    }
  

• DOM映射
  • 定义：html页面中DOM结构，跟通过JS获取到的元素集合htmlCollection之间，存在一一对应的关系；
  • 改变DOM结构的方法：appendChild(),insertBefore(),removeChild(),replaceChild();
• 页面绑定数据的两种方式
  • 字符串拼接：将元素标签以字符串的形式进行拼接为一个大的字符串，然后将字符串添加到指定元素内；通过innerHTML+=str；
  • DOM动态插入：创建元素节点，给元素节点插入内容，最后统一将元素节点插入到指定元素节点中；通过appendChild()等；
    • 存在问题：如果创建一个节点，就插入DOM中，会对页面产生影响；不利于优化；
    • 解决方案：创建一个文档碎片，作为所有操作的容器；创建的节点全部插入到此文档碎片节点中；最后统一将文档碎片插入到DOM中，插入后，将文档碎片释放（赋值为null），进行性能优化；
      • 创建文档碎片：var frg=document.createDocumentFragment();
      • 文档碎片释放：frg=null;
• ajax请求
  • 基础的四步；
    • 创建xml对象；
    • 打开文件；
    • 发送请求；
    • 响应请求；
• 表格中元素的获取
  • thead元素：只有一个，获取的为一个元素otHead=oTab.tHead;
  • tbody元素：可以有多个，获取的为一个元素集合atBody=oTab.tBodies;
  • 行tr元素：多个，获取的为一个元素集合aRow=otHead.rows;
  • 列th/td元素：多个，获取的为一个元素集合aCell=otBody[0].rows[0].cells;
• 正则
  • 正则表达式的创建：实例创建和字面量创建；
  • 实例创建和字面量创建的区别；
  • 正则表达式的组成
    • 元字符：特殊含义元字符（18个）和量词元字符（6个）；
    • 修饰符：3个；
  • 正则是针对字符串进行操作的；
  • 正则RegExp类原型上的两个方法：test,exec;
  • 正则RegExp类的私有属性lastIndex属性，也是实例对象的私有属性
  • 正则的两个方法，都是在lastIndex的基础上执行的；默认为0；
    • 正则表达式不添加全局g，lastIndex不会变化，一直为0；
    • 正则表达式中添加全局g后，lastIndex才会改变；两个方法，都会对lastIndex产生影响，二者混合使用时，要避免出错；
  • 使用正则的两个方法时，必须要注意lastIndex属性值，lastIndex属性值绝对了方法开始查找的位置；
  • 正则RegExp类作为普通对象时，身上的私有属性，即静态属性；
    • 代码：RegExp.$1，指的是获取正则表达式中的小分组内容；其中2指的是第二个小分组的内容；
    • 使用条件：
      • 必须正则查找匹配后，才能获取值；否则，为空；
      • 查找匹配的方式：可以是test,exec方法，也可以是match,replace方法；只要进行正则匹配查找，才会有值；
      • 值会被重新赋值，值为最后一次进行匹配查找后的小分组的内容；
  • 重复子项：\1代表第一个小分组的内容；\2代表第二个小分组的内容；
  • 正则只匹配不捕获：
    • 针对小分组；
    • 在小分组括号中添加?:，即只作为提高优先级作用，作为分组效果，只匹配内容，不获取小分组的内容；
    • 代码：var reg=/tiankong(?:\d+)/;;
  • 正则表达式里，中括号和小括号的区别和应用；
• 字符串配合正则使用的方法
  • 四个方法：match,replace,search,split;
  • 主讲：replace();
    • 通过正则来查找被替换的内容（添加全局g）；
    • 通过回调函数的返回值作为待替换的内容；
    • 通过回调函数中的参数来对正则查找的内容进行操作；
• 统计字符串中字符的重复次数的方法；
  • 对象不重名的特性来统计；
  • 重复子项方法来统计；
• 封装urlParse()方法
  • 作用：将url地址中传给服务端的键值对参数，以对象的形式输出；
  • 封装位置：封装到String类的原型上；字符串均可使用；
  • 正则表达式：var reg=/([^?&=]+)=([^?&=]+)/g；
• 封装formatDate()方法
  • 作用：将字符串格式的日期，转化为指定模板的字符串日期；
  • 封装位置：封装到String类原型上；
  • 思想：
    • 使用||来设置默认模板；
    • match()方法：获取原字符串中的日期数字；
    • repalce方法；将日期数字替换模板中的指定位置；
    • 返回字符串，此时实例this就是字符串，所以可以返回字符串；
• 注：类函数原型上的方法中，this为实例对象，但不默认返回this；根据功能返回相应的数据；在自定义公共属性时，如果不设置返回值，则函数执行后返回值为undefined;
• 数组遍历的forEach()和map()方法
  • 在IE8及其以下浏览器都不兼容；不支持forEach和map方法；
  • 封装兼容的方法；