百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程文章 > 正文

JS中的类?class语法糖??? 两分钟秒了

qiyuwang 2024-11-17 15:09 9 浏览 0 评论

前言

JS中有类?我们都知道JavaScript是基于原型的语言,并没有内置的类概念。但从ES6开始,JavaScript引入了class关键字作为语法糖,它提供了一种更简洁、更类似于传统面向对象编程的语法来创建对象。

class关键字在语法上类似于许多其他基于类的语言,如Java或C++,但JavaScript的类仍然是基于原型的。

正文

class语法糖有哪些基本用法?

一,定义类

在JavaScript中,你可以使用class关键字来定义一个类。类是一个抽象的概念,它描述了具有相同属性和方法的对象的集合。在类中一定有一个构造器函数constructor,我们可以在constructor中接收参数,将我们需要的参数都加进去。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name} and my age is ${this.age}`);
    }
}

在上面的例子中,我们定义了一个名为MyClass的类,它有一个构造函数(constructor)和一个方法(sayHello)。构造函数在创建类的实例时被调用,它接受一个参数name并将其存储在实例上。sayHello方法用于打印一条问候信息。

二, 创建类的实例

创建类的实例就是将类实例化,我们使用new关键字调用类的构造函数来创建一个新的对象,这个对象就是该类的实例。

这个新创建的对象会继承类的所有属性和方法(除非它们是静态的),并且可以有自己的状态(即实例属性和方法)。这里以我自己为例

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name} and my age is ${this.age}`);
    }
}
let p = new Person('绵绵冰', 18);//调用然后传入参数
console.log(p);

p.sayHello();

在上面的例子中,我在class类里面传入了参数,定义了一个sayHello方法;我将这个类实例化为p,这个p可以访问我在类中定义的方法

类的实例对象可以访问类中的方法,就像原型一样

类的原型机制

为什么类能实现这样的功能呢?当然和原型离不开关系,因为我们都知道JS是基于原型的语言。js的类也是基于原型的

他的运行机制主要有三步:

1.类定义

因为当你定义一个类时,实际上你定义了一个构造函数(通过class关键字),并且在这个构造函数上挂载了一些属性和方法。这些属性和方法实际上是定义在构造函数的prototype对象上的。

2.创建实例

当你使用new关键字创建类的实例时,JavaScript引擎会执行以下步骤:

  • 创建一个新的空对象。
  • 将这个新对象的__proto__设置为类的prototype对象。
  • 执行构造函数,并将this绑定到新创建的对象上。
  • 如果构造函数返回了一个对象,那么这个对象将成为new表达式的返回值;否则,返回新创建的对象。

3.访问属性和方法

由于实例的__proto__指向了类的prototype对象,所以当你尝试访问实例上的一个属性或方法时,JavaScript会首先在实例自身上查找。如果找不到,它会继续在实例的原型链上查找,直到找到为止,或者直到原型链的末尾(即Object.prototype)

三,继承类

既然JS中的类也是基于原型的,那么就一定和原型一样有类似的继承方法。

在JS中,我们可以使用extends关键字来让一个类继承另一个类的属性和方法。这允许你创建更复杂的类结构,并实现代码的重用。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name} and my age is ${this.age}`);
    }
}

class Person2 extends Person {
    constructor(name, age) {
        super(name); // 调用父类的构造函数  
        this.age = age;
    }

    introduce() {
        console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
    }
}

const p2 = new Person2('绵绵冰2', 25);
p2.sayHello();
p2.introduce(); 

在上面的例子中,p2就继承了p的class里面的属性和方法,并且添加了新的方法introduce来介绍自己。

四, 静态方法

在JavaScript中,我们可以使用static关键字来定义静态方法。静态方法是挂载在类上的方法,而不是类的实例上。这意味着我我们可以直接通过类名来调用静态方法,而不需要创建类的实例。

class greet {
    static greet() {
        console.log('Hello from a static method!');
    }
}

greet.greet(); // 输出: Hello from a static method!

在这个例子中,我们定义了一个名为greet的类,并在其上定义了一个静态方法greet。我们直接通过类名调用了这个方法,而无需创建类的实例。

五,类中访问器

这是一种特殊类型的方法,用于读取和写入对象的属性。访问器由getter和setter方法组成。getter方法是一个没有参数的方法,用于返回与对象属性相关联的值。setter方法则接收一个参数(即要写入属性的值),并用于修改与对象属性相关联的值。

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }

    // getter方法,用于读取_name属性  
    get name() {
        return this._name;
    }
    get age() {
        return this._age;
    }
    // setter方法,用于设置_name属性  
    set age(newAge) {
        this._age = newAge;
    }

    set name(newName) {
        this._name = newName;
    }
}

const person = new Person('绵绵冰', 18);

// 使用getter方法读取属性  
console.log(person.name);
console.log(person.age);

// 使用setter方法设置属性  
person.name = '绵绵冰2号';
person.age = 20;

// 再次使用getter方法读取属性,验证setter方法是否生效  
console.log(person.name);
console.log(person.age);

在上面这个简单的例子中,我们通过get方法拿到了name和age并且将他们转化为了私有属性(使用下划线前缀表示私有属性,尽管在JavaScript中并不是真正的私有),再通过set将这些属性设置为新的属性值。但是这个简单的例子存在一些问题,我们需要对传入的参数进行一些判断

  • 使用 typeof判断输入参数的类型
  • 使用 trim()移除字符串开头和结尾的空白符
  • 判断经过trim处理后的字符是不是一个空字符,不是空字符返回true
  • 使用 &&将两个判断连接,只有当这两个判断都为true时,整个表达式才会返回true
  • 否则console.error
class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }
    get name() {
        return this._name;
    }
    get age() {
        return this._age;
    }
    set name(newName) {
        // 在这里添加一些验证逻辑  
        if (typeof newName === 'string' && newName.trim() !== '') {
            this._name = newName;
        } else {
            console.error('无效');
        }
    }
    set age(newAge) {
        if (typeof newAge === 'number' && newAge >= 0) {
            this._age = newAge;
        } else {
            console.error('无效');
        }
    }
}
const person = new Person('绵绵冰', 18);

console.log(person.name);
console.log(person.age);


person.name = '绵绵冰2';
person.age = 20;

console.log(person.name);
console.log(person.age);

// 尝试设置一个无效的值,查看setter方法中的验证逻辑是否生效  
person.age = '十八'; // 这将触发setter方法中的console.error



原文转自:https://juejin.cn/post/7382022102679207955

相关推荐

第二十六章 Bat文件(bat文件百科)

第二十六章Bat文件bat文件是dos下的批处理文件。批处理文件是无格式的文本文件,它包含一条或多条命令。它的文件扩展名为.bat或.cmd。在命令提示下输入批处理文件的名称,或者双击该批处理...

自媒体良器:音频文件批处理,FFmpeg一行搞定!果断收藏

引言FFMpeg是众多多媒体应用程序的核心,但该程序本身不具备一次转换多个文件的能力。但也拦不住,FFMpeg本身是命令行程序,可编写脚本,借助Bash轻松快速地构建自动化程序。...

批处理:创建和删除文件夹命令(批处理命令 删除文件夹)

上一期,我们学习了文件夹的查看命令:tree和dir,以及文件夹切换命令:cd,今天,我继续给大家讲解下批处理的目录(文件夹)操作命令:创建和删除。一.md:创建目录(文件夹)可以在当前文件夹下创建...

利用VBA创建新的工作簿(vba 创建工作簿)

【分享成果,随喜正能量】我告诫自己:你的话说得太多,你听别人倾诉得太多,你咖啡喝得太多,你在陌生的房间里坐的时间太长,你的睡眠质量太差,你醒着的时间太长,你平庸的事想得太多,你希望过多,你安慰自己太频...

实用小工具,注册表文件快速转换.bat文件

关于注册表注册表是Windows操作系统中的一个核心数据库,它用于存储系统和应用程序的设置信息。这个数据库文件控制着Windows操作系统的外观和如何响应外来事件的工作方式。注册表包含了各种参数,直接...

如何给自己的电脑做一个截图工具?现场教会你具体流程和步骤

做自媒体,经常要用到一些图片,有时候图片上有水印去不掉,这时候要是有一个能随意截图的工具该有多少呀!今天教授让大家自己设计一个截图工具。下面就是流程和步骤:1、在电脑页面的任意位置,点击鼠标右键,新建...

Windows使用批处理文件更改目录下的文件名(含序号)

从网上下载的图片,默认的名字是由许多字母和数字组成的比较长的一个字符串,不便于人记忆,使用起来比较麻烦。如下图所示:本文的目的是写一个批处理文件,将该目录中的所有扩展名为jpeg的文件改名为日期加序号...

学习VB编程第35天,如何调用bat批处理

今天学习了刘金玉老师零基础VB教程的第43期,学习的主要内容是如何调用bat批处理登录。一、什么是批处理1.什么是命令提示符(cmd)?在Windows开始菜单运行(windows+r键也可调出)中输...

利用bat让文件在指定时间自动进行备份

在很多时候,我们需要备份电脑中的一些文件,特别是企业服务器的备份,可能是有一些文件每天都会有更新,或者定期更新,而文件又是相对比较重要的,需要我们定时去备份。可有时候文件比较大,备份时间比较长,或者在...

BAT 批处理脚本教程(批处理脚本编写教程)

BAT批处理脚本教程第一章批处理基础第一节常用批处理内部命令简介批处理定义:顾名思义,批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩展名为BAT或者CMD。这些命令统称批处...

Windows系统bat批处理常用命令(一)

一、批处理中常用的命令:@命令:加在每个命令行的最前面,表示运行时不显示这一行的命令行。eg:@echooff//不显示后续命令行及当前命令行...

编写bat文件在windows上自动执行cmd命令

windows电脑上直接新建txt记事本文件,编写好要执行的命令后,将后缀修改成.bat,然后直接点击文件就可以执行里面的命令了#打开命令窗口startcmd#/k执行完命令不关...

不会C语言写bat脚本代码批量修改文件名,DeepSeek帮你解决!

哈喽大家好,我是小飞。今天给大家讲一下DeepSeek做了一个批量修改文件夹的bat脚本。·首先先让它这样修改一下,因为之前已经做过一个,然后它没有改,现在让它修改一下,把它修改一个很智能的BAT脚本...

BAT批处理命令之ren/rename(与Excel合作批量修改文件名)

写在前面一鸽就是半年...

使用批处理文件——autoexec.bat(批处理more)

1、dblspace.sys磁盘压缩。  drvspace.sys、dblspace和drvspace是Microsoft公司推出的磁盘压缩工具,可以将磁盘的空间增加许多,但由于它依靠对文件进行压...

取消回复欢迎 发表评论: