JS：面向对象

目录

1.面向对象编程介绍

2. ES6的类和对象

2.1 对象

2.2 类

2.2.1 创建类

2.2.2 constructor 构造函数

2.2.3 类添加方法

3.类的继承

3.1 继承

3.1.1 extends

3.2 super 关键字

3.3 类的两注意

---

1.面向对象编程介绍

• 面向对象就是把事务分解为一个个对象，然后对象之间分工与合作
• 特性：封装性，继承性，多态性
• 优点：易维护，易复用，让系统灵活
• 特点：抽象对象的共用属性和行为组织成一个类；对类进行实例化，获取类的对象

2. ES6的类和对象

2.1 对象

对象是一组无序的相关属性和方法的集合，所有的事物都是对象，是具体的事物

2.2 类

class 关键字声明一个类，用类来实例化对象

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

2.2.1 创建类

class name { }

创建实例：(必须用new实例化对象

var x = new name ();

2.2.2 constructor 构造函数

是类用于传递参数，返回实例对象，会自动调用这个函数

 注意：类名要首字母大写建议

    <script>
        class Star {
            constructor(uname) {
                this.uname = uname;
            }
        }
        var ls = new star('lisa');
        console.log(ls.uname); //lisa
    </script>

2.2.3 类添加方法

类里面的函数不需要加function

多个函数间用逗号分隔

class star {
            constructor(uname) {
                this.uname = uname;
            }
            // 添加方法
            sing(){
                console.log('abc');
            }
        }

3.类的继承

3.1 继承

子类可以继承父类的方法和属性

3.1.1 extends

语法：子类 extends 父类 { }；  如 Son extens Don { }；

    <script>
        class Dad {
            constructor() {

            }
            money() {
                console.log(100);
            }
        }
        class Son extends Dad {

        }
        var son = new Son();
        son.money(); //100
    </script>

3.2 super 关键字

用于访问和调用对象父类上的函数。可以调用父类的构造函数和其他函数

• 如果父类和子类都有同一个方法，子类输出时会执行子类的（把父类的方法隐藏了）
• 继承的属性或者方法中的查找原则：就近原则
• 在构造函数中使用super，必须放在this 前（必须先调用父类的构造函数，在使用子类的构造方法）

    <script>
        class Dad {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }

        }
        class Son extends Dad {
            constructor(x, y) {
                super(x, y) //必须写在this前
                this.x = x;
                this.y = y;
            }
            sub() {
                console.log(this.x - this.y);
            }
        }

        var son = new Son(9, 4); //5 13
    </script>

3.3 类的两注意

1. ES6中类没有提升，必须先定义类，在实例化对象
2. 类里面共有的属性和方法一定要添加this使用
3. 类的指向问题

        // 类的指向问题
        class Dad {
            constructor(x, y) {
                // constructor的this指的是 创建的star 对象
                this.x = x;
                this.y = y;
            }
            sum() {
                // 函数里面的this指向调用者
                console.log(this.x + this.y);
            }
        }