Class类的基本使用

系列文章目录

第一章：Class类的基本使用

第二章：Class类的属性与方法

第三章：继承

第四章：注意事项和应用

前言

前面我们学习了用构造函数模拟类，现在我们有了类语法，所以不再使用构造函数来模拟类

一、Class类的基本使用

 //使用class声明一个类
        class Person{
            //每个类都有构造方法constructor,实例化对象时执行构造方法
            //即使你不写构造方法，浏览器也会自动补全，但没有可执行的内容。
            constructor(name,age){
                //这里的this类似于构造函数中返回的实例对象。
                //一般在构造方法中定义属性，不定义方法
                this.name = name;
                this.age = age;
            }
            //这里定义方法等同于在构造函数的原型上定义方法，是实例的共同方法
            speak(){
                console.log('speak');
            }
        }
        //实例化一个Person对象：
        const p1 = new Person('小明',18);
        const p2 = new Person('小猪',19);
        const v = `${p1.name},${p1.age},${p2.name},${p2.age}`;
        console.log(v)//小明,18,小猪,19
        console.log(p1.speak == p2.speak); //true

二、类的两种定义方式 

 //类的两种定义方式
        //一、声明形式
        class Person1{
            constructor(){}
            speak(){}
        }
        //二、表达式形式
        const Person2 = class{
            constructor(){}
            speak(){}
        }

三、立即执行的类

 //立即执行的类:与立即执行函数类似，但是有用new调用
        new (class{
            constructor(){
                console.log('constructor')
            }
        })()

四、属性和方法

1、实例的属性和方法

把属性写在构造方法的外面，则每个实例都会有默认的自己的这个属性。

把方法写在构造方法的外面，则这个方法存在于类构造函数的原型上

示例：

 class Person1{
            age = 0;
            sex = 'male';
            constructor(){}
            speak(){
                return "我是speak"
            }
        }
        const per1 = new Person1();
        const per2 = new Person1();
        console.log(per1.age,per1.hasOwnProperty("age"));//0 true
        console.log(per2.speak(),per2.hasOwnProperty("speak"),Person1.prototype.hasOwnProperty("speak"));//我是speak false true

2.静态属性和方法（类的属性和方法）

const Person2 = class{
            constructor(){}
            //声明静态方法：在方法名前加static
            static speak(){
                console.log('我是静态的');
                console.log(this); //this指向class
            }
            //声明静态属性：
            // static version = '1.0'; 不推荐这种写法，目前只是提案，有兼容性问题
            static getVersion(){
                return '1.0';
            }
        }
        //调用静态方法：由类调用
        Person2.speak()
        //获取静态属性
       console.log( Person2.getVersion());//1.0

五、私有属性和方法

1.什么是私有属性：

私有属性只能在类的内部访问和修改。

2.为什么需要私有属性和方法：

一般情况下，类的属性和方法都是公开的，公有的属性和方法可以被外界修改，造成意想不到的错误。

3.模拟私有属性和方法：

js中还没有私有属性的语法，但是我们可以模拟私有属性和方法，达到我们想要的效果。

1.下划线开头表示私有的

下划线开头表示私有是整个行业共同约定的。但是这个方法不具备很强的约束力。

 class Person{
            constructor(name){
                this._name = name;
            }
            speak(){
                console.log('speak');
            }
            getName(){
                return this._name;
            }
        }
        const p = new Person("xiaohong")
        console.log(p.getName());

2.将私有属性和方法移出类

//实际开发中我们会在一个模块中声明类，这里用IIFE模拟一个模块。
        (function(){
            //在当前作用域中声明变量name，而不是在类中声明name属性
            let name = "";
            class Person{
                constructor(username){
                    //name是类的属性不是实例的属性
           // console.log(Person.hasOwnProperty("name")) true
                    name = username;
                  
                }
                speak(){
                    console.log('speak');
                }
                getName(){
                    return name;
                }
            }
            //暴露Person
            window.Person = Person;
        })();
        //实际开发中的代码也不会写在全局作用域中，也会写在一个模块中，这里我们也用IIFE模仿一个模块
        (function(){
            const p = new Person('Alex');
            console.log(p.getName()); //Alex
           // console.log(p.hasOwnProperty("name")) false
        })();