JS面向对象编程（OOP）

什么是JS面向对象编程（OOP）？

简单点理解：用对象的思想去描述问题和解决问题写代码，就是面向对象编程。

面向对象编程是一种设计模式，JavaScript 是支持且具备面向对象编程的语言。

1. 实例分析

下面这张图就是我们抽象成一个对象，紫色部分就是车的属性，黄色部分就是修改车的方法； 把他们集合到一个构造函数内，就是这样的

function Car(name, color, structure){
	this.name = name;
	this.color = color;
	this.structure = structure;

	this.setName = function (name){
		this.name = name
	}
	
	this.getName = function (){
		return this.name;
	}
}
let car1 = new Car('保时捷', '红色', 'SUV');
console.log(car1.getName()) // 输出 ===> 保时捷

初代造车对象呢，不具备修改颜色，也就是我造的都是红色，你买不到别的颜色，车企肯定不想这样，那你制造商就得想办法解决一下，所以我决定升级一下继续研发，来个车间给我改颜色

Car.prototype.setColor = function (color){
	this.color = color
};
Car.prototype.getColor = function (){
	return this.color;
};
car1.setColor('绿色')
console.log(car1.getColor()) // 输出 ===> 绿色

现在呢问题又来了，说你生产的都是suv，能不能给我提供一下 轿车的车架，可是我厂房不够啊，这可咋整扩建吧！于是我们开始扩建了我的车架厂房，哈哈 身为甲方我们是真孙子啊

// 车对象升级图纸
function Carupgrade(){

	this.setStructure = function (structure){
		this.structure = structure
	}
	
	this.getStructure = function (structure){
		return this.structure;
	}
}
// 继承原车的基础
Carupgrade.prototype = new Car('保时捷', '红色', 'SUV');

// 创建厂房2
let car2  = new Carupgrade();

// 修改车架车间 
car2.setStructure('轿车')

// 修改完成看看你这车啥样的
console.log(car2.getName(), car2.getColor(), car2.getStructure()) // 输出 ===> 保时捷 红色 轿车

有了这些厂房基础，你不就想造啥车造啥车，媳妇再也不担心会坐在自行车上哭了。（捂脸偷笑，啪啪啪，醒一醒）*

2. 面向对象编程思维方式

• 抽象： 从问题域中抽象出对象和类

  实际开发中，分析问题实体与概念，将他们抽象成对象和类。

  例如：一个车（概念），车名称（属性）、车颜色（属性），然后造车（方法）。

• 封装： 通过封装隐藏内部细节

  隐藏内部细节，应该考虑哪些方法和属性应在对象内部，哪些在对象外部使用。 一般我们将对象内部状态相关的属性和可能会改变对象内部状态的方法应该封装起来。

  例如：我们车颜色的材料（属性），和喷漆的方式（方法），隐藏起来不对外提供。

• 继承： 利用继承构建类层次结构

  如果发现多个类之间有共同的属性和行为，可以考虑使用继承来构建类层次结构。

  例如：车可以分为更多的型号，他们中很多属性、方法是相同的，你当然可以继承其他车属性和方法，来重新造一个不一样的车。

• 多态： 运用多态实现灵活的行为

  多态是指同一个行为在不同的对象中有不同的实现方式。在面向对象编程中，多态主要通过方法重（Override）和方法重载（Overload）来实现。

  方法重写 是指在子类中重新定义父类中已经存在的方法，使得子类对象在调用该方法时执行子类中定义的实现。

  例如，车颜色、我们可以重写这个颜色初始值，根据不同类型的车来实现不同喷漆的颜料比例。

  方法重载 是指在同一个类中定义多个同名的方法，但是这些方法的参数列表（参数的数量、类型或顺序）不同。 例如，在一个 “数学计算类” 中，可以定义一个 “加法” 方法，它可以接受两个整数进行加法运算，也可以重载这个方法，让它接受两个浮点数进行加法运算。

在JS的世界里一切都是对象，如果你看过JS什么是对象，那么你会发现数组、字符串、对象、undefined、function、他们都是对象的集合体，或者是对象的一种表现形式，但是你没有总结这些问题的重复性，和可利用性，代码冗余就变成了你项目中的常见特点，现在框架都是采用构造函数的方式写的，封装，继承，你独立写的部分就是多态，这么说你是不是对面向对象有清晰的认识了，

如果每一个造车的部门都要新建所有的车间，那么你就需要更多的土地建厂，但是你会发现重复的车间太多了，他们产能过剩已经超出你的需求，这就是我们为啥要利用构造函数，来写一个面向对象编程了。

ES6 构造函数语法糖 class 类

class 就是省级版构造函数。class 的继承 extends 就是构造函数的原型链的继承。 基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样。（这句话我引用阮一峰大神的文章原话，代码时我自己的以上面es5写法一对一替换啊）

class Car {
	constructor(name, color, structure) {
	    this.name = name;
	    this.color = color;
	    this.structure = structure;
	}
	
	setName (name){
		this.name = name
	}
	
	getName (){
		return this.name;
	}
}

let car1 = new Car('保时捷', '红色', 'SUV');

console.log(car1.getName()) // 输出 ===> 保时捷

然后我们使用prototype为类方法新增方法，跟es5是一样的

Car.prototype.setColor = function (color){
	this.color = color
};

Car.prototype.getColor = function (){
	return this.color;
};

car1.setColor('绿色')
console.log(car1.getColor()) // 输出 ===> 绿色

最后咱们看看继承吧

// es6 就不用prototype 或其他方法继承了 extends就可以直接继承
class Carupgrade extends Car {
	constructor(name, color, structure) {
	    super(name, color, structure); // 调用父类的constructor(name, color, structure)
	    // super 这个是必须的他继承父类的属性方法啊，你要啥弄啥就行
	}
	
	setStructure (structure){
		this.structure = structure
	}
	
	getStructure (structure){
		return this.structure;
	}
}

let car2  = new Carupgradenew('保时捷', '红色', 'SUV');
car2.setStructure('轿车')

console.log(car2.getName(), car2.getColor(), car2.getStructure())

所有的方法都继承了，而且简洁了是吧！关注我后续将会有更多更好的内容分享。