黑马Pink老师的javaScript进阶面向对象ES6教程:
https://www.bilibili.com/video/BV1Kt411w7MP?p=1
本文在原教程的基础上对目录结构进行了排序和裁剪。针对视频中的讲解、案例、PPT和源码材料作了一些总结,仅用于个人复习以及学习交流分享。
目录
1. 面向对象编程
1.1 两大编程思想
- 面向过程
- 面向对象
1.2 面向过程编程 POP(Process oriented programming)
面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。
将大象装进冰箱:
- 打开冰箱门
- 把大象装进去
- 关上冰箱门
面向过程,就是按照我们分析好了的步骤,按照步骤解决问题。
1.3 面向对象编程 OOP(Object Oriented Programming)
面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。
将大象装进冰箱:
-
大象对象
- 进去
-
冰箱对象
- 打开
- 关闭
-
使用大象和冰箱的功能
面向对象是以对象功能来划分问题,而不是步骤。
面向对象的特性:
- 封装性
- 封装性
- 多态性
2. ES6中的类和对象
面向对象更贴近我们的实际生活,可以使用面向对象描述现实世界事物。但是事物分为具体的事物和抽象的事物。
面向对象的思维特点:
- 抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模板)
- 对类进行实例化,获取类的对象
面向对象编程我们考虑的是有哪些对象,按照面向对象的思维特点,不断的创建对象,使用对象,指挥对象做事情。
2.1 对象
现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如,一本书、一辆汽车、一个人可以是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。
在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
对象是由属性和方法组成的:
- 属性:事物的特征,在对象中用属性来表示(常用名词)
- 方法:事物的行为,在对象中用方法来表示(常用动词)
2.2 类 class
在 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,之后以这个类来实例化对象。
类抽象了对象的公共部分,它泛指某一大类(class)
对象特指某一个,通过类实例化一个具体的对象。
2.3 创建类
// 语法
class name {
// class body
}
// 创建实例
var xx = new name();
注:类必须使用new实例化对象
2.4 类中的constructor构造函数
constructor() 方法是类的构造函数(默认方法),用于传递参数,同时返回实例对象。通过 new 命令生成对象实例时,自动调用该方法。如果没有显式定义,类内部会自动给我们创建一个constructor() 。
// 语法
class Person {
constructor(name, age) {
// constructor 构造方法或者构造函数
this.name = name;
this.age = age;
}
}
// 创建实例
var ldh = new Person('刘德华', 18);
var zxy = new Person('张学友', 20);
console.log(ldh);
console.log(zxy);
2.5 类添加方法
// 语法
class Person {
constructor(name,age) {
// constructor 构造器或者构造函数
this.name = name;
this.age = age;
}
say() {
console.log(this.name + '你好');
}
}
// 创建实例
var ldh = new Person('刘德华', 18);
ldh.say();
注:方法之间不能加逗号分隔,同时不需要添加function关键字。
3. 类的继承
3.1继承
继承:子类可以继承父类的一些属性和方法。
//语法
class Father{
// 父类
}
class Son extends Father {
// 子类继承父类
}
实例:
class Father {
constructor(surname) {
this.surname= surname;
}
say() {
console.log('你的姓是' + this.surname);
}
}
class Son extends Father{
// 这样子类就继承了父类的属性和方法
}
var damao= new Son('刘');
damao.say();
3.2 super 关键字
super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数。
案例:调用父类的构造函数
class Person {
// 父类
constructor(surname){
this.surname = surname;
}
}
class Student extends Person