ES6 类、Symbol学习

类

class

通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰更像面向对象编程的语法而已。所以ES6 的类，完全可以看作构造函数的另一种写法。

构造函数

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加

class Person{
    // 实例属性，构造器内声明
    constructor(name,age,gender){
        this.name=name;//实例属性=形参
        this.age=age;
        this.gender=gender;
    }
}

实例方法

定义在类体中的方法称为实例方法。如下，sayName方法就是实例方法，本质上该方法应该是声明在Person.prototype中，可供所有的实例调用，因此称为实例方法

class Person{
    constructor(name,age,gender){
        this.name=name;
        this.age=age;
        this.gender=gender;
    }
    // 实例方法，不需要任何关键字修饰
    sayName(){
        console.log('My name is '+this.name);
    }
}
// 实例化
let tom = new Person('tom',20,'男');
console.log(tom);
// 调用方法
tom.sayName();

静态方法

通过static关键字来定义静态属性和静态方法。静态属性和静态方法是定义在类【构造函数】上的，所以可以通过类【构造函数】直接访问。在静态方法中，this指向当前类【构造函数】

class Person{
    // 静态属性，使用static关键字来修饰
    static weight='50KG';
    // 静态方法，需要用static来修饰
    static sayWeight(){
        console.log(this.weight);
    }
}
// 通过class类来调用静态属性和方法
console.log(Person.weight);//50KG
Person.sayWeight();

继承

class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要简洁很多。子类中可以没有构造函数，系统会默认提供一个。子类如果提供了构造函数就必须显示调用super。super函数类似于之前的借用构造函数

class Animal
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
class Dog extends Animal{
    constructor(name,age,color,weight){
        // 调用animal中的属性，加上super关键字才能完成实例的继承
        super(name,age)
        this.color=color;
        this.weight=weight;
    }
}
// 继承了Animal类的静态实例属性和实例方法
let dog=new Dog("二狗",1,"black","10kg");
console.log(dog);//Dog { name: '二狗', age: 1, color: 'black', weight: '10kg' }

Symbol

ES6 引入的一种新的原始数据类型Symbol，表示独一无二的值。Symbol函数可以接受参数，表示对于这个唯一值的描述

创建symbol值

let sy1=Symbol()
let sy2=Symbol()
console.log(sy1,sy2);//Symbol() Symbol()
console.log(sy1==sy2);//false sy1和sy2都是独一无二的值

应用

解决冲突

// symbol解决键值冲突的问题
let sy1=Symbol('sy1')
let obj1={
    name:'123',
    age:12,
    gender:'male',
    //新增属性/修改属性
    [sy1]:'zhangsan'
}
console.log(obj1);
console.log(obj1[sy1]);//使用[]访问

消除魔术字符串

(还是不太懂！！)
魔术字符串指的是，在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。

//常用的消除魔术字符串的方法，就是写成一个变量
let shapes={
    triangle:Symbol('三角形'),
    rectangular:Symbol('矩形'),
    circle:Symbol('圆形')
}
function computedArea(shape,options){
    let result=0;
    switch (shape) {
        case shapes.triangle:
            result=0.5*options.width*options.height;
            break;
        case shapes.rectangular:
        result=options.width*options.height;
            break;
        case shapes.circle:
            result=Math.PI*options.r*options.r;
            break;
        default:
            result=-1
            break;
    }
    return result;
}
let result=computedArea(shapes.triangle,{width:10,height:20})
console.log(result);//100

全局注册表

用 Symbol.for() 方法创建的的 symbol 会被放入一个全局 symbol 注册表中。Symbol.for() 并不是每次都会创建一个新的 symbol，它会首先检查给定的 key 是否已经在注册表中了。假如是，则会直接返回上次存储的那个。否则，它会再新建一个

let sy3=Symbol.for('two')//在全局注册表中注册
let sy4=Symbol.for('two')
console.log(sy3,sy4);//Symbol(two) Symbol(two)
console.log(sy3===sy4);//true

//Symbol()每次都会创建一个不同symbol值  虽然描述符一样 但是Symbol value值不一样
let sy1=Symbol('one')
let sy2=Symbol('one')
console.log(sy1,sy2);//Symbol(one) Symbol(one)
console.log(sy1==sy2);//false