JaveScript第四周知识点

第一天知识点

1. animate.css文件是一个动画库：放着很多动画
   1. 如何使用：
      1. 打开百度：搜索animate.css得到网址
      2. 下载
      3. 引入此文件
      4. 挑选动画，把class放到元素上
      5. 并且记得设置上animation-duration：3s；执行时长
      6. 需要根据不同的动画，设置不同的初始效果
2. 滚动轮播：布局不同，动画方式也不同
3. swiper插件：专门的一个轮播插件，提供了你HTML/CSS/JS，我们只需要复制。
   1. 打开百度：搜索swiper
   2. 选你自己喜欢的

第二天知识点

1. object:
   1. 对象-Array/String/RegExp/Date...
   2. 对象具有属性和方法都是预定义好的
   3. JS是基于原型的面向对象语言
   4. 开发方式：
      1. 面向过程：开始-->结束，一致的开发方式都是面向对象
      2. 面向对象：对象（属性和方法）.js
      3. 万物皆对象
      4. 何时使用：任何操作都要封装在一个对象中
      5. 为什么：所有的数据都必须包含在一个事物之中才有意义
   5. 封装/创建/定义：封装自定义对象
      1. 直接量方式：var obj={"属性名":属性值，"方法名"：function（）{操作}
      2. 强调：
         1. 属性名和方法名的""可以不加
         2. 访问对象的属性和方法：obj.属性名：===obj["属性名"];obj.方法名()；===obj"方法名";
      3. 建议使用.去访问对象的属性和方法
      4. JS中一切都是对象，除了undefined和null，一切对象的底层都是hash数组
      5. 访问不存在的属性返回的是undefined
      6. 可以随时随地的添加新属性和新方法：obj.属性名=新值；obj.方法名=function(){};
      7. 如果希望遍历出对象所有东西，必须使用for in，obj[i]才能拿到
      8. 如果希望在对象的方法里，使用对象自己的属性，写为this.属性名
   6. this的指向
      1. 单个元素绑定事件，this-->这个元素
      2. 多个元素绑定事件，this-->当前元素
      3. 定时器中的this-->window
      4. 箭头函数this-->外部对象
      5. 函数中this-->谁在调用此方法，this就是谁
      6. 构造函数之中this-->当前正在创建的对象
2. 预定义构造函数方式：
   1. var obj=new Object()；需要自己后续慢慢添加属性和方法
   2. obj.属性名=新值；
   3. obj.方法名=function(){};
   4. 后面两个有个缺陷：一次只能创建一个对象，适合创建单个元素的时候
3. 自定义构造函数：
   1. 创建自定义构造函数：function 类名(){this.xxx=xxx;} 千万不要在里面创建方法，每个对象都会创建出一个相同的方法
   2. 调用构造函数创建对象：var obj=new 类名（实参，...）;
   3. 面向对象优点：
      1. 所有的属性和方法都保存在一个对象之中
      2. 每个功能要分开写，便于后期维护
      3. 铁锁连舟：一个方法触发多个方法联动
      4. 缺点：对新手不友好，尤其this的指向问题
4. 继承：父对象的成员(属性和方法)，子对象可以直接使用
   1. 为什么要继承：代码重用，提高代码的复用性，节约内存空间，提升网站性能
   2. 何时继承：只要多个子对象公用的属性和方法，都要集中定义在父对象之中
   3. 如何找到原型对象：保存了一类子对象共有属性和共有方法
      1. 对象名.__ proto__;必须先有一个对象
      2. 构造函数名.prototype；构建函数名几乎人人都有，除了Math和window，new构建函数名();
   4. 两链一包： 作用域链和原型链和闭包
      1. 每个对象都有一个属性：__ proto__,可以一层一层的找到每一个人的原型对象，形成的链式结构，就叫做原型链
      2. 最顶层的是object的原型，上面放着方法tostring，人人都可以使用tostring，JS万物皆对象
   5. 有了原型对象，可以设置共有属性和共有方法
      1. 原型对象.属性名=属性值；
      2. 原型对象.方法名=function(){}

第三天知识点

1. 面向对象：
   1. 继承：
      1. 判断是自有还是共有：
         1. 判断自有：obj.hasOwnProperty("属性名")；如果结果为true，说明是自有属性，如果结果为false，有两种可能说明是共有，也可能是没有
         2. 判断共有：if(obj.hasOwnProperty("属性名")){自有}else{if("属性名"in obj){共有}else{}}
      2. 修改和删除：自有和共有
         1. 自有：修改：obj.属性名=新属性值；删除：delete obj.属性名；
         2. 共有：修改：原型对象.属性名=新属性值；删除：delete 原型对象.属性名;
      3. 如何判断X是不是一个数组：千万别用typeof();只能检查引用类型，如果检查引用类型得到的结果都是一个object
         1. 判断x是否继承自Array.Prototype:
         2. 判断x是不是由Array这个构造函数创建的x instance of Array
         3. Array.is Array(x);ES5新增的方法，只有数组可以使用
         4. 输出(对象的字符串)形式：在object的原型上保持着最原始的toString
      4. 实现自定义继承:
         1. 两个对象之间设置继承：子对象.__ proto__=父对象
         2. 多个对象之间设置继承：构造函数名.prototype=父对象
   2. class关键字：简化面向对象(封装，继承，多态)
   3. Function：闭包
      1. 作用域：
         1. 全局：随处可用，可以反复使用，缺点：容易被污染
         2. 函数：只能在函数调用时内部可用，不会污染，缺点：一次性的会自动释放
      2. 函数执行原理：
         1. 程序加载时：创建执行环境栈(ECS)：保存函数调用顺序的数组；首先压入全局执行环境(全局EC)；全局Ec引用着全局对象window
         2. 定义函数时：创建函数对象：封装代码段；在函数对象之中有一个scope(作用域)属性：记录着函数来自的作用域是哪里；全局函数的scope都是window
         3. 调用前：在执行环境栈(ECS)压入新的EC(函数的EC)；创建出活动对象(AO)：保存着本次函数调用时用到的局部变量；在函数的EC中有一个Scope chain(作用域链)属性引用着AO，AO有一个parent属性是函数的scope引用着的对象
         4. 调用时：正是因为有前三步，才带来变量的使用规则：优先使用自己的，自己没有找全局，全局没有就报错
         5. 调用完：函数的EC会出栈，没人引用AO，AO自动释放，局部变量也就释放了
   4. 闭包：希望保护一个可以(反复使用的局部变量)的一种词法结构，其实还是一个函数，只是写法比较特殊
      1. 何时使用：希望保护一个可以反复使用的局部变量的时候
      2. 如何使用：
         1. 两个函数进行嵌套
         2. 外层函数创建出受保护的变量
         3. 外层函数return出内层函数
         4. 内层函数再操作受保护变量
      3. 强调：
         1. 判断是不是闭包：有没有两个函数嵌套，返回了内层函数，内层函数再操作受保护函数
         2. 外层函数调用了几次，就创建几个闭包，受保护的变量就有几个副本
         3. 同一次外层函数调用，返回的内层函数，都是在操作同一个受保护的变量
      4. 缺点：受保护的变量，永远都不会被释放，使用过多会导致内存泄漏，不能多用
   5. 防抖节流：三件事需要防抖节流

      1. elem.onmousemove-鼠标移动事件

      2. iput.oninput-每次输入/改变都会触发

      3. onresize-每次窗口改变大小都会触发