【JavaScript进阶】面向对象编程
面向对象
本章主要学习:
-
什么是面向对象?
-
类和对象的关系?
-
如何使用
class
创建自定义类? -
什么是继承?
一、两大编程思想
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(); //调用子类的方法
-
关于继承中的方法
- 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
- 继承中,如果子类里面没有就去查找父类有没有这个方法,如果有,就执行父类的这个方法(遵循就近原则)
- 但可以通过
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
指向这个方法的调用者