JS 类总结

news2024/10/6 14:27:58

class 关键字是 ES6 新增的。类(class)是ECMAScript 中新的基础性语法糖,本质上还是一个函数,但实际上它使用的仍然是原型和构造函数的概念。并且类受块级作用域限制。

class Person { }
console.log(Person);// class Person { }

定义类

类定义中的代码默认都在严格模式下执行。类包含如下可选内容:

  • 构造函数方法
  • 实例方法
  • 获取函数
  • 设置函数
  • 静态类方法。

空的类定义照样有效。

  • 类声明
    类定义没有像函数那样的声明提升。
class Person {} 
  • 类表达式
    类表达式不能在它们被求值前使用。
const Animal = class {}; 

类的组成

构造函数

在使用 new 操作符创建类的新实例时,会调用 constructor 方法,主要作用是初始化数据。不是必需的,不定义构造函数相当于将构造函数定义为空函数。

使用 new 调用类的构造函数会执行如下操作。

  1. 在内存中创建一个新对象。
  2. 这个新对象内部的 [[Prototype]] 指针被赋值为构造函数的 prototype 属性。
  3. 构造函数内部的 this 被赋值为这个新对象(即 this 指向新对象)。
  4. 执行构造函数内部的代码(给新对象添加属性)。
  5. 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象。
class Animal { }
class Person {
  constructor(name) {
    this.name = name;
  }
}
let animal = new Animal();
let person = new Person('孤城浪人');
console.log(animal); //Animal {}
console.log(person); //Person {name: '孤城浪人'}

默认情况下,constructor 会在执行之后返回当前实例对象。如果 constructor 显示的 return 了一个对象,那么这个对象不会通过 instanceof 操作符检测出跟类有关联,因为这个对象的原型指针并没有被修改。

class Person {
  constructor(name) {
    this.foo = name;
    if (name) {
      return {
        name: 'XXXXX'
      };
    }
  }
}
let p1 = new Person(),
  p2 = new Person('孤城浪人');
console.log(p1); // Person {foo: undefined}
console.log(p1 instanceof Person); // true 
console.log(p2); // {name: 'XXXXX'}
console.log(p2 instanceof Person); // false

我们可以调用实例的 constructor 方法,因为他就是普通函数,只是必须使用 new 关键字调用罢了。

class Person {
  constructor(name) {
    this.foo = name;
  }
}
let p1 = new Person('孤城浪人'),
  p2 = new p1.constructor('XXXXX');
console.log(p1); // Person {foo: undefined}
console.log(p2); // Person {name: 'XXXXX'}

类可以立即调用

const person = new class Person {
  constructor(name) {
    this.name = name;
  }
}('孤城浪人')
console.log(person);// Person {name: '孤城浪人'}

成员

每次通过 new 调用类标识符时,都会执行类构造函数,这也就意味着在 constructor 中定义的成员每个实例都是一份新的,不会共享。但是不是在 constructor 中定义的成员(不能是原始值或对象)是定义在类的原型上,所有类的实例共享。

const person = class Person {
  constructor(name) {
    // 不共享
    this.name = name;
  }
  // 定义在类原型上共享
  sayName() {
    console.log(this.name);
  }
}

类定义也支持获取和设置访问器,方法名支持字符串、符号或计算的值。

class Person {
  set name(newName) {
    this.name_ = newName;
  }
  get name() {
    return this.name_;
  }
  ['sa' + 'y']() {
    console.log('xxxx');
  }
}
new Person().say();

静态方法

类可以定义静态方法。它的调用不依赖于实例,静态方法的方法名不能重复

class Person {
  static sayHellow() {
    console.log('Hellow');
  }
  static say() {
    console.log('xxxx');
  }
}
Person.say();//Hellow
Person.sayHellow();//xxxx

迭代

类支持在原型和类本身定义生成器方法,因此可以添加一个默认的迭代器,把类实例变成可迭代对象。

class Person {
  constructor() {
    this.names = ['孤城浪人', 'xxxx']
  }
  // [Symbol.iterator]() {
  //   return this.names.entries();
  // }
  *[Symbol.iterator]() {
    yield* this.names.entries();
  }
}
const person = new Person();
for (let item of person) {
  console.log(item);
}
// [0, '孤城浪人']
// [1, 'xxxx']

继承

这是类最优秀的特性,原生支持继承,但是本质上还是利用了原型链。使用 extends 关键字,就可以继承任何拥有[[Construct]]和原型的对象,前面说过类就是一个语法糖,他本质上是一个函数,所以 extends 不仅可以继承一个类,也可以继承普通的构造函数。并且 this 永远指向当前实例。

function Person() { };
class Father extends Person {
  say() {
    console.log(this);
  }
}
class Son extends Father { }
const son = new Son();
console.log(son instanceof Father);//true
console.log(son instanceof Person);//true
son.say();//Son{}

这个例子可以看到 Father 继承 Person,Son 继承 Father,所以最后 Son 的实例的原型链中有 Father
和 Person 的原对象,因此 instanceof 返回 true。

super

如果子类需要调用父类的构造函数 constructor 初始化数据,那么只能在子类的构造函数中使用 super 关键字,此外在实例方法和静态方法内部也可以使用 super 关键字。(ES6 给类构造函数和静态方法添加了内部特性 [[HomeObject]] 指向定义该方法的对象。 super 始终会定义为 [[HomeObject]] 的原型)

注意:子类若定义了 constructor 则一定要调用 super,并且不要在调用 super 之前引用 this,否则会抛出 ReferenceError,

class Father {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(this);
  }
}
class Son extends Father {
  constructor() {
    super('孤城浪人');
  }
  sayName() {
    console.log('sayName')
    super.say();
  }
}
const son = new Son();
son.sayName();
// sayName
// Son { name: '孤城浪人' }

如果子类没有构造函数,在实例化子类时会自动调用 super(),而且会把所有传给子类的参数作为 super 的参数传入。

class Father {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(this);
  }
}
class Son extends Father {}
const son = new Son('孤城浪人');
son.say();
//Son { name: '孤城浪人' }

抽象基类

抽象基类就是可供其他类继承,但本身不会被实例化的类。可以在构造函数中使用 new.target 属性阻止抽象基类实例化,也可以在其中强制子类要定义某个方法。

class Father {
  constructor(name) {
    if (new.target == Father) {
      throw new Error('不能实例化');
    }
    if (!this.say) {
      throw new Error('缺少say方法');
    }
  }
}
class Son extends Father {
  constructor(name) {
    super();
    this.name = name;
  }
  say() {
    console.log(this.name);
  }
}
const son = new Son('孤城浪人');
son.say();//孤城浪人
new Father()

在这里插入图片描述

我是孤城浪人,一名正在前端路上摸爬滚打的菜鸟,欢迎你的关注。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/20008.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java无锁并发

共享资源 1. 不安全场景 package com.nike.erick.d05;import lombok.Getter;import java.util.concurrent.TimeUnit;public class Demo01 {public static void main(String[] args) throws InterruptedException {BankService bankService new BankService();for (int i 0;…

H5 app开启web调试

前言: 在Android app逆向时,H5类型的app的加密通常在js中,所以就需要一种手段来查看源代码,查看加密过程。 0、如何确认h5 app 以狗东为例: 随便选择一个元素,可以看到是控件下的一个类 通过与H5类型的ap…

[附源码]SSM计算机毕业设计在线课程网站JAVA

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

基于java_ssm_vue鲜花在线销售商城网站-计算机毕业设计

现在,许多人都喜欢在节日的时候给家人或朋友送鲜花,但是有时候会因为工作忙而忘记或者是没有时间自己去买,同时也有些人觉得自己去买有些麻烦,所以鲜花网络销售是很有必要的。这个网站应该可以提供提前预定、送货上门等服务。首先…

Arduino开发实例-MAX30100传感器模块连接问题解决

MAX30100传感器模块连接问题解决 MAX30100 是一款集成脉搏血氧饱和度和心率监测传感器解决方案。 它结合了两个 LED、一个光电探测器、优化的光学器件和低噪声模拟信号处理,以检测脉搏血氧饱和度和心率信号。 MAX30100 采用 1.8V 和 3.3V 电源供电,可通过软件关断,待机电流…

【Java第33期】:在普通的Maven项目中存储Bean对象并获取和使用

作者:有只小猪飞走啦 博客地址:https://blog.csdn.net/m0_62262008?typeblog 内容:存储Bean对象,再在Spring中获取Bean对象,对其进行使用。 文章目录前言一,存储Bean对象1,创建Bean对象2&…

过控Matlab-串级控制系统的参数整定(二)

太原理工大学过程控制实验之串级控制系统的参数整定 过控Matlab-串级控制系统的参数整定实验内容1.根据动态特性参数法对简单控制系统的控制器参数整定2.根据稳定边界方法对简单控制系统的控制器参数整定利用稳定边界法,分别计算系统采用P、PI、PID调节规律时的PID控…

玩机搞机---关于安卓机型工厂固件 刷机 端口解密 解bl锁 写串 nv损坏 等相关常识

*******工程机和工厂固件方面的常识 可能很多玩机友友对什么是工厂固件比较陌生。那么今天的话题就围绕这个和大家讨论下。其实一般厂家的流程都是在一部机型推放市场之前,需要经过预研企划、研发设计、全面测试等诸多环节。在这一整个改善的全过程中,厂…

使用Eclipse搭建STM32嵌入式开发环境

1. Eclipse 软件和相关工具的安装 使用 Eclipse 开发 STM32 等嵌入式软件项目时,需要安装的软件或者工具有: Eclipse 软件本身,eclipse-inst-jre-win64.exe交叉编译工具链,gcc-arm-none-eabi-10.3-2021.10-win32make 构建工具&a…

linux读写锁

这里写目录标题读写锁的认识读写锁的相关函数练习读写锁的认识 (1)读写锁是一把锁 (2)读写锁的类型: pthread_rwlock_t lock 又分“读锁”(对内存进行读操作)和“写锁”(对内存进行…

【数据结构Note5】- 树和二叉树(知识点超细大全-涵盖常见算法 排序二叉树 线索二叉树 平衡二叉树 哈夫曼树)

文章目录5.1 树和二叉树引入5.1.1 树的概念5.1.2 树的表示5.1.3 树中基本术语5.1.4 树的表示5.2 二叉树5.2.1 概念5.2.2 二叉树的性质5.2.3 特殊的二叉树5.2.4 二叉树的顺序存储5.2.5 二叉树的链式存储5.2.6 二叉树的深度优先遍历(递归)5.2.7 二叉树的遍…

[MQ] 死信队列介绍与场景描述

✨✨个人主页:沫洺的主页 📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏 📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专…

Js逆向教程-11常见混淆AA和JJ

Js逆向教程-11常见混淆AA和JJ js默认 支持Unicode的。 所以支持所有的国家语种。 有没有哪些国家的和O很像但不是O,和0很像但不是0,和p很像但不是p 所以可以用这个相近的符号进行代码混淆。 var O00OO,o00oo;一、AA混淆和OO混淆 https://www.sojson.com/aaencode.html 这个…

Docker guide

前言 docker学习记录&#xff0c;内容参考 Docker Training Course for the Absolute Beginner Basic Command docker pull <Image:只是下载image&#xff0c;不会运行docker run <Image>:启动image实例&#xff0c;如果image不在docker host上&#xff0c;docker会…

【长难句分析精讲】状语从句

1. 状语从句九大类 时间状语从句&#xff1a;after / before / when / while / as / since / once / until地点状语从句&#xff1a;where原因状语从句&#xff1a;because / as / for / since让步状语从句&#xff1a;though / although / even if even though / while / as…

[Spring Cloud] Eureka Server安装

✨✨个人主页:沫洺的主页 &#x1f4da;&#x1f4da;系列专栏: &#x1f4d6; JavaWeb专栏&#x1f4d6; JavaSE专栏 &#x1f4d6; Java基础专栏&#x1f4d6;vue3专栏 &#x1f4d6;MyBatis专栏&#x1f4d6;Spring专栏&#x1f4d6;SpringMVC专栏&#x1f4d6;SpringBoot专…

ARM仿真器J-Link灯不亮的解决办法

感慨&#xff1a; 网络世界真是越来越封闭了啊&#xff0c;下载东西越来越难。 解决问题会越来越难。 解决仿真器Jlink灯不亮这个问题用了一下午..... 步骤&#xff1a; &#xff08;弯路&#xff1a;windows安装AT91-ISP&#xff0c;发现SAM_PROG v2.4加载bin后不能点击Write…

Android Camera性能分析 第23讲 录像Buffer Path实战和Trace分析

​ 本讲是Android Camera性能分析专题的第23讲&#xff0c;我们介绍录像Buffer Path实战和Trace分析&#xff0c;包括如下内容&#xff1a; Video Codec MediaRecorder.getSurface录像Buffer Path Trace分析Video Codec2 MediaRecorder.getSurface录像Buffer Path Trace分析…

java计算机毕业设计组成原理教学网站(附源码、数据库)

java计算机毕业设计组成原理教学网站&#xff08;附源码、数据库&#xff09; 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项…

手把手教你搭建K8S集群

搭建前提条件&#xff1a;VMare16pro CentOS-7-x86_64-DVD-2009.iso镜像文件&#xff0c; 远程连接工具Xshell或者MobaXterm 首先创建三台centos7的虚拟机&#xff0c;装虚拟机的话大家可以参照网上资料&#xff0c;非常容易。 使用 kubeadm 安装 Kubernetes 集群 1&#…