web前端—前端三剑客之JS-ES6(9)：class类、面向对象、symbol数据类型

ES6 Class 类：https://www.runoob.com/w3cnote/es6-class.html

symbol数据类型：https://www.runoob.com/w3cnote/es6-symbol.html

目录

class

定义类的注意点 

Object.assign添加类方法

实例对象注意点

静态方法、私有方法和私有属性

继承

---

class

定义类的注意点 

ES6 的class写法的几个注意点：

• 类的所有方法都定义在类的prototype属性上面
• 定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了
• 方法之间不需要逗号分隔，加了会报错
• ES6的class使用方法与ES5的构造函数一模一样

        class Person {
            constructor(name, sex) {
                this.name = name;
                this.sex = sex;
            }

            get ps() {
                return `正在使用ps方法`;
            }

            set ps(value) {
                console.log(`正在传入参数${value}`);
            }

            doing(what) {
                return `我是${this.name}，我正在${what}`;
            }

        };

        let xiaoming = new Person('小明', 24);   // 必须通过new方法实例对象
        console.log(xiaoming.doing('开车'));

Object.assign添加类方法

由于类的方法都定义在prototype对象上面，所以类的新方法可以添加在prototype对象上面。Object.assign方法可以一次向类添加多个方法 。注意：Object.assign的方法格式中添加多个方法的时候，每个方法之间需要用逗号隔开。

        Object.assign(
            Person.prototype, {
            say() {
                return `我叫${this.name},今年${this.sex}岁了，但是我还是一条单身狗`;
            }
        }
        );
        console.log(xiaoming.say());

实例对象注意点

• constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加，constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象
• 类必须使用new调用，否则会报错
• 与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为
• 与函数一样，类也可以使用表达式的形式定义，使用表达式定义的类，创建对象的时候要用表达式自变量名，而不能用类名，例子中的car和Car

        let car = class Car {
            constructor() {
                this;
            }

            self() {
                console.log('******打印this对象******');
                console.log(this);
                console.log('******打印this对象******');
            }

            manufacturer(country) {
                return `这是${country}产的汽车`;
            }
        };

        let car1 = new car();
        // let car2 = new Car();   // 报错：Uncaught ReferenceError: Car is not defined
        // let car3 = car();      // 报错：Uncaught TypeError: Class constructor Person cannot be invoked without 'new'
        car1.self();
        console.log(car1.manufacturer('中国'));

 

静态方法、私有方法和私有属性

静态方法：类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

• 如果静态方法包含this关键字，这个this指的是类，而不是实例
• 静态方法可以与非静态方法重名
• 父类的静态方法，可以被子类继承
• 静态方法也是可以从super对象上调用

私有方法和私有属性：只能在类的内部访问的方法和属性，外部不能访问

• 私有属性和私有方法前面，也可以加上static关键字，表示这是一个静态的私有属性或私有方法

• 私有属性不能写在constructor中

• 在属性名或者方法名前面加#可以表示私有方法和私有属性
• 私有方法和私有属性只能在类的内部调用，外部调用就会报错

        class Dog {
            #color = '黄色';
            constructor(owner, name,color) {
                this.owner = owner;
                this.name = name;
            }

            static self() {   // 静态方法
                console.log(this);    // 如果静态方法包含this关键字，这个this指的是类，而不是实例
                console.log('*****************');
                console.log(this.name);
                console.log();
            }

            #eat(){
                return `${this.name}不食人间烟火`;
            }

            wangwang(){
                console.log(`${this.owner}的${this.name}是${this.#color}`);
                console.log(this.#eat());
                
            }


        }

        let ahuang = new Dog('杨戬', '哮天犬');
        // ahuang.srlf();    // 实例对象不能访问静态方法，报错：Uncaught TypeError: ahuang.eat is not a function

        // ahuang.#eat();
        // console.log(ahuang.#color);    //不能访问私有方法和属性：报错Uncaught SyntaxError: Private field '#color' must be declared in an enclosing class
       
        Dog.self();     // 类可以访问自己的静态方法
        ahuang.wangwang();   // 私有属性和私有方法只有内部可以方法

 

继承

        class Human{
            constructor(name,age){
                this.name = name;
                this.age =age;
                this.head = 1;
                this.arm = 2;
                this.leg = 2;
            }

            food(){
                console.log('吃饭');
            }
        }

        class Disabled extends Human{
            constructor(){
                super();
            }
        }

        // let disability = new Disabled();
        let disability = new Disabled('残疾人',40);
        disability.food();

装饰器等其他方法：https://www.runoob.com/w3cnote/es6-class.html