欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6知识点整理class的应用

程序员文章站 2022-07-16 20:06:03
...

class

  • class 本身是个语法糖,主要为了考虑在编码上更加人性化
  • 内部有super,static,get 等关键词
  • 使用起来非常类似于后台语言

使用class进行类的实现应用

'use strict';

// User 类
class User {
  constructor(name,age) {
    this.name = name;
    this.age = age;
  }

  static getName() {
    return 'User';
  }

  static getAge() {
    return this.age;
  }

  setName(name) {
    this.name = name;
  }

  setAge(age) {
    this.age = age;
  }

  get info() {
    return 'name:' + this.name + ' | age:' + this.age;
  }
}

// Manager 类
class Manager extends User{
  constructor(name,age,password){
    super(name,age);
    this.password = this.password;
  }

  changePwd(pwd) {
    return this.password = pwd;
  }

  get info() {
    var info = super.info; // 使用super继承父级 get
    return info + ' === new';
  }
}
// typeof User:  function  typeof Manager:  function
console.log('typeof User: ', typeof User, ' typeof Manager: ', typeof Manager); 

let manager = new Manager('Li', 22, '123456');
manager.setAge(23);
console.log(manager.info); // name:Li | age:23 === new
console.log(User.prototype);
console.log(Manager.prototype); 

在class之前使用原型对象定义类的应用

// 构造函数
function User(name,age) {
  this.name = name;
  this.age = age;
}
// 原型
User.prototype = {
  getName:function(){
    return 'User';
  },
  setName:function(name){
    this.name = name;
  },
  getAge:function(){
    return this.age;
  },
  setAge:function(age){
    this.age = age;
  }
}

// 取值函数和存执函数
Object.defineProperty(User.prototype,'info', {
  get() {
    return 'name:' + this.name + ' | age:' + this.age;
  }
});

var user = new User('Joh', 26);
console.log(user); // User {name: "Joh", age: 26}

// 子类
function Manager(name, age, password) {
  User.call(this, name, age);
  this.password = password;
}

Manager.__proto__ = User; // 继承静态方法
Manager.prototype = Object.create(User.prototype); // 继承prototype原型方法
Manager.prototype.changePwd = function (pwd) {
  this.password = pwd;
};
var manager = new Manager('Li', 22, '123456');
manager.setAge(23);
console.log(manager.info); // name:Li | age:23
console.log(User.prototype); // 不变
console.log(Manager.prototype); // {changePwd:function(){}, info:"name:undefined | age:undefined", __proto__:指向Manager.prototype}

使用 class 定义的类不被提升,需按顺序执行

正常:

let user = new class User {
  constructor(name) {
    this.name = name;
  }
}('Joh');
console.log(user); // User {name: "Joh"}

错误:

var man = new Man(); // 此处报错,使用class声明的类不会被提升 Uncaught ReferenceError: Man is not defined
class Man {
  constructor(name){
    this.name = name;
  }
}
相关标签: es6 class