【JavaScript进阶】面向对象编程

---

面向对象

本章主要学习：

1. 什么是面向对象？

2. 类和对象的关系？

3. 如何使用class创建自定义类？

4. 什么是继承？

---

一、两大编程思想

01. 面向过程编程

• 分析出解决问题所需要的步骤，然后用函数把这些步骤步步实现，使用的时候再一个一个的依次调用就可以了
• 优点：性能比面向对象高

02. 面向对象编程

• 面向对象编程，即Object Oriented Programming（OOP）

  • 是把事务分解成为一个个对象，对象之间进行分工与合作，每个对象都是功能中心，具有明确分工

• 面向对象的特性：

  • 封装性
  • 继承性
  • 多态性

• 易维护、易复用、易扩展

---

二、面向对象的思维特点——抽象

• 抽取对象（抽象）共用的属性和行为组织（封装）成一个函数（模板）
• 对类进行实例化，获取类的对象

面向对象编程我们考虑的是有哪些对象，按照面向对象的思维特点，不断的创建对象，使用对象，指挥对象做事情

01.对象

• 对象是一组无序的相关属性和方法的集合，所有的事物都是对象（万物皆对象）

• 对象是由属性和方法组成的：

  • 属性：事物的特征，在对象中用属性来表示（常用名词）
  • 方法：事物的行为，在对象中用方法来表示（常用动词）

02.类class

• 在ES6中新增了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象

• 区别

  • 类：抽象了对象的公共部分，泛指某一大类
  • 对象：特指某一个，通过类实例化一个具体的对象

---

三、类

01.创建类

• 语法：

  • 使用class关键词创建一个类，类名后面不需要加小括号
  • 必须使用new关键词创建一个实例对象，创建时，类名后要添加小括号

  //这里创建一个Person类
  class Person{						//创建一个类，类名后面不需要加小括号
      
  	constructor(uname,age){
          
          this.uname = uname;			//用this指向 new创建的具体对象
          this.age = age;				//uname和age是对象的属性，接受实参的值，并赋值 
      }
      say(){							//在类里面添加方法，直接写方法名
  		console.log("Hello!");		
      }
  }
  
  //这里利用类创建一个实例化对象
  var person1 = new Person("Ruovan",24);//利用类创建一个对象，必须使用 new，类名后要添加小括号，用于传入实参。
  
  console.log(person1.uname);			//	Ruovan
  console.log(person1.age);			//	24
  

• 关于类的构造函数constructor

  • 直接写函数名，不需要写 function
  • 接收传递过来的参数，返回一个实例对象
  • 使用 new 生成实例对象时，会自动调用这个构造函数
  • 必须有这个构造函数，如果没有，那么类也会自动生成

---

02.类的继承

• 语法：extends、super

  class Father{
      constructor(x,y){				//父类的构造函数
          this.x = x;
          this.y = y;
      }
      sum{								//父类有一个sum方法
          console.log(this.x + this.y);	//注意这里的 this 仅仅指向父类，
      }
  }
  
  //创建一个子类Son，继承父类Father，可以使用父类的一些属性和方法
  class Son extends Father{			//通过 extends 来继承一个父类
      
      constructor(x,y){				//子类的构造函数
          
          super(x,y);					//相当于调用了父类的构造函数来赋值，这样才可以使用父类的方法
          							//要使用 super， 必须在子类 this之前调用
          							//必须先调用父类的构造方法，再使用子类的构造方法
          
          this.x = x;					//这里的this指向子类，无法使用父类中具有this的方法
          this.y = y;
          
         
      }
      substruct(x,y){					//子类自己的方法
          console.log(this.x - this.y)
      }
      
  }
  
  var son1 = new Son(3,1);			//创建一个 son1对象
  
  son1.sum();							//调用父类的方法
  son1.substruct();					//调用子类的方法
  

• 关于继承中的方法

  1. 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
  2. 继承中，如果子类里面没有就去查找父类有没有这个方法，如果有，就执行父类的这个方法（遵循就近原则）
  3. 但可以通过super主动调用父类里面的方法：super.方法()

---

三、类和对象

• 在ES6中类不会进行变量提升，所以必须先定义类，再实例化对象

• 类里面的【共有的属性和方法】，一定要加 this 使用

  <button>点击</button>
  
  
  var that;
  class Person{		
  	constructor(uname,age){
        	//属性和方法全都要加 this ，这里的 this指向 创建的实例对象
          that = this;		//把 this复制给 that,这个 that也指向创建的实例对象
          this.uname = uname;
          this.age = age;
          this.say();				
          
          this.btn = document.querySelector("button");	
          this.btn.onclick = this.say;	//这里是点击了才调用方法函数，所以不需要加小括号
      }
      
      
      say(){
  		console.log(this);		//这个方法里面的 this指向 button，因为是 button点击了才调用这个方法
          console.log(that);		//通过上述的 把 this 复制给 that,可以解决这个问题，这个 that 指向实例对象
      }
      work(){
          console.log(this);		//这个方法里面的 this 指向的是实例对象，因为是实例对象调用了这个方法
      }
  }
  

• 关于 this 的指向

  • constructor里面的this指向实例对象
  • 方法里面的this指向这个方法的调用者

---