JS高级-面向对象编程

JS高级-面向对象编程

1.面向对象编程介绍

1.1两大编程思想

面向过程
面向对象

1.2面向过程编程POP

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

1.3面向对象变编程OOP

面向对象就是把事务分解成一个个对象，然后由对象之间分工与合作。
就好将大象装进冰箱，面向对象的做法就是
先找到对象，并写出这些对象的功能：
1.大象对象
功能：进去
2.冰箱对象
功能：打开、关闭
3.使用大象和冰箱的功能

因此面向对象就是以对象功能来划分问题，而不是步骤

在面向对象编程开发思想中，每一个对象都是功能中心。具有明确分工。
面向对象编程具有灵活，代码可复用，容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性

封装性
继承性
多态性

1.4面向过程和面向对象的对比

面向过程

优点:性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。
缺点:没有面向对象易维护、易复用、易扩展

面向对象

优点:易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，是系统更加灵活、更加易于维护
缺点:性能比面向过程低

2.ES6中的类和对象

2.1对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的：
属性：事物的特征，在对象中用属性来表示
方法：事物的行为，在对象中用方法来表示

2.2类Class

在ES6中新增加了类的概念，可以用class关键字声明一个类，之后以这个类来实例化对象
类 抽象了对象的公共部分，他泛指某一大类
对象 特指某一个，通过类实例化一个具体的对象

面向对象的思维特点

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

2.3创建类

语法：

class Name{
    类体
}

创建实例：

var xx=new Name();

注意：类必须使用new实例化对象

2.4类 constructor 构造函数

constructor()方法是类的构造函数(默认方法),用于传递参数，返回实例对象，通过 new 命令生成对象实例时，自动调用该方法，如果没有显示定义，类内部会自动给我们创建一个 constructor()
constructor 里面的this 指向的是 创建的实例对象

//创建 zh 类
class Zh{
//构造函数
constructor(name){
        this.name=name
    }
}
//利用类创建对象 new
var han=new Zh('小阿涵');
console.log(han.name);

注意

(1)通过class关键字创建类，类名尽量定义首字母为大写
(2)类里面有个constructor函数，可以接收传递过来的参数，同时返回实例对象
(3)constructor 函数 只要 new 生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
(4)生成实例 new 不能省略
(5)最后注意语法规范，创建类 类名后面不要加小括号，生成实例 类名后面加小括号，构造函数不需要加function

2.5类添加方法

//创建 zh 类
class zh{
//
constructor(name){
    this.name=name
}
//1.类里面的所有函数不需要写function
//2.多个函数之间不需要用逗号分隔开
sing(song){
    console.log(this.name + song)
}
}
//利用类创建对象 new
var han=new zh('小阿涵唱');
console.log(han.name);
//方法的调用 同样可以传递参数
han.sing('花海');

3.类的继承

3.1继承

子类可以继承父类的属性以及方法
关键字: extends
语法：子类 extends 父类

//父类
class Father{
    constructor(){

    }
    money(){
        console.log('父类的方法')
    }
}
//子类 Son 继承 父类 Father
class Son extends Father{

}
var son=new Son();
son.money();

3.2 super 关键字

super 关键字用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数

//父类
class Father{
    constructor(x,y){
        this.x=x;
        this.y=y;
    }
    sum(){
        console.log(this.x+this.y)
    }
}
//子类 Son 继承 父类 Father
class Son extends Father{
    constructor(x,y){
        super(x,y);//调用了父类的构造函数
    }
}
var son=new Son(1,2);
son.sum();

super 关键字用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数
但是super 必须在子类的this之前调用

4.ES6中类和对象的三个注意点

1.在ES6中类没有变量提升，所以必须先定义类，才能够通过类实例化对象
2.类里面的共有属性和方法一定要加this使用
3.constructor 里面的this 指向实例对象，方法里面的this指向这个方法的调用者