第一章：面向对象编程介绍

1.1 两大编程思想

  • 面向过程。
  • 面向对象。

1.2 面向过程编程 POP（Process Oriented Programming）

  • 面向过程就是分析出解决问题所需要的步骤，然后用函数将这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。
  • 举例：将大象装进冰箱，面向过程做法。

将大象装进冰箱，面向过程做法.jpg

  • 面向过程，就是按照我们分析好的步骤，按照步骤解决问题。

1.3 面向对象编程 OOP（Object Oriented Programming）

  • 面向对象就是将事物分解成一个个对象，然后由对象之间分工和合作。
  • 举例：将大象装进冰箱，面向对象做法：
    • 先找出对象，并写出这些对象的功能。
      • 大象对象：
        • 进去。
      • 冰箱对象：
        • 打开。
        • 关闭。
    • 使用大象和冰箱的功能。
  • 面向对象就是以对象功能来划分问题，而不是步骤。
  • 在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。
  • 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合于多个合作的大型软件项目。
  • 面向对象的特性：
    • 封装。
    • 继承。
    • 多态。

1.4 面向过程 VS 面向对象

1.4.1 面向过程

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

1.4.2 面向对象

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

第二章：ES6中的类和对象

2.1 面向对象

  • 面向对象更贴近我们的实际生活，可以使用面向对象描述现实世界事物，但是事物分为抽象的事物和具体的事物。
  • 比如：
    • 手机，抽象的（泛指的）。
    • 一部手机，具体的（特指的）。
  • 面向对象的思维特点：
    • ①抽取（抽象）对象共用的属性和行为，组织（封装）成一个类（模板）。
    • ②对类进行实例化，获取类的对象。
  • 面向对象编程我们考虑的是有哪些对象，按照面向对象的思维特点，不断的创建对象，使用对象，指挥对象做事情。

2.2 对象

  • 现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库，一张网页，一个和远程服务器的连接。
  • 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如：字符串、数值、函数、数组等。
  • 对象是由属性和方法组成的：
    • 属性：事物的特征，在对象中用属性来表示（常用名词）。
    • 方法，在对象中用方法来表示（常用动词）。
  • 在ES6中新增加了类的概念，可以使用class关键字声明一个类，然后用这个类来实例化对象。
  • 类抽象了对象的公共部分，它泛指某一大类（class）。
  • 对象泛指某一个，通过类实例化一个具体的对象。

类和对象.jpg

2.3 创建类和创建实例

  • 创建类的语法：
  1. class 类名{
  3. }
  • 创建实例的语法：
  1. var 实例名 = new 类名();

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

2.3 类constructor构造函数

  • constructor()方法是类的构造函数（默认方法），用于传递参数，返回实例对象，通过new关键字生成对象实例时，会自动调用该方法。如果没有显示定义，系统将会为我们自动创建一个constructor()的无参构造函数。

  • 示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <title>创建类和对象</title>
  10.     <script>
  11.         /* 使用class创建类 */
  12.         class Star {
  13.             constructor(name, age) {
  14.                 this.name = name;
  15.                 this.age = age;
  16.             }
  17.         }
  19.         /* 使用类生成对象 */
  20.         var ldh = new Star('刘德华', 55);
  21.         console.log(ldh.name);
  22.         console.log(ldh.age);
  24.         /*
  25.         * 通过class关键字创建类，类名习惯首字母大写。
  26.         * 类里面有个constructor函数，可以接受传递过来的参数，同时返回实例对象。
  27.         * constructor函数，只要new生成实例的时候，就会自动调用这个函数，如果我们不写这个函数，系统也会为我们生成无参的默认构造函数。
  28.         * 生成实例的时候new不能省略。
  29.         * 注意语法规范，创建类，类名后面没有小括号，生成实例，类名后面有小括号，构造函数不需要加function关键字。
  30.         */
  31.     </script>
  32. </head>
  34. <body>
  36. </body>
  38. </html>

2.4 类中添加公共方法

  • 语法：
class 类名{
    constructor(){}

    方法名(){

    }
}

注意：方法之前不用逗号分隔，同时方法不需要添加function关键字。

  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>类中添加公共方法</title>
    <script>
        class Star {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            say() {
                console.log('我的名字是：' + this.name + '，我今年' + this.age + '岁');
            }
        }

        var ldh = new Star('刘德华', 55);
        ldh.say();
    </script>
</head>

<body>

</body>

</html>

第三章：类的继承

3.1 继承

  • 现实中的继承：子承父业，比如：我们都继承了父亲的姓。
  • 程序中的继承：子类可以继承父类的一些属性和方法。
  • 语法：
class Father{ //父类

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

}
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>继承</title>
    <script>
        class Father {
            constructor(name) {
                this.name = name;
            }

            say() {
                console.log(this.name);
            }
        }

        class son extends Father {

        }

        var ldh = new son('刘德华');
        ldh.say();
    </script>
</head>

<body>

</body>

</html>

3.2 super关键字

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

  • 示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>super关键字</title>
    <script>
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }

            sum() {
                console.log(this.x + '+' + this.y + '=' + (this.x + this.x));
            }
        }

        class Son extends Father {
            constructor(x, y) {
                //调用了父类的构造函数
                super(x, y);
            }
        }

        var son = new Son(1, 2);
        son.sum();
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>super关键字调用父类普通函数</title>
    <script>
        class Father {
            say() {
                console.log('我是父类');
            }
        }

        class Son extends Father {
            say() {
                super.say(); //可以通过super关键字调用父类的普通方法
                console.log('我是儿子');
            }
        }

        var son = new Son();
        son.say();
        /*
        * 继承中，如果实例化子类，并调用一个方法，先看子类有没有这个方法，如果有，就先执行子类的方法，如果没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法。
        */
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>子类继承父类方法的同时扩展自己的方法</title>
    <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);
            }

            reduce() {
                console.log(this.x - this.y)
            }
        }

        var son = new Son(1, 2);
        son.sum();
        son.reduce();
    </script>
</head>

<body>

</body>

</html>

第四章：类和对象的注意点

  • 在ES6中类没有变量提升，所以必须先定义类，然后才能通过类实例化对象。
  • 类里面的公有属性和方法一定要加this。

  • 类里面的this指向问题：

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

  • 示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>使用类的注意事项</title>
</head>

<body>
    <button>点击</button>
    <script>
        /*
        * ①在ES6中没有变量提升，所以必须先定义类，才能通过类实例化对象
        * ②类里面的公有属性和方法一定要加this才能使用。
        * */
        class Star {
            constructor(name, age) {
                this.name = name;
                this.age = age;
                this.btn = document.querySelector('button');
                this.btn.onclick = this.say;
            }

            say() {
                // 这个say方法里面的this，指的是btn按钮，因为btn按钮调用了这个方法
                console.log(this);
            }

            dance() {
                // 这个dance方法里面的this，指的是实例化对象 ldh，因为ldh调用了这个方法
                console.log(this);
            }
        }

        var ldh = new Star('刘德华', 55);
    </script>
</body>

</html>