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


目录
相关文章
|
2天前
|
前端开发 JavaScript
js遍历添加栏目类添加css,再点击其它删除css
该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。
6 0
|
3天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
21 2
|
8天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
5 0
|
10天前
|
存储 移动开发 JavaScript
uni-app 64聊天类chat.js封装(一)
`uni-app` 是一个使用 Vue.js 开发所有前端应用的框架,可以编译到iOS、Android、H5以及各种小程序等多个平台。当你提到“64聊天类`chat.js`封装”时,我假设你希望了解如
|
11天前
|
前端开发 JavaScript API
Vue.js:渐进式JavaScript框架-前端开发
Vue.js:渐进式JavaScript框架-前端开发
20 3
|
14天前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的网络类课程思政学习系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的网络类课程思政学习系统附带文章和源代码设计说明文档ppt
13 0
|
14天前
|
JavaScript Java 测试技术
基于ssm+vue.js的新闻类网站附带文章和源代码设计说明文档ppt
基于ssm+vue.js的新闻类网站附带文章和源代码设计说明文档ppt
14 2
|
17天前
|
缓存 前端开发 JavaScript
基于JavaScript的前端性能优化技术探讨
基于JavaScript的前端性能优化技术探讨
28 1
|
20天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
23 1
|
30天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
61 5