【JS】类 class

news2024/11/23 8:36:43

【JS】类 class

        • 定义类
        • 类的方法
        • 类继承
        • 静态方法

类(class)是用于创建对象的模板。

我们使用 class 关键字来创建一个类,类体在一对大括号 {} 中,我们可以在大括号 {} 中定义类成员的位置,如方法或构造函数。

每个类中包含了一个特殊的方法 constructor(),它是类的构造函数。

这种方法用于创建和初始化一个由 class 创建的对象。

定义类

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

你首先需要声明你的类,然后再访问它,否则类似以下的代码将抛出 ReferenceError:

创建一个类的语法格式如下:

// name 是类的名称
// params 是实例化时穿的参数

class name {
    constructor(params) {
        
    }
}

栗子:

// 定义一个名字为 Boy 的类
class Boy {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// 使用 new 关键字来创建对象:创建对象时会自动调用构造函数方法 constructor()
let xiaomage = new Boy('小马哥', 30); // { name: '小马哥', age: 30 }
let maliao = new Boy('马立奥', 3); // { name: '马立奥', age: 3 }

在这里插入图片描述

构造方法 constructor 是一种特殊的方法:

  • 构造方法名为 constructor()。
  • 构造方法在创建新对象时会自动执行。
  • 构造方法用于初始化对象属性。
  • 如果不定义构造方法,JavaScript 会自动添加一个空的构造方法。

类的方法

我们使用关键字 class 创建一个类,可以添加一个 constructor() 方法,然后添加任意数量的方法。

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

以下实例创建一个 “say” 方法:

class Boy {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {
    return '干啥'
  }
}

let maliao = new Boy('马立奥', 3);
let say = maliao.say();
console.log(say); // 干啥

还可以向类的方法传递参数

class Boy {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say(data) {
    return '干啥,' + data;
  }
}

let maliao = new Boy('马立奥', 3);
let say = maliao.say('我是马立奥');
console.log(say); // 干啥,我是马立奥

在这里插入图片描述

class Boy {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say(data) {
    return '干啥,' + data;
  }
}
let maliao = new Boy('马立奥', 3);
let say = maliao.say('我是马立奥');
console.log(say); // 干啥,我是马立奥

类继承

JavaScript 类继承使用 extends 关键字。

继承允许我们依据另一个类来定义一个类,这使得创建和维护一个应用程序变得更容易。

super() 方法用于调用父类的构造函数。

当创建一个类时,您不需要重新编写新的数据成员和成员函数,只需指定新建的类继承了一个已有的类的成员即可。这个已有的类称为基类(父类),新建的类称为派生类(子类)

继承代表了 is a 关系。例如,哺乳动物是动物,狗是哺乳动物,因此,狗是动物,等等。

在这里插入图片描述

// 基类
class Animal {
    // eat() 函数
    // sleep() 函数
};
 
 
//派生类,继承基类 Animal
class Dog extends Animal {
    // bark() 函数
};

以下实例创建的类 “LittleBoy” 继承了 “Boy” 类:

class Boy {
  constructor(name) {
    this.name = name;
  }
  say() {
    return 'hi'
  }
}
class LittleBoy extends Boy {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  sayHello() {
    return this.say() + ',我今年' + this.age + '岁啦!';
  }
}

const maliao = new LittleBoy('马立奥', 3);
console.log(maliao); // { name: '马立奥', age: 3 }
console.log(maliao.say()); // hi
console.log(maliao.sayHello()); // hi,我今年 3岁啦。

在这里插入图片描述

super() 方法引用父类的构造方法。

通过在构造方法中调用 super() 方法,我们调用了父类的构造方法,这样就可以访问父类的属性和方法。

继承对于代码可复用性很有用。

静态方法

静态方法是使用 static 关键字修饰的方法,又叫类方法,属于类的,但不属于对象。

在实例化对象之前可以通过 类名.方法名 调用静态方法。

静态方法不能在对象上调用,只能在类中调用。

class Boy {
  constructor(name) {
    this.name = name;
  }
  static say(x) {
    return 'hi ' + x.name
  }
}

let maliao = new Boy('马立奥');
console.log(maliao); // { name: '马立奥' }

// 这样直接调用会报错,实例对象不能调用静态方法
console.log(maliao.say()); 

// 如果想在对象 maliao 中使用静态方法,可以作为一个参数传递给它:
console.log(Boy.say(maliao)); // hi 马立奥

在这里插入图片描述

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

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

相关文章

Java-很深我只知其一-泛型

Java-很深我只知其一-泛型 目录 泛型历史 泛型类/泛型接口 泛型方法 泛型属性 泛型约束 泛型历史 JAVA 泛型(generics)是 JDK 5 中引入的一个新特性, 允许程序员在编程时指定类型参数,使编译器可以在编译代码时检测到非法的类型。泛型的…

商城免费搭建之java商城 开源java电子商务Spring Cloud+Spring Boot+mybatis+MQ+VR全景+b2b2c bbc

 1. 涉及平台 平台管理、商家端(PC端、手机端)、买家平台(H5/公众号、小程序、APP端(IOS/Android)、微服务平台(业务服务) 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、R…

面试之HashMap

1.什么是集合框架Java的集合主要有两个根接口Collection和Map派生出来的,Collection派生出来了三个子接口:List,Queue,Set。因此Java集合大致可分为List,Queue,Set,Map四种体系结构。2.HashMap与TreeMapHashMap是直接实现Map接口,而TreeMap是实现SortedMap接口的,所以两个还…

RISC-V - 小记

文章目录 关于 RISC-V安装 关于 RISC-V RISC : Reduced Instruction Set Computing RISC-V(“RISC five”)的目标是成为一个通用的指令集架构(ISA) 官网:https://riscv.orggithub : https://github.com/riscv 教程 [完结] 循序渐进,学习开发一个RISC-…

如何与 Dillard‘s 建立 EDI 连接?

Dillards 是主营时装、化妆品和家居用品的零售商,为顾客提供高质量的商品和优质的购物体验。2022年,Dillards 公司位列当年《财富》美国 500 强排行榜第 488 名。本文将为大家介绍 Dillards 的 EDI 需求,了解如何快速对接 Dillards EDI。 Dil…

Stable Diffusion - Stable Diffusion WebUI 支持 SDXL 1.0 模型的环境配置

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/132056980 SDXL v1.0 版本 是 Stable Diffusion 的最新版本,是基于潜在扩散模型的文本到图像生成技术,能够根据输入的任何…

瀑布流布局columns

瀑布流布局其核心是基于一个网格的布局,而且每行包含的项目列表高度是随机的(随着自己内容动态变化高度),同时每个项目列表呈堆栈形式排列,最为关键的是,堆栈之间彼此之间没有多余的间距差存大。还是上张图…

sass的模块化,@import的编译时和运行时详解

sass如同css一样 可以模块化。 css中通过import来实现模块化, 但是两者有些不同,css是会参与到运行时的,也就是说运行的过程中有多个css文件,通过import指令导入进来。但是sass并不是个运行时态,sass是一个编译时态。…

六、JVM-垃圾收集器浅析

垃圾收集器浅析 主 JVM参数 3.1.1 标准参数 -version -help -server -cp3.1.2 -X参数 非标准参数,也就是在JDK各个版本中可能会变动 -Xint 解释执行 -Xcomp 第一次使用就编译成本地代码 -Xmixed 混合模式,JVM自己来决定3.1.3 -XX参数 使用得…

图片怎么压缩大小?值得一看的图片压缩方法

图片是我们生活和工作中必不可少的文件,为了能够有效保存、发送,我们需要适当压缩其大小,但很多朋友不知道怎么压缩图片,或者压缩后造成了图片清晰度受损,怎么才能既压缩图片的大小,又能避免清晰度受到影响…

为什么选择Docusaurus构建API文档?

在现代化软件开发中,文档对于软件成功的重要性不言而喻。然而,管理和维护文档站点往往会给开发者带来额外的负担。为了帮助开发人员快速构建易于管理和维护的文档站点,Docusaurus应运而生。本文将深入探讨为什么选择Docusaurus构建您的文档站…

Activiity跳转startActivity源码分析Activity启动流程(下)

调用ActivityThread子类ClientTranslationHandler的scheduleTranslation 注意上图有个sendMessage的 接着会执行translacationExecutor的execute方法。 都会走cycleToPath方法 cycleToPath方法对应的performLifecycleSequence 调用Actvitiy各个生命周期。 然后是第二种情况&am…

效率提升丨大学必看校园安全实用技巧

在当今社会,教育是培养人才、传承文明的重要场所。然而,教学楼作为学生、教师和员工活动的核心区域,也存在着潜在的安全隐患,其中最为突出的风险之一是火灾。火灾不仅危及生命财产,还可能给整个学校带来不可估量的损失…

五个BLOCK问题

block的原理是怎样的?本质是什么? 一个含有自动变量的匿名函数 Block 的本质是一个封装了函数及其调用环境的 Objective-C 对象 一个 block 实际是一个对象,它主要由一个 isa 和 一个 impl 和 一个 descriptor 组成。 是封装了函数代码以…

华为OD面试总结和建议:全程线上面试的经验分享

目录 导语一、准备工作:二、面试前:三、面试过程:1. 视频面试技巧:2. 技术问题准备: 四、面试后:结束语 导语 导语:随着技术的发展,线上面试在招聘过程中扮演着越来越重要的角色。作…

11万多英藏对照词典英藏翻译ACCESS\EXCEL数据库

今天继续发一个藏文藏语相关的翻译数据库,即英藏对照词典,加上《5万6千多藏文词典解释ACCESS数据库》以及昨天发的《近13万汉藏对照词典汉藏翻译ACCESS\EXCEL数据库》藏文类的数据就算较全了。 截图下方有显示“共有记录数”,截图包含了表的所…

js方法:toLocaleString()

js中的toLocaleString()方法用于将数字转换为本地化的字符串表示形式。 语法: number.toLocaleString([locales [, options]]) locales(可选):一个字符串、字符串数组,表示要使用的语言或一组语言。例如,&…

拍立淘是如何实现的?

淘宝拍立淘功能是很多网购的网民经常会用到的一个功能。拍立淘的图片搜索商品列表接口功能是指用户可以通过上传一张商品图片,拍立淘会根据该图片进行识别和匹配,以找到与该图片相似或相同的商品,并将搜索到的商品列表返回给用户。以下是该接…

《深度探索c++对象模型》第五章笔记

非原创,在学习 5 构造、解构、拷贝语意学Semantics of Construction,Destruction, and Copy 考虑下面这个abstract base class声明: class Abstract_base { public:virtual ~Abstract_base() 0;virtual void interface() const 0;virtual const char*mumble() c…

Robot Framweork之UI自动化测试---分层设计

Robot Framework 的分层思想是一种测试设计和代码组织的模式,它将测试用例的实现和测试执行逻辑分离,以提高测试的可维护性、可读性和可扩展性。 一、分层思想 在实际项目中,一般分为三层:元素层,流程层,用…