面向对象之闭包及设计模式的简单介绍day06

闭包及设计模式的简单介绍

1.作用域变量搜索规则

在函数内部声明变量不会覆盖上一层作用域中同名的变量

总结作用域的画法:

• (1) 先画出0及级作用域链

  001 先找出有哪些全局的变量 a f1 f2 b
  002 连线(箭头 同级别的变量互相访问)

• (2) 画出1级作用域链

  001 找函数 f1 延伸出一条线

  002 再在这条线上面画出当前函数内部的所有变量

• (3) 重复第二个步骤

作用域:

1. 全局作用域
2. 函数作用域

• 在代码中函数可以创建作用域
• 函数内部又可以声明函数,创建了新的作用域
• 函数内部的函数内部又可以声明函数

作用域的访问规则:

• 01 先在自己的作用域中查找,如果找不到那么就去上一级查找
• 02 在外部作用域中不能访问函数内部作用域

对象:实例属性|方法 原型属性|方法
obj.name

eg:

图形解析:

作用域链的图解

eg:图为上图:

2.闭包的简单介绍

闭包: 封闭+包裹

解决问题:
延长变量的生命周期 (变量创建-销毁)
提供一种间接访问函数封闭空间内部数据的方法.

需求: 需要获取a的值:

• 01 直接返回就可以了? 解决不了.一次性的数据,如果调用多次函数返回的其实并不是同一个数据 +不能修改(设置)变量的值
• 02 闭包解决 (把要访问的数据使用函数包裹返回)

eg:

3.闭包获取数据以及闭包设置数据

eg:

闭包如何获取函数内部的多个数据?

解决方案01

解决方案2

解决方案3

4.闭包的作用

闭包的作用:

• 01 提供一种间接访问(读写)函数内部封闭空间中数据的方法
• 02 延长变量的生命周期
• 03 保护数据让代码干呢更加安全和稳定 有时候在设置数据之前需要校验数据

eg:

5.setTimeout和闭包的执行

定时器:

• setTimeout :一次定时器 ,只会执行一次(延迟执行函数)

参数:第一个参数:要执行的任务 ,第二个参数:间隔时间(单位毫秒 1000ms = 1s)

• setInterval 每隔固定的时间就执行一次

eg:

6.线程与进程等相关概念

队列: 先进先出
栈:先进后出(数据结构 存储结构)

进程: 系统中正在运行的一个应用程序

线程: 是在进程中真正执行任务的部分.一个进程中至少有一条线程,可以有多个线程;
eg:学校-老师

串行执行:一条线程执行多个任务,在执行的时候按照固定的顺序一个接着一个的执行

并发执行:多条线程一起执行多个任务,同一个时间有多个任务在同时执行

多线程:
进程中可以有多条线程
优点:速度快,效率高 缺点:安全性差

主线程: 在进行开启的时候默认会创建一条线程,是主线程

并行和并发的区别:

并发: 多条线程同时执行任务的现象

并行: 同时执行多个任务的能力;

js本身是单线程

局限性: 如果要执行多个任务,只能串行的执行任务

js的主要任务(顺序):

• 01 渲染任务
• 02 脚本中的主要代码
• 03 事件处理任务(定时器事件|点击事件等等)

eg:

7.闭包在点击事件的应用

eg:

我是第1个div
我是第2个div
我是第3个div
我是第4个div
我是第5个div
我是第6个div
我是第7个div
我是第8个div
我是第9个div
我是第10个div

8.函数的特殊性

函数: 可以被调用()

1. 本质是一个对象,因此凡是可以使用对象的地方都可以使用函数,函数可以作为其他函数的参数,也可以作为其他函数的返回值
2. 函数可以创建作用域
3. 函数可以有自己的方法和属性

函数的创建方法:

• 01 函数声明 function 函数名(参数){函数体}

• 02 表达式

  01 var func = function (){} 匿名的函数表达式

  02 var func = function name(){} 命名函数表达式

• 03 构造函数 var func = new Function()

注意:函数有名称:name属性

eg:

9.函数的回调(作为参数的传递)

1. 函数作为其他函数的参数

回调: 回过头来调用

2. 函数是第一型对象(因此可以使用对象的地方都可以使用函数)

• 01 函数可以作为函数的参数
• 02 函数可以作为函数的返回值

3. 回调函数(回调),当我们把某个参数传递给另一个函数的时候,这个函数就称为回调函数

    eg:
    
   

分析代码:

原因: 函数调用方式改变

解决: call | apply

eg:

10.函数作为返回值

eg:
//使用闭包实现一个计数器(在该实例中)
//通过调用返回值(一个函数)

11.自定义函数(惰性函数)

惰性函数定义:

• 特点是在第二次调用函数的时候这个函数才被正确的定义;第一次调用函数的时候只是做了一些初始化的处理
• 特征:可以实现函数的自我更新

注意点:

• 01 实现自我更新之后函数上面的属性会丢失
• 02 把函数赋值给变量或者是对象的方法之后,以变量或者是对象的方法来调用函数的时候,不会实现自我更新

eg:

12.即时函数的补充以及初始化

基本写法[2]:

即时函数组成:

• 001 函数(函数体 + function + 参数 + 返回值)
• 002 ()包住函数
• 003 ()调用函数

其他的写法:! + _ ~

即时函数可以接受参数也可以返回数据

eg:

即时对象初始化

写法:

• 01 提供一个对象{}属性和方法
• 02 在对象中提供一个初始化的方法,主要做一些初始化操作
• 03 在对象外部添加(),包装成一个表达式
• 04 直接使用.init()来进行初始化处理

eg: