Class类,你真的了解吗

前端咖

image.png

定义

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,公共方法getYearsetYear。实例对象仅可以访问公共成员,在类的内部可以访问、修改私有属于#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,公共属性挂在实例对象上,静态公共属性、静态公共方法在类的构造函数上,公共方法在原型链上。

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


-

调用对象的属性或方法时,我们都知道obj.nameobj['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中声明。

图片

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

阅读 169
7 声望
0 粉丝
0 条评论
7 声望
0 粉丝
宣传栏