js下 Day13、面向对象

一．对象

什么是对象: 一组无序的属性集合

创建对象两种方式:

对象字面量: var obj = {}

实例化: var obj = new Object()

对象取值:

**[] ( ** 中括号)：变量、数字等不规范的属性名

.（点） : 符合命名规范的属性名

删除对象的属性: delete 对象.属性名

遍历对象**:for(var key in obj){}**

#二．作用域

全局作用域: 全局变量拥有全局作用域,可以在任何地方使用

局部作用域: 局部变量拥有局部作用域,只能在定义的函数内使用

变量提升: 使用var关键字声明的变量会将（var 变量名)提升到当前作用域最顶端,赋值留在原地

函数提升: 函数声明会提升到当前作用域的最顶端

变量提升 > 函数提升

#三．this指向

this在JS中指的是执行上下文环境对象

全局中的this	Window
函数中的this	直接调用 => window
事件处理函数中 => 事件源
对象调用 => 对象
构造函数中的this => 实例化对象

总结: 函数中的this，谁调用指向谁

#四．面向对象

#1. 什么是面向对象

面向对象是一种程序设计模式(编程思想),将对象作为基本单元,将程序和数据封装其中

#2. 为什么使用面向对象

可重用、可维护性好、可扩展、灵活性好

#3. 工厂模式

为什么使用工厂模式: 解决了创建多个相似对象(结构相同)的问题

#4. 构造函数模式

为什么使用构造函数模式: 解决了对象识别问题,区分普通函数和构造函数

构造函数必须通过new运算符来调用

构造函数首字母大写(不是必须,一种规范,用于区分构造函数和普通函数)

#5. 原型模式

在原型对象中定义共有的属性和方法

为什么使用原型模式: 解决了多个对象具有相同的属性或方法被重复创建的问题

prototype => 构造找原型

constructor => 原型找构造

proto => 实例找原型

构造函数写属性,原型对象写方法

#6. 框架搭建

面向对象三部曲:

1. 构造函数

2. 原型对象

3. 实例化

#五．案例--选项卡三级联动

效果图:

功能思路分析:

1. 数据分析

\1. 对象结构的数据，使用for in 遍历

\2. 属性名是数字，使用[]取值

\3. 省市区的数据没有嵌套，是同级关系，使用code属性关联

2. 省份渲染

\1. 通过 cityData.city拿到省份数据,对象结构用for in遍历

\2. 根据属性名渲染字母分类

\3. 每个分类下是数组，使用map().join(“”) 嵌套渲染省份

\4. 渲染时将省份编码code，通过自定义属性绑定在标签上

3. 城市渲染

1.通过事件委托给省份盒子绑定点击事件

2.点击省份时，拿到标签上的自定义属性code（getAttribute()）

3.对象数据用for in渲染

4.渲染时将城市编码code，通过自定义属性绑定在标签上

5.调用选项卡切换方法,传递城市盒子的下标，显示城市盒子

4. 区域渲染

1.通过事件委托给城市盒子绑定点击事件

2.点击城市时，拿到标签上的自定义属性code（getAttribute()）

3.对象数据用for in渲染

4.渲染时将区域编码code，通过自定义属性绑定在标签上

5.调用选项卡切换方法,传递区县盒子的下标，显示区县盒子

5. 选项卡切换

\1. 给导航大盒子绑定点击事件，使用委托委托实现选项卡效果

\2. 封装一个公用的且、切换方法

3. 让上一个导航和内容盒子去掉类名(classList.remove)，修改初始下标为当前下标(传参得到当前下标)，让当前下标的导航和内容盒子加上类名( classList.add() )

#六．今日小结

**1. ** 对象

对象取值:

**[] ( ** 中括号)：变量、数字等不规范的属性名

**. ** （点） : 符合命名规范的属性名

遍历对象**:for(var key in obj){}**

**2.this ** 指向

全局中的this指向window

函数中的this:

直接调用，this 指向window。

在事件处理函数中，this 指向绑定事件的元素。

在对象方法中，this指向调用该方法的对象。

构造函数中, this指向实例化的对象

总结:谁调用指向谁

**2. ** 面向对象

面向对象三部曲: 构造函数原型对象实例化

prototype => 构造找原型

constructor => 原型找构造

proto => 实例找原型

！！！牢记框架

#七．作业 -- 软键盘拖拽

效果图:

功能思路分析:

必做功能点:

\1. 点击文本框时显示键盘

\2. 点击X 或页面其他区域隐藏键盘

\3. 键盘拖拽

\4. 点击键盘中按键将对应内容输入到文本框

扩展功能点:

\1. shift按键的大小写转换

\2. 清空按钮清空文本框内容