前端 js 经典:class 类

简介: 前端 js 经典:class 类

1. 定义

函数声明和类声明之间的一个重要区别在于,函数声明会提升,类声明不会。

// 类声明
class Person {}
 
// 类表达式
const Person = class {};

2. 类构造函数

// constructor 方法是一个特殊的方法,一个类只能有一个,如果没定义,默认添加一个空的constructor函数
// 使用new操作符实例化Person的操作等于使用new调用其构造函数。
class Person {
  constructor(name, age) {
    this.type = "人";
    this.name = name;
    this.age = age;
  }
  say() {
    console.log("hello");
  }
}
 
let yqcoder = new Person("yqcoder", 18); // Person {type: '人', name: 'yqcoder', age: 18}

3. getter 和 setter

// 在 class 内部可以使用 get 与 set 关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
class Person {
  constructor(name, length) {
    this.name = name;
    this.length = length;
  }
 
  get nameL() {
    return this.name.length;
  }
 
  set nameL(value) {
    console.log("设置长度");
    this.length = value;
  }
}
 
let yqcoder = new Person("yqcoder"); // Person {name: 'yqcoder', length: undefined}
yqcoder.nameL; // 7
yqcoder.nameL = 9; // 设置长度
yqcoder; // Person {name: 'yqcoder', length: 9}

4. Generator 方法

// generator 函数 具有迭代功能
class Person {
  constructor(...args) {
    this.args = args;
  }
  *generatorFn() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}
 
let yqcoder = new Person(1, 2, 3, 4); // Person {args: Array(4)}
let generatorNext = yqcoder.generatorFn();
generatorNext.next(); // {value: 1, done: false}
generatorNext.next(); // {value: 2, done: false}
generatorNext.next(); // {value: 3, done: false}
generatorNext.next(); // {value: 4, done: false}
generatorNext.next(); // {value: undefined, done: false}

5. 静态属性、方法

// 静态的就是类实例不能调用,只有类本身可以用。
// 属性或方法前加static关键字,就变成静态的了。
// 使用静态属性或方法就是为了阻止被类实例继承
class Person {
  constructor(name) {
    this.name = name;
  }
  static type = "person";
  static eat() {
    console.log("开饭了");
  }
}
 
let yqcoder = new Person("yqcoder"); // Person {name: 'yqcoder'}
yqcoder.type; // undefined
yqcoder.eat(); // yqcoder.eat is not a function
Person.type; // 'person'
Person.eat(); // 开饭了
 
// 类继承类,可以使用继承类里的静态属性和方法
class P1 extends Person {}
P1.type; // 'person'
P1.eat(); // 开饭了

6. 私有属性、方法

// 私有方法和私有属性,是只能在类的内部访问的方法和属性,外部不能访问。
// 属性或方法前加#关键字,就变成静态的了。
class Person {
  constructor(name) {
    this.name = name;
  }
  #type = "person";
  #eat() {
    console.log("开饭了");
  }
}

7. 类继承

// 语法:class 子类 extends 父类
// 子类中声明的方法名和父类中的方法名相同时,子类中的方法将覆盖继承于父类的方法,采用自己的
// 父类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
// 子类 super() 函数必须用
class Student extends Person {
  constructor(name, age, study) {
    super(name, age);
    this.study = study;
  }
}


目录
相关文章
|
5天前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
28 7
|
6天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
27 0
|
3天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
13 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
6天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
61 1
前端JS发起的请求能暂停吗?
|
3天前
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
13 2
|
3天前
|
存储 JavaScript 前端开发
【JavaScript】JavaScript 中的 Class 类:全面解析
【JavaScript】JavaScript 中的 Class 类:全面解析
11 1
|
6天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
8月前
|
存储 前端开发 JavaScript
手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】
html页面的骨架,相当于人的骨头,只有骨头是不是看着有点瘆人,只有HTML也是如此。 css,相当于把骨架修饰起来,相当于人的皮肉。
44 0
|
前端开发 JavaScript 开发者
JavaScript 类继承
和其他功能一样,ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者,你有权决定最适用的继承方式。
1019 0
|
JavaScript 前端开发 程序员
对Javascript 类、原型链、继承的理解
一、序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承。
1093 0

热门文章

最新文章