快捷搜索:

ES6中的类和符号

一、类

在js语言中,生成实例对象的传统方法是通过构造函数。例如:

function Animal(type,name,age,sex){
          
   
    this.type = type
    this.name = name
    this.age = age
    this.sex = sex
}
Animal.prototype.print = function(){
          
   
     console.log(`【种类】:${
            
     this.type}`)
     console.log(`【名字】:${
            
     this.name}`)
     console.log(`【年龄】:${
            
     this.age}`)
     console.log(`【性别】:${
            
     this.sex}`)
}
const dog = new Animal("狗","巴顿",5,"公")
dog.print()
for (const key in dog) {
          
   
    console.log(key)
}

为了更好的,更简洁的书写类。ES6引入了Class类。通过class关键字来定义。ES6的类只是构造函数的语法糖

1、类的简介

通过类改造上面代码

class Animal{
          
   
    constructor(type,name,age,sex){
          
   
        this.type = type
        this.name = name
        this.age = age
        this.sex = sex
        //constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象。
    }
    print(){
          
   
        console.log(`【种类】:${
            
     this.type}`)
        console.log(`【名字】:${
            
     this.name}`)
        console.log(`【年龄】:${
            
     this.age}`)
        console.log(`【性别】:${
            
     this.sex}`)
    }
}
const dog = new Animal("狗","巴顿",5,"公")
dog.print()
for (const key in dog) {
          
   
    console.log(key)
}

(1)constructor 方法

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

class Animal {
          
   
}

// 等同于
class Animal {
          
   
  constructor() {
          
   }
}

(2)取值函数(getter)和存值函数(setter)

与 ES5 一样,在“类”的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。存值函数和取值函数是设置在属性的 Descriptor 对象上的,不在原型上。

class Animal{
          
   
    constructor(name,age){
          
   
        this.name = name
        this.age = age
    }
    // 创建一个age属性,并给他加上setter,给该属性赋值时,会运行该函数
    set age(age){
          
   
        if(age<0){
          
   
            age = 0
        }else if(age>150){
          
   
            age = 100
        }
        this._age = age
    }
    // 创建一个age属性,并给他加上getter,给该属性赋值时,会运行该函数
    get age(){
          
   
        return this._age + "岁"
    }
}
const dog = new Animal("巴顿",5)
console.log(dog.age)

相当于es5中写法如下 Object.defineProperty可定义某个对象成员属性的读取和设置

Object.defineProperty(this,"age",{
          
   
    set(val){
          
   
		//...
    },
    get(){
          
   
        //...
    }
})

(3)属性表达式:可计算的成员名

const printName = "print"
class Animal{
          
   
    constructor(type,name,age,sex){
          
   
        this.type = type
        this.name = name
        this.age = age
        this.sex = sex
    }
    [printName](){
          
   
        console.log(`【种类】:${
            
     this.type}`)
        console.log(`【名字】:${
            
     this.name}`)
        console.log(`【年龄】:${
            
     this.age}`)
        console.log(`【性别】:${
            
     this.sex}`)
    }
}
const dog = new Animal("狗","巴顿",5,"公")
dog.print()
for (const key in dog) {
          
   
    console.log(key)
}

(4)Class类表达式

const A = class {
          
    //匿名类 ,类表达式
    a = 1
    b = 2
}
const a = new A()

采用 Class 表达式,可以写出立即执行的 Class。

let person = new class {
          
   
  constructor(name) {
          
   
    this.name = name;
  }
  sayName() {
          
   
    console.log(this.name);
  }
}(ll);

person.sayName();

2、有关类的注意点

(1)类和模块的内部,默认就是严格模式。类中的所有代码均在严格模式下执行

(2)类声明不会被提升,与 let和 const一样,存在暂时性死区

new A(); // ReferenceError
class A {
          
   }

(3)类的所有方法都是不可枚举的

(4)类的所有方法都无法被当作构造函数使用

(5)类的构造器必须使用 new来调用

(6)类的方法内部如果含有this,它默认指向类的实例。

class Person {
          
   
  printName(name = 小张) {
          
   
    this.print(`Hello ${
            
     name}`);
  }

  print(text) {
          
   
    console.log(text);
  }
}

const person = new Person();
const {
          
    printName } = person;
printName(); // TypeError: Cannot read property print of undefined

原因:printName方法中的this,默认指向Person类的实例。但是,如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境(由于 class内部是严格模式,所以 this实际指向的是undefined),从而导致找不到print方法而报错。

3、静态成员

如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用构造函数本身的成员。使用static关键字定义的成员即静态成员

class Chess{
          
   
    //使用static关键字定义的
    static width = 100
    static height = 100
    static getWidth(){
          
   
        return `width:${
            
     Chess.width}`
    }
    constructor(name){
          
   
        this.name = name
    }
}
//与使用static关键字定义一样,定义在构造函数身上
Chess.width = 100 //每个棋子都应该有宽高
Chess.getWidth()

注意:

(1)使用static的字段初始化器,添加的是静态成员 (2)没有使用static的字段初始化器,添加的成员位于对象上

class Chess{
          
   
    static width = 100
    static height = 100
    step = 1 //相当于直接写在constructor构造器中
    constructor(name){
          
   
        this.name = name
        //this.step = 1 //上面代码的效果
    }
}

4、类的继承

(1)类的继承简介

Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

如果子类定义了constructor构造器,则必须在constructor的第一行通过super关键字调用父类的构造方法。如果子类没有定义constructor,则会有默认的构造器,该构造器需要的参数和父类一致,并且自动调用父类构造器

class Animal{
          
   
    constructor(type,name,age,sex){
          
   
        this.type = type
        this.name = name
        this.age = age
        this.sex = sex
    }
    static print(){
          
   
        console.log(`【种类】:${
            
     this.type}`)
        console.log(`【名字】:${
            
     this.name}`)
        console.log(`【年龄】:${
            
     this.age}`)
        console.log(`【性别】:${
            
     this.sex}`)
    }
}

class Dog extends Animal{
          
   
    constructor(name,age,sex,weight){
          
   
        super("犬类",name,age,sex)//通过super关键字调用父类的构造器
        this.weight = weight
    }
    print2(){
          
   
        console.log(`【性别】:${
            
     this.weight}`)
    }
}
const dog = new Animal("巴顿",5,"公",100)
dog.print()

注意:父类的静态方法,也会被子类继承。

(2)Object.getPrototypeOf()

可以从子类上获取父类。因此,可以使用这个方法判断,一个类是否继承了另一个类。

Object.getPrototypeOf(Dog)//返回Dog的父类Animal

Object.getPrototypeOf(Dog) === Animal //true

(3)super 关键字

super既可以当函数调用,也可以当对象使用。

a、super作为函数调用:

super作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次super函数。否则 JavaScript 引擎会报错。

class A {
          
   }

class B extends A {
          
   
  constructor() {
          
   
    super();//调用A的构造器。
  }
}

注意:super内部的this仍指向B。只能用在子类的构造函数之中,用在其他地方就会报错。

b、super作为对象调用:

class A {
          
   
  print() {
          
   
    console.log("我被调用了")
  }
}

class B extends A {
          
   
  constructor() {
          
   
    super();
    super.print(); // "我被调用了"
  }
}
const b = new B();

子类B当中的super.p(),就是将super当作一个对象使用。这时,super在普通方法之中,指向A.prototype,所以super.p()就相当于A.prototype.p()。

注意:由于super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的。

二、符号Symbol

1、普通符号

符号是ES6新增的一个数据类型,它通过使用函数 Symbol(符号描述)来创建。符号设计的初衷,是为了给对象设置私有属性(私有属性:只能在对象内部使用,外面无法使用)

const sym1 = Symbol("这个是描述信息")
const sym2 = Symbol("abc")
console.log(sym1,sym2)//Symbol(这个是描述信息) Symbol(abc)

符号具有以下特点:

    没有字面量 使用 typeof 得到的类型是 symbol 每次调用 Symbol 函数得到的符号永远不相等,无论符号名是否相同 符号可以作为对象的属性名存在,这种属性称之为符号属性 开发者可以通过精心的设计,让这些属性无法通过常规方式被外界访问 符号属性是不能枚举的,因此在 for-in 循环中无法读取到符号属性,Object.keys 方法也无法读取到符号属性 Object.getOwnPropertyNames 尽管可以得到所有无法枚举的属性,但是仍然无法读取到符号属性 ES6 新增 Object.getOwnPropertySymbols 方法,可以读取符号
const sym = Symbol("这是一个符号属性")
const obj = {
          
   
  a:1,
  b:2,
  [sym]:3
}
console.log(obj)//{a: 1, b: 2, Symbol(这是一个符号属性): 3}
const syms = Object.getOwnPropertySymbols(obj)//获取符号属性
console.log(syms)//[Symbol(这是一个符号属性)]
    符号无法被隐式转换,因此不能被用于数学运算、字符串拼接或其他隐式转换的场景,但符号可以显式的转换为字符串,通过 String 构造函数进行转换即可,console.log 之所以可以输出符号,是它在内部进行了显式转换
const hero = (function(){
          
   
const getRandom = Symbol("用于产生随机数")
return{
          
   
   attack:30,
   hp:100,
   defence:10,
   battle(){
          
   
       //攻击,伤害:攻击力*随机数
       const dmg = this.attack * this[getRandom](0.5,2)
       console.log(dmg)
   },
   [getRandom](min,max){
          
   
       return Math.random()* (max-min)+min
   }
}
})()
console.log(hero)
console.log(hero.battle())//一个数
console.log(hero[getRandom](0.5,2))//Uncaught ReferenceError: getRandom is not defined

2、 共享符号

根据某个符号名称(符号描述)能够得到同一个符号

Symbol.for("符号名/符号描述")  //获取共享符号

const syb1 = Symbol.for("abc");
const syb2 = Symbol.for("abc");
console.log(syb1 === syb2)
const obj1 = {
          
   
    a: 1,
    b: 2,
    [syb1]: 3
}

const obj2 = {
          
   
    a: "a",
    b: "b",
    [syb2]: "c"
}

console.log(obj1, obj2);

3、 知名符号

知名符号是一些具有特殊含义的共享符号,通过 Symbol 的静态属性得到

ES6 延续了 ES5 的思想:减少魔法,暴露内部实现。因此,ES6 用知名符号暴露了某些场景的内部实现

(1)Symbol.hasInstance

该符号用于定义构造函数的静态成员,它将影响 instanceof 的判定

obj instanceof A
//等效于
A[Symbol.hasInstance](obj)
//Function.prototype[Symbol.hasInstance]
function A() {
          
   }
Object.defineProperty(A, Symbol.hasInstance, {
          
   
    value: function (obj) {
          
   
        return false; //均返回false
    }
})
const obj = new A();
console.log(obj instanceof A); //false
console.log(A[Symbol.hasInstance](obj)); //false

(2) Symbol.isConcatSpreadable:响数组的 concat 方法

该数组是否展开。默认是展开

const arr = [3];
const arr2 = [5, 6, 7, 8];
const result = arr.concat(56, arr2)
console.log(result)//[3, 56, 5, 6, 7, 8]
//-------------------
const arr = [3];
const arr2 = [5, 6, 7, 8];
arr2[Symbol.isConcatSpreadable] = false;
const result = arr.concat(56, arr2)
console.log(result)//[3, 56, [5,6,7,8]]

(3)Symbol.toPrimitive:影响类型转换的结果

该对象被转为原始类型的值时,会调用这个方法,返回该对象对应的原始类型值。

class Temperature {
          
   
    constructor(degree) {
          
   
        this.degree = degree;
    }

    [Symbol.toPrimitive](type) {
          
   
        if (type === "default") {
          
   
            return this.degree + "摄氏度";
        }
        else if (type === "number") {
          
   
            return this.degree;
        }
        else if (type === "string") {
          
   
            return this.degree + "℃";
        }
    }
}

const t = new Temperature(30);

console.log(t + "!");//30摄氏度!
console.log(t / 2); //15
console.log(String(t));//30℃

(4)Symbol.toStringTag:影响 Object.prototype.toString 的返回值

class Person {
          
   
    [Symbol.toStringTag] = "Person"
}
const p = new Person();
const arr = [32424, 45654, 32]
console.log(Object.prototype.toString.apply(p));//[object Person]
console.log(Object.prototype.toString.apply(arr))//[object Array]
(5)Symbol.iterator:可以改变遍历器方法。
(6)Symbol.split:当该对象被String.prototype.split方法调用时,会返回该方法的返回值
(7)Symbol.search:当该对象被String.prototype.search方法调用时,会返回该方法的返回值。
(8)Symbol.replace:当该对象被String.prototype.replace方法调用时,会返回该方法的返回值。
(9)Symbol.match:当执行str.match(myObject)时,如果该属性存在,会调用它,返回该方法的返回值
(10)Symbol.species:创建衍生对象时,会使用该属性。
log(Object.prototype.toString.apply(p));//[object Person]
console.log(Object.prototype.toString.apply(arr))//[object Array]
(5)Symbol.iterator:可以改变遍历器方法。
(6)Symbol.split:当该对象被String.prototype.split方法调用时,会返回该方法的返回值
(7)Symbol.search:当该对象被String.prototype.search方法调用时,会返回该方法的返回值。
(8)Symbol.replace:当该对象被String.prototype.replace方法调用时,会返回该方法的返回值。
(9)Symbol.match:当执行str.match(myObject)时,如果该属性存在,会调用它,返回该方法的返回值
(10)Symbol.species:创建衍生对象时,会使用该属性。
(11)Symbol.unscopables:该对象指定了使用with关键字时,哪些属性会被with环境排除。
经验分享 程序员 职场和发展