【JS】面向对象

面向对象

• 首先，我们要明确，面向对象不是语法，是一个思想，是一种 编程模式
• 面向： 面（脸），向（朝着）
• 面向过程： 脸朝着过程 =》 关注着过程的编程模式
• 面向对象： 脸朝着对象 =》 关注着对象的编程模式
• 实现一个效果
  • 在面向过程的时候，我们要关注每一个元素，每一个元素之间的关系，顺序，。。。
  • 在面向过程的时候，我们要关注的就是找到一个对象来帮我做这个事情，我等待结果
• 例子 🌰： 我要吃面条
  • 面向过程
    • 用多少面粉
    • 用多少水
    • 怎么和面
    • 怎么切面条
    • 烧开水
    • 煮面
    • 吃面
  • 面向对象
    • 找到一个面馆
    • 叫一碗面
    • 等着吃
  • 面向对象就是对面向过程的封装
    • 把做面的过程封装到面馆去完成
    • 吃面就相当于调用这个这个封装好的面馆，来实现做面这个功能
• 我们以前的编程思想是，每一个功能，都按照需求一步一步的逐步完成
• 我们以后的编程思想是，每一个功能，都先创造一个 面馆，这个 面馆 能帮我们作出一个 面（完成这个功能的对象），然后用 面馆 创造出一个 面，我们只要等到结果就好了

创建对象

以面向对象的思维模式来创建对象

工厂函数创建

• 先书写一个工厂函数
• 这个工厂函数里面可以创造出一个对象，并且给对象添加一些属性，还能把对象返回
• 使用这个工厂函数创造对象

// 创建一个工厂函数
function createObj(name){
	//手动创建一个对象
	var obj = new Object();
	// 手动向对象中添加成员
	obj.name = name;
	obj.age = 18;
	obj.gender = 'man';
	//手动返回一个对象
	return obj; 
}
// 使用这个工厂函数创建对象
var ob = createObj('jack');
var oj = createObj('lack');

自定义构造函数创建

• 工厂函数需要经历三个步骤
  • 手动创建对象
  • 手动添加成员
  • 手动返回对象
• 构造函数会比工厂函数简单一下
  • 自动创建对象
  • 手动添加成员
  • 自动返回对象
• 先书写一个构造函数
• 在构造函数内向对象添加一些成员
• 使用这个构造函数创造一个对象（和 new 连用）
• 构造函数可以创建对象，并且创建一个带有属性和方法的对象
• 面向对象就是要想办法找到一个有属性和方法的对象
• 面向对象就是我们自己制造 构造函数 的过程

//先创建一个构造函数 
function Person(name,gender){
	this.age = 10;
	this.name = name;
	this.gender = gender;
}
//使用构造函数创建对象
var oa = new Person('jack','man');
var oz = new Person('rose','woman');

个人总结

• 到了这里，我们就发现了面向对象的思想模式了

1. 当我想完成一个功能的时候
2. 先看看内置构造函数有没有能给我提供一个完成功能对象的能力
3. 如果没有，我们就自己写一个构造函数，能创造出一个完成功能的对象
4. 然后在用我们写的构造函数 new 一个对象出来，帮助我们完成功能就行了

• 比如： tab选项卡

1. 我们要一个对象
2. 对象包含一个属性：是每一个点击的按钮
3. 对象包含一个属性：是每一个切换的盒子
4. 对象包含一个方法：是点击按钮能切换盒子的能力
5. 那么我们就需要自己写一个构造函数，要求 new 出来的对象有这些内容就好了
6. 然后在用构造函数 new 一个对象就行了