ES6知识点整理class的应用

最新推荐文章于 2022-06-12 14:46:49 发布

Wang's Blog

最新推荐文章于 2022-06-12 14:46:49 发布

阅读量792

点赞数

CC 4.0 BY-SA版权

分类专栏： ES6+ Javascript 文章标签： es6 class

本文链接：https://blog.csdn.net/Tyro_java/article/details/79643856

Javascript 同时被 2 个专栏收录

97 篇文章

订阅专栏

ES6+

23 篇文章

订阅专栏

本文对比了JavaScript中使用class语法糖定义类与传统原型对象定义类的方法，详细介绍了两者之间的区别与联系，包括构造函数、原型链继承及成员方法定义等方面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
  }
}