class类的常用基础用法

背景

我们中工作或者生活中或多或少的听说过class类,那么class到底怎么使用呢?常用的使用又是什么呢?今天我就给大家简单的说一下常用的以及怎么使用等等;如果你想了解很细很细的话,Class 的基本语法 点击这里看文档,哈哈哈...

常用语法

类中常用的方法有一下几个:

  • private 只能内部使用
  • constructor 方法
  • static 静态属性

private

我们可以通过以下的实例中可以看到,当我们在使用day.str的时候会报错的Unexpected identifier(意外的标识符),如果你是用ts写的你在写的时候就会给你提示了(属性"str"为私有属性,只能在类"Day"中访问。)。

错误使用

typescript 复制代码
class Day {
  // 只能内部使用
  private str:string;
  name:string = '张三'
}

const day = new Day();
console.log(day.str);
console.log(day.name);

正确使用

typescript 复制代码
class Day {
  // 只能内部使用
  private str:string = 'private';
  
  setStr() {
    return this.str;
  }
}
const day = new Day();

console.log(day.setStr()); // 返回:private

constructor

从这儿可以看出,类可以通过 constructor 将值传递进去,然后通过方法返回或者处理相关数据等等。。。

typescript 复制代码
class Day {
  // 只能内部使用
  private str:string = 'private';

  constructor(str:string) {
    this.str = str;
  }
  
  setStr() {
    return this.str
  }
}
const day = new Day('constructor');

console.log(day.setStr()); // 返回:constructor

static

static 是一个静态方法,不能通过实例创建在其内部也不能使用this。

typescript 复制代码
class Day {
  // 只能内部使用
  private str:string = 'private';

  constructor(str:string) {
    this.str = str;
  }
  
  setStr() {
    return this.str
  }

  static getStr() {
    return 'static';
  }
}
const day = new Day('constructor');

console.log(Day.getStr()); // 返回:static

示例

我们可以做一个简单的加减方法;仅供参考; 我发现类中有get和set方法,如果你想多个操作然后获取最后的结果值的话;可以通过get去封装操作。大家可以根据自己的使用场景去封装搭建自己需要的。

typescript 复制代码
class Day {
  total:number = 30;

  constructor(total:number = 30) {
    this.total = total;
  }
  
  add(num:number) {
    this.total = this.total + num;
    return this.prop;
  }

  reduce(num:number) {
    this.total = this.total - num;
  }

  get prop () {
    return this.total;
  }
}
const day = new Day();
console.log(day.add(30)); // 60

day.add(30);
day.reduce(20);

console.log(day.prop); // 70

总结

我最开始对类并不是很了解,自己写了几个dome之后发现还挺好的,貌似队列就可以用类的方法来实现,等我研究研究。下期给大家带来队列的实现方式。

相关推荐
岁岁种桃花儿5 分钟前
Vue核心语法第一篇:Vue是什么?
前端·javascript·vue.js
Highcharts.js33 分钟前
数据可视化避坑指南 ——开发中常见图表错误与修复方案
javascript·信息可视化·数据可视化·highcharts·数据可视化避坑·修复方案
观无1 小时前
若依EasyExcel实现单元格合并
开发语言·前端·javascript
愚公搬代码1 小时前
【愚公系列】《Web应用安全》001-VMware的安装
前端·安全
xiaohaiAIgeo1 小时前
【2026年】HG/T 20656-2024化工暖通空调设计规范:新版标准的变化与影响
java·前端·javascript·科普知识
立少→万能汉编1 小时前
用“立少→超文本”写静态网页,标签<倍>
服务器·前端·javascript
weixin_431600441 小时前
NestJS 入门(7):生命周期钩子——构造函数和 `OnModuleInit` 差在哪?
前端·后端·学习·node.js·nest.js
你挚爱的强哥2 小时前
【chromeDownload】自定义组件:多用于登录框底部提供下载Chrome谷歌浏览器的链接
前端·vue.js·chrome
cindershade2 小时前
用原生 HTML5 视频与 Canvas 实现浏览器端视频抽帧封面
前端
笨鸟先飞,勤能补拙2 小时前
Web 服务器与计算机网络全景原理
运维·服务器·前端·网络·人工智能·计算机网络·web安全