JavaScript高级---（1）面向对象编程_把大象放进冰箱怎么理解面向对象的编程思想-CSDN博客

本文链接：https://blog.csdn.net/qq_46186155/article/details/120204080

一、面向对象编程POP(Process-oriented programming)

面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。

1、举例理解

我们举个例子：
把大象装进冰箱。

面向过程的编程方式是：
打开冰箱门–>把大象放进去–>关上冰箱门

面向对象则是先抽象出对象，然后再找出对象的属性方法：
1、大象：

进去

2、冰箱

打开
关闭

2、面向对象编程的特性

封装性
继承性
多态性

3、面向对象编程的优缺点

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

二、类和对象

1、类

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

2、对象

对象特指某一个，通过类实例化一个具体的对象。
对象是由属性和方法组成的：

属性：事物的特征，在对象中用属性来表示
方法：事物的行为，在对象中用方法来表示

3、创建类及实例化对象

创建类
js一般使用class创建类，下面就利用class关键字创建了一个类。
这里constructor是类的构造函数，用于传递参数,返回实例对象，通过 new 命令生成对象实例时，自动调用该方法。如果没有显示定义, 类内部会自动给我们创建一个constructor() 。

// 构造类
        class Car {
            // 构造函数，new完之后自动执行，同时返回实例对象
            constructor(color, brand) {
                this.color = color;
                this.brand = brand;
            }

            // 添加方法
            run() {
                console.log("The car is running!");
            }
        }

实例化对象
我们使用new来创建对象

var car = new Car('red', 'toyota');

三、类的继承

1、继承

子类可以继承父类的一些属性和方法。一般使用extends关键字。

语法：

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();     // 你的姓是刘

2、super关键字

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

class Father {
     say() {
         return '我是爸爸';

     }
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
     say() {
          // super.say()  super 调用父类的方法
          return super.say() + '的儿子';
     }
}
var damao = new Son();
console.log(damao.say());  // 我是爸爸

注意：子类在构造函数中使用super, 必须放到 this 前面 (必须先调用父类的构造方法,在使用子类构造方法)

3、指向问题

这里我们举一个例子进行解释。我们先在页面上写一个button按钮。然后构造一个类，创建一个实例化对象。

        class Star {
            constructor(name, age) {
                this.name = name;
                this.age = age;
                // this.sing();
                this.btn = document.querySelector("button");
                this.btn.onclick = this.sing;
            }
            sing() {
                // 这里的this指向他的调用者btn***
                console.log(this.name); //undefined
                console.log(this);
            }
            dance() {
                _that = this;
                console.log(this);
            }
        }
        var ldh = new Star('ldh'， 18);