面向对象编程

有两大编程思想：面向过程和面向对象；

面向过程编程POP(Process-oriented programming)

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

即将大象装进冰箱，从面向过程来看，需要打开冰箱门、装进去大象、关上冰箱门

面向对象编程OOP(Object Oriented Programming)

面向对象即把事务分解成为一个个对象，然后由对象之间分工与合作；是以对象功能来划分问题，而不是步骤；在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工；

面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目；

具有封装性、继承性、多态性等特性；

即将大象装进冰箱，从面向对象来看，要先找出对象，并写出 这些对象的功能；如大象对象，冰箱对象；

面向对象的思维特点：

  1、抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模板）；

  2、对类进行实例化，获取类的对象

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

ES6中的类和对象

对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，如字符串、数值、数组、函数等；

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

 属性：事物的特征，在对象中用属性来表示（名词）；

 方法：事物的行为，在对象中用方法来表示（动词）；

类(class)

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

        类和对象关系：

                类抽象了对象的公共部分，它泛指某一大类（class）；

                对象特指某一个，通过类实例化一个具体的对象；

创建类

class 类名 { // 此处类名不要加括号
 
// 类中的函数体
 
}

创建实例

var xx = new 类名(); // 类必须使用new实例化对象

类constructor构造函数

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

 <script>
        // 创建类
        class Person {
            constructor(uname, sex, age) {
                this.uname = uname;
                this.sex = sex;
                this.age = age;
            }
        }
        // 创建实例对象
        var xm = new Person('小明', 'female', 19);
        var xs = new Person('小衫', 'male', 18);
        console.log(xm, xs);
 </script>

输出结果如下

image.png

类中添加方法

        类中所有函数均不需要写function，且多个函数方法之间不需要添加符号分隔；

 <script>
        // 创建类
        class Person {
            constructor(uname, sex, age) {
                    this.uname = uname;
                    this.sex = sex;
                    this.age = age;
                }
                // 类中添加方法
            Say() {
                console.log('我叫' + this.uname, '性别' + this.sex, '今年' + this.age);
            }
        }
        // 创建实例对象
        var xm = new Person('小明', '女', 19);
        var xs = new Person('小衫', '男', 18);
        console.log(xm, xs);
        // 通过实例调用方法
        xm.Say(); // 我叫小明 性别女 今年19
        xs.Say(); // 我叫小衫 性别男 今年18
    </script>

继承

继承是指子类可以继承父类的一些属性和方法，语法如下；

class Father {
  // 父类
}
class Son extends Father {
  // 子类继承父类
}

看下面一个错误示例：

<script>
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        class Son extends Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
        }
        var son = new Son(1, 2);
        son.sum();
</script>

运行该代码，会报如下错误：

Uncaught ReferenceError: Must call super constructor in derived class 
before accessing 'this' or returning from derived constructor
at new Son (ObjTsting.html:24:17)

这是因为子类中无法使用父类的sum方法，在父类方法中this.x和this.y中的this指代的是父类，而子类中传过来的参数中，this.x和this.y指代的是子类，所有会报错；

那要如何继承父类中的参数和方法呢？此时则需要super关键字~

super关键字

它用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数，上述例子就可以改造成：

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

继承是指若子类有属性和方法，则用子类的属性和方法，若无，则继承父类方法；

子类在构造函数中使用super，必须放到this前面（即必须先调用父类的构造方法，再使用子类的构造方法）；

<script>
        class Father {
            constructor(uname, sex) {
                this.uname = uname;
                this.sex = sex;
            }
        }
        class Son extends Father {
            constructor(uname, age) {
                super(uname); // 调用父类的构造函数(uname)
                this.age = age; // 定义子类独有的属性
            }
        }
</script>

类里面共有的属性和方法一定要加this使用；构造函数中的this 指向的是创建的实例对象；谁调用类中的方法，this就指向谁；

在ES6中类没有变量提升，所以必须要先定义类，才能通过类实例化对象；

静态属性

用static表示，静态属性只能通过类来使用；

class Phone{
  // 静态属性
  static name = '手机'
  static change() {
     console.log('手机改变人类生活');
  }
}
let phone = new Phone();
console.log(phone.name); // undefined
console.log(Phone.name); // 手机
phone.change(); // Uncaught TypeError: phone.change is not a function
Phone.change(); // 手机改变人类生活

构造函数和原型

构造函数和原型是在ES6出来之前存在的，后被类取代；在ES6之前，对象不是基于类创建的，而是用一种称为构造函数的特殊函数来定义对象和它们的特征。

创建对象可通过如下三种方式：

    1、对象字面量

    2、new Object()

    3、自定义构造函数

<script>
        var obj1 = {}; // 通过字面量创建对象
        var obj2 = new Object(); // 利用new创建对象
        function Obj3(uname, age) { // 利用构造函数创建对象
            this.uname = uname;
            this.age = age;
            this.sing = function() {
                console.log('这是构造函数中包含的方法');
            }
        }
        var dog = new Obj3('小狗', 1);
        var cat = new Obj3('小猫', 1.5);
</script>

在JS中，使用构造函数时要注意以下两点：

        1、构造函数用于创建某一类对象，其首字母要大写；

        2、构造函数要和new一起使用才有意义

new 在执行时会做四件事情：

        1、在内存中创建一个新的空对象；

        2、让this指向这个新的对象；

        3、执行构造函数里面的代码，给这个新对象添加属性和方法；

        4、返回这个新对象（所以构造函数里面不需要return）