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


目录
相关文章
|
6月前
|
JavaScript 前端开发 API
|
6月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
217 8
|
6月前
|
JavaScript 前端开发 容器
|
6月前
|
JavaScript 前端开发
|
6月前
|
存储 JavaScript 前端开发
|
6月前
|
移动开发 JavaScript 前端开发
|
6月前
|
存储 JavaScript 前端开发
|
6月前
|
JavaScript 前端开发
|
7月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5873 24
|
6月前
|
JavaScript 前端开发

热门文章

最新文章