05 - 闭包&&面向对象

---

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址 点击跳转

---

----------------- 补充动画原理 ----------------------

---

三个取整函数

• Math.ceil() 向上取整 天花板
• Math.floor() 向下取整 地板
• Math.round() 四舍五入

缓动动画原理

• 缓动动画的原理:** 盒子本身的位置 + 步长 (不断变化的，由大变小)**

• 步长：begin = begin + (end - begin) / 缓动系数

基本的缓动动画函数

// 缓动动画
// 谁  目标
function buffer(obj, target) {  
    // 1. 清除定时器    
    clearInterval(obj.timer);    
    // 2. 设置定时器    
    obj.timer = setInterval(function () {        
           // 2.1 求出步长        
           var speed = (target - obj.offsetLeft) / 20;        
           console.log(speed);        
           speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);        
           console.log(speed);        
           // 2.2 设置动画        
           obj.style.left = obj.offsetLeft + speed + 'px';        
           obj.innerHTML = obj.offsetLeft;        
           // 2.3 清除定时器        
           if(obj.offsetLeft == target){           
                  clearInterval(obj.timer);        
            }    
     }, 20);
}

常见的 js访问 CSS 属性

• 在开发中，访问得到css 属性，比较常用的有两种：
  • 点语法
    box.style.width，box.style.height，box.style.top，box.style.left 得到带有单位的属性值，比如：200px； 但是，点语法存在一个很致命的问题，跟在style后面的属性不能由外面传入

var h = 'height'; 
box.style.h = 300 + 'px';

• 下标语法
  利用 [] 访问属性 元素.style[“属性”];
  这种语法的好处就是可以动态的传递参数作为属性
  var h = 'height'; box.style[h] = 300 + 'px';

JS获取CSS的样式

在开发中,我们想要获得css 的样式,通常采用：box.style.top
box.style.backgorundColor等， 但这种方式只能得到 行内样式，而平常用的最多的是页内样式或者外部样式， 那我们如何解决这样的问题？

• 在IE和Opera浏览器
  obj.currentStyle
• 其他W3C标准浏览器
  **window.getComputedStyle("元素", "伪类") **（ 注意：两个选项是必须的， 没有伪类 用 **null **替代 ）
• 兼容写法

function getStyleAttr(obj, attr) {    
    if(obj.currentStyle){ // IE 和 opera        
         return obj.currentStyle[attr];    
    }else {        
         return window.getComputedStyle(obj, null)[attr]; 
    }
}

回调函数

• 在开发中，有很多操作是链式的，下一个操作接着上一个操作执行，那么如何实现这样的行为？** 回调函数。**
  回调函数什么时候调用?
  --> 动画结束的时候调用 ?
  --> 动画什么时候结束?
  ---> 定时器被清除的时候
  --> 定时器被清除时调用回调函数

---

什么是闭包

• 闭包实际上是一种函数，所以闭包技术也是函数技术的一种；闭包能做的事情,函数几乎都能做。

• 闭包技术花式比较多，用法也比较灵活，一般开发人员在学习闭包的时候都会遇到瓶颈，主要是因为闭包技术的分界线并不明显。几乎无法用一个特点去区分

• 当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。

function A(){ 
   function B(){ 
       console.log("Hello XMG!");
   } 
   return B; 
} 
var b = A(); 
b();//Hello XMG!

• 闭包的最大用处有两个：
  一个是可以读取函数内部的变量
  另一个就是让这些变量的值始终保持在内存中。

封闭作用域

• JavaScript的GC机制
  • 在javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收，否则这个对象一直会保存在内存中。
• 封闭作用域
  • 封闭作用域又称值为封闭空间，还有一个昵称叫小闭包，以及匿名函数自调。
  • 基本结构：

// 前面这两种 企业开发中比较常用
(function(){})();
;(function(){})();
+(function(){})();
-(function(){})();
？(function(){})();

• 技法最大目的: 全局变量私有化
• 技术优点：

  • 不污染全局空间！

  • 内部所有的临时变量执行完毕都会释放不占内存。

  • 可以保存全局数据。

  • 更新复杂变量。

作用域链

• 嵌套之间的函数会形成作用域链，每次对变量的访问实际上都是对整条作用域链的遍历查找。先查找最近的作用域，最后再查找全局作用域。如果在某个作用域找到了对量就会结束本次查找过程。

• 思考

  • 对于作用域全局作用域查找快，还是局部作用域查找快？
  • 局部作用域查找要远远大于全局作用域查找的速度。所以高级的程序设计一般是尽量避免全局查找。
  • 每次访问都是对作用域链的一次遍历查找其中全局作用域是最耗费时间的。

• 解决方案：

  • 当前目标使用完以后，在退出作用域之前储存这个目标，就可以在下次取到上一次的目标。

• 补充：

变量的生命周期 任何一个变量在内存中都是一个引用，这个变量是有自己的生命周期。周期结束意味着被销毁。 一个变量在它当前的作用域内被声明那一刻相当于变量出生，整个当前作用域执行完毕并退出作用域相当于变量的寿命终止。

保存作用域

• 保存作用域是一种更高级的闭包技术，如果函数嵌套函数，那么内部的那个函数将形成作用域闭包。简单的说，这种闭包能够达到的好处就是让指令能够绑定一些全局数据去运行；

• 基本结构：

 var A=function(){
     return function(){};
 }

• 优点：
  • 全局数据隐藏化
  • 可以让某个指令运行时候绑定一些隐藏的全局数据在身上。
    一句话： 将数据绑定在指令上运行，让指令不再依赖全局数据。

面向对象

• 对象是什么？

  • 对象就是带有属性和方法的数据类型！

• 任何一门高级语言都要面向对象，JavaScript则是基于原型的面向对象语言，因此，我们的思维要由面向过程转向面向对象：

**面向过程到面向对象**

• 面向对象：

  • 面向对象里面：类和对象

  • 类是对象的抽象，而对象是类的具体实例

  • 一切事物皆对象 JavaScript 万物皆对象

• 举例

对象 女朋友
小白 你有对象了吗？ 泛指 女朋友
昨天陪你打LOL的那个女生是你对象吗？ 特指 某一个女朋友

在座的有喜欢吃香蕉的吗？
你手中那根香蕉熟了吗？ 特指对象（具体的实例）

• 面向对象的特性：

  • 抽象
    抽象就是忽略一个主题中与当前目标无关的那些方面，以便更充分地注意与当前目标有关的方面。

  • 封装
    封装是把过程和数据封闭起来，对数据的访问只能通过开放的接口。

  • 继承
    子类对象继承使用父类的属性和方法。

  • 多态
    多态是指两个或多个属于不同类的对象，对于同一个消息（方法调用）作出不同响应的方式。

构造函数

所有的构造函数有一个特点：首字母大写；

在js中我们可以理解为只要执行以后能够返回新的对象的函数就是构造函数。

• 构造函数技巧的最大目的：创造完全独立的对象，互相之间不影响。

关键词new

• 将一个函数变成对象并返回
• 在这个函数的内部将this指向函数本身。
• new这个关键词实际上能够将任何函数直接变成一个对象。它只有在和构造函数配合的时候才有用，它相当于可以化简构造函数自己创造对象和返回对象的步骤。

构造器(constructor) 和 原型属性 (prototype)

• 在任何一个对象中都有构造器和原型属性，包括原生的对象，比如： Date, Array等；

• constructor 返回对创建此对象的 构造函数的引用

• prototype 让我们有能力向对象添加属性和方法

prototype它的作用就是构造函数的一个共享库；在这个共享库里面存储的所有数据将来都会被所有的新对象公用。 这样大大降低了创建方法的成本。

• 原型共享库是谁使用的？

  • 构造函数使用原型库，所有将来的对象共享这个原型库。
  • 如果把方法都写在构造函数的原型库里面，将来还可以通过原型继续拓展。

• 原型的工作原理？

  • 在网页发布以后，原型的工作会自动做以下两件事情：
    第一：自动将原型库中的所有内容都放在将来的对象身上；
    第二：如果共享库中的内容发生变化会自动更新所有对象上的数据。

• 注意：

  • 在面向对象的写法当中，原型的共享库里面所有的方法中的this默认情况都会指向将来的对象。

  • 只有在两个情况会发生变化，那么这两个情况一定要检查作用域：
    第一：如果在事件的作用域中，this的指向会变成事件源。
    第二：如果在定时器的作用域中，this的指向会变成window。

  • 解决方案：备份指针

面向对象匹配案例

• 面向对象 - 五彩绣球案例 点击查看
• 面向对象 - Tab选项卡案例 点击查看