JavaScript进阶面向对象ES6

Posted 2021-09-26 一直在努力的小菜鸟

类和对象

对象：万物皆对象，对象是一个具体的事物，看得见摸得着的实物

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

• 属性：事物的特征，再对象中用属性来表示（常用名词）
• 方法：事物的行为，再对象中用方法来表示（常用动词）

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

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

---

创建类：

语法：

class name{
    //class body

}　

创建实例：

var xx=new name();
注意：类必须使用new实例化对象

 

类constructor构造函数

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

 

注意：

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

类添加方法

语法：

class Person{
    constructor(name,age){//constructor构造器或者构造函数
        this.name=name;
        this.age=age;
    }
       say(){
            console.log(this.name+"你好");
        }
}

　　

<script>
        //创建类
        class Star {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            sing(song) {
                console.log(this.name + song );
            }
        }
        //利用类创建对象 new
        var ldh = new Star(\'刘德华\', 18);
        var zxy = new Star(\'张学友\', 20);
        console.log(ldh);
        console.log(zxy);
        //我们类里面所有的函数不需要写function
        // 多个函数方法之间不需要添加逗号分隔
        ldh.sing(\'冰雨\');
    </script>

　　

继承

    程序中的继承：子类可以继承父类的一些属性和方法

语法：

class Father{
    //父类
}
class Son  extends Father{
        //子类继承父类
}
<script>
        // 类的继承
        class Father {
            constructor() {
 
 
            }
            money() {
                console.log(100);
            }
        }
        class Son extends Father {
 
 
        }
        var son = new Son();
        son.money();
    </script>

　　

super关键字

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

  

   // 调用父类的构造函数
        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();
 

　　

         

   //调用父类的普通函数
        class Father {
 
 
            say() {
                return \'我是爸爸\';
            }
        }
        class Son extends Father {
 
 
            say() {
                // console.log(\'我是儿子\');
                console.log(super.say() + \'的儿子\');
                // super.say() 就是调用父类中的普通函数
            }
        }
        var son = new Son();
        son.say();
 
         // 继承中的属性或者方法查找原则：就近原则
        // 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
        // 继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类这个方法（就近原则）

　　

 

     

  //子类继承父类方法同时扩展自己方法
        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调用父类中的构造函数
                // super必须在子类this之前调用
                super(x, y);
                this.x = x;
                this.y = y;
 
 
 
 
            }
            subtract() {
                console.log(this.x - this.y);
            }
        }
        var son = new Son(5, 3);
        son.subtract();
        son.sum();

　　

注意：子类构造函数中使用super，必须放到this前面（必须先调用构造方法，再使用子类构造方法）

 

三个注意点

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

大家好呀 ！很高兴能能够在这与大家交流，我的博客会分享一些关于前端的学习，偶尔也会记录一些生活日常哦！如果有什么问题的话 ，希望可以多多评论，给予我宝贵的意见或建议哦~~~~