Class类，你真的了解吗

定义

类class是面向对象程序设计实现信息封装的基础。类是一种用户定义的引用数据类型，也称类类型。每个类包含数据说明和一组操作数据或传递信息的函数。类的实例称为对象。

构成

类由类名、构造函数、属性、方法组成。属性、方法属于成员，可以分为公共成员，保护成员、私有成员。

定义类

声明一个仅有类名的类。

class Year{
  constructor(){
  }
}
// 简写
class Year{
}

公共属性

公共属性可以被实例对象访问或修改，类的属性默认是公共属性。

class Year{
  constructor(year){
    this.year = year;  // 公共属性
  }
}
let yearCs = new Year(2021);
console.log(yearCs.year);  // 2021

私有属性

私有属性不可以被实例对象访问，仅在类的内部访问或修改，写法是使用一个#作为前缀。

class Year{
  constructor(year){
    this.year = year;
  }
  #month = 1;  // 私有属性
}
let yearCs = new Year(2021);
console.log(yearCs['#month']);  // undefined

静态属性

静态属性是使用关键字static声明，将静态属性添加到类的构造函数中，用类本身访问或修改。

class Year{
  constructor(year){
    this.year = year;
  }
  #month = 1;
  static day = 1;  // 静态属性
}
let yearCs = new Year(2021);
console.log(Year.day);  // 1

静态私有属性

静态私有属性是使用关键字static与#声明，将静态私有属性添加到类的构造函数中，不能被用类本身访问。

class Year{
  constructor(year){
    this.year = year;
  }
  #month = 1;
  static day = 1;
  static #hour = 1;  // 静态私有属性
}
console.log(Year['#hour']);  // undefined

属性对比

Class方式定义类与Function定义类的区别，想想输出的内容，欢迎留言哦！

/**
 * Class定义类
 */
class YearClass{
  constructor(year){
    this.year = year;
  }
  #month = 1;
  static day = 1;
  static #hour = 1;
}
let yearCs = new YearClass(2021);
console.log(yearCs.year);  // ???
console.log(yearCs['#month']);  // ???
console.log(YearClass.day);  // ???
console.log(YearClass['#hour']);  // ???
/**
 * Function 方式定义类
 */
function YearFunction(year){
  this.year = year;
  this['#month'] = 1;
}
YearFunction.day = 1;
YearFunction['#hour'] = 1;
let yearFn = new YearFunction(2021);
console.log(yearFn.year);  // ???
console.log(yearFn['#month']);  // ???
console.log(YearFunction.day);  // ???
console.log(YearFunction['#hour']);  // ???

Class

Function

公共方法

公共方法可以被实例对象调用。

class Year{
  constructor(year){
    this.year = year;
  }
  #month = 1;
  getYear(){
    return `今夕是何年${this.year}，何月${this.#month}`;
  }
  setYear(year){
    this.year = year;
    this.#month = year%2;
  }
}
let yearCs = new Year(2021);
console.log(yearCs.year, yearCs['#month']);  // 2021 undefined
console.log(yearCs.getYear());  // 今夕是何年2021，何月1
yearCs.setYear(2022);
console.log(yearCs.getYear());  // 今夕是何年2022，何月0

定义类Year，包括公共属性year、私有属性#month，公共方法getYear、setYear。实例对象仅可以访问公共成员，在类的内部可以访问、修改私有属于#month，可以保护类的内部数据，虽然，实例对象不能访问私有成员，但是在实例对象的节点上是暴露相关信息。

私有方法

私有方法不可以被实例对象调用，写法是使用一个#作为前缀。

class Year{
  constructor(year){
    this.year = year;
  }
  #month = 1;
  getYear(){
    return `今夕是何年${this.year}`;
  }
  #getMonth(){
    return `今夕是何月${this.#month}`;
  }
}
let yearCs = new Year(2021);
console.log(yearCs['getYear']());  // 今夕是何年2021
console.log(yearCs['#getMonth']());  // Uncaught TypeError: yearCs.#getMonth is not a function

公共方法可以被实例对象访问，私有方法不可以被实例对象访问，强制访问会报错哦。高能预警：公共方法getYear是在原型链上，私有方法#getMonth在实例上。

静态方法

静态方法是使用关键字static声明，将静态方法添加到类的构造函数中，用类本身调用。

class Year{
  constructor(year){
    this.year = year;
  }
  #month = 1;
  static day = 1;
  getYear(){
    return `今夕是何年${this.year}`;
  }
  #getMonth(){
    return `今夕是何月${this.#month}`;
  }
  static getDay(){
    return `今夕是何天${this.day}`; 
  }
}
let yearCs = new Year(2021);
console.log(Year.getDay());  // 今夕是何天1

静态方法是通过类调用。静态方法在类的构造函数上。

静态私有方法

class Year{
  constructor(year){
    this.year = year;
  }
  #month = 1;
  static day = 1;
  static #hour = 1;
  getYear(){
    return Year.#getHour();
  }
  #getMonth(){
    return `今夕是何月${this.#month}`;
  }
  static getDay(){
    return Year.#getHour(); 
  }
  static #getHour(){
    return `今夕是何时${Year.#hour}`;
  }
}
let yearCs = new Year(2021);
console.log(Year['#getHour']());  // Uncaught TypeError: Year.#getHour is not a function
console.log(Year.getDay());  // 今夕是何时1
console.log(yearCs.getDay());  // 今夕是何时1

静态私有方法不能被类本身调用，但是，可以把静态私有方法给公共方法或静态公共方法内部调用。静态私有方法在类的构造函数上。

方法对比

Class方式定义类与Function定义类的区别，想想输出的内容，欢迎留言哦！

class YearClass{
  constructor(year){
    this.year = year;
  }
  #month = 1;
  static day = 1;
  static #hour = 1;
  getYear(){
    return `今夕是何年${this.year}`;
  }
  #getMonth(){
    return `今夕是何月${this.#month}`;
  }
  static getDay(){
    return `今夕是何天${Year.day}`;
  }
  static #getHour(){
    return `今夕是何时${Year.#hour}`;
  }
}
let yearCs = new YearClass(2021);
console.log(yearCs.getYear());  // ???
console.log(yearCs.#getMonth());  // ???
console.log(YearClass.getDay());  // ???
console.log(YearClass.#getHour());  // ???
function YearFunction(year){
  this.year = year;
  this.#month = 1;
}
YearFunction.day = 1;
YearFunction.#hour = 1;
YearFunction.prototype.getYear = function getYear(){
  return `今夕是何年${this.year}`;
};
YearFunction.getDay = function getDay(){
  return `今夕是何天${Year.day}`;
}
YearFunction.#getHour = function #getHour(){
  return `今夕是何时${Year.#hour}`;
}
let yearFn = new YearFunction(2021);
console.log(yearFn.getYear());  // ???
console.log(YearFunction().getDay());  // ???
console.log(YearFunction().#getHour());  // ???

Class

Function

总结

关于Class，公共属性、私有属性、私有方法挂在实例对象上，静态公共属性、静态私有属性、静态私有方法在类的构造函数上，公共方法在原型链上。

关于Function，公共属性挂在实例对象上，静态公共属性、静态公共方法在类的构造函数上，公共方法在原型链上。

经常有人说class是function的语法糖，其实，随着时间的推移，class关键字不仅仅是function语法糖，更具有新特性，如私有属性、私有方法是function类不具备的，而且class定义的方法比function定义的方法优化了，去掉了function定义方式产生的prototype部分。

附
-

调用对象的属性或方法时，我们都知道obj.name与obj['name']是一样的效果。今天给大家展示一个特列：

function YearFunction(year){
  this.year = year;  // 公共属性
  this['#month'] = 1;  // 公共属性
  this.#month = 1;  // Uncaught SyntaxError: Private field '#month' must be declared in an enclosing class
}
let yearFn = new YearFunction(2021);

语法错误：私有字段必需在类Class中声明。

喜欢可以关注微信公众号“前端咖”
关注哦！优质原创文章在这里等你哦！