ES6中的类(Class)

news/2024/7/11 0:44:25 标签: ES6, , Class

有过JavaScript开发经历的小伙伴们肯定都知道,class这个关键字一直以来都是作为系统保留字而不允许使用。而在ES6中,class关键字终于排上了用场。

文章目录

    • 实例的构造
    • 表达式
    • 的静态方法
    • 与构造函数的不同点

虽然说JavaScript也正儿八经是一个面向对象的语言,但很长一段时间以来JavaScript中的一直都是“有实无名”。

说“有实”是因为在ES6之前的标准中我们可以通过函数跟原型来实现大部分“”的功能和概念。说“无名”是因为,这确实不能称得上是传统的概念。

而事实上,ES6class也只是一个语法糖。但是新的class写法可以让的定义、继承更加的清晰,语法更加的面向对象。

ES6以前,定义一个如下:

function Foo(x,y){
    this.x = x;
    this.y = y;
}
Foo.prototype.sayX = function(){
    console.log(this.x);
}

而用class改写之后如下:

class Foo{
    constructor(x, y){
        this.x = x;
        this.y = y;
    }
    
    sayX(){
        console.log(this.x);
    }
}

Foo这个中的constructor方法便是构造方法,它对应旧的写法中的Foo函数。

除了构造函数,Foo中还定义了一个sayX方法,定义方法的时候前面不需要加入“function”,加了是会报错的。方法与方法之间也不需要加逗号,加了也会报错

在这里插入图片描述


因为class就是一个语法糖,所以ES6实质上仍然是函数,也具有原型。

在这里插入图片描述

可以看出classES6之前的构造函数在行为上有许多相似。

也有不同点,使用class定义的使用时前面必须加new关键字,否则会报错。

在这里插入图片描述

实例的构造

当使用new命令实例化一个的时候,会自动调用声明中的constructor方法。一个必须得有一个constructor方法,若没有显式声明,则会默认添加一个空白的constructor方法。

表达式

JavaScript中函数表达式,即let foo = function(){}这样的形式。而也同样能用表达式的形式定义。

let newClass = class self{
    getNmae(){
        return self.name;
    }
}

上面就使用表达式的方法定义了一个,虽然说这个累的名字是self,但是self也只能在的内部可用,用来指代当前的外部只能通过newClass来使用它。

注:名亦可省略,若内部不需要指向自己

的静态方法

在很多语言中,在方法前面加个static就会使该方法变为静态,成为只能通过来调用的方法。

而在ES6中也加入了似的特性,例如:

class Foo{
    static test(){
        console.log(this === Foo);
    }
}

上面代码中定义了一个名为test的静态方法,该方法的执行结果是输出了true。这说明了,在静态方法内部的this指向的是自己。

静态方法不会被实例继承,如果实例去调用静态方法则会报错。

与构造函数的不同点

  1. 的内部默认是严格模式。
  2. 不存在函数提升。这一点与ES6之前的版本非常不同,这是因为要照顾到继承,必须保证子在父之后定义。

http://www.niftyadmin.cn/n/1700718.html

相关文章

svn (cornerstone)创建分支和合并

SVN创建分支和合并 先将SVN上面的项目框架搭建好(trunk主干,branches分支,tags冻结)2. 点击trunk文件夹,选择changantravel,点击branch创建分支 填写分支名称(以日期或模块或组件命名比较好区分) where这个不能默认,要重新选择位置(文件夹下branches) 这样分支就创建成功了 3. …

C语言汉诺塔递归

#include<stdio.h>void Hanoi(int n,char A,char B,char C);int main() {Hanoi(

MySQL入门笔记(二)

MySQL的数据类型、数据库操作、针对单表的操作以及简单的记录操作可参考&#xff1a;MySQL入门笔记&#xff08;一&#xff09; 五、子查询 子查询可简单地理解为查询中的查询&#xff0c;即子查询外部必然还有一层查询&#xff0c;并且这里的查询并非仅仅指SELECT的查询操作&a…

pandas apply lambda_Pandas循环提速7万多倍!Python数据分析攻略

乾明 编译整理 量子位 报道 | 公众号 QbitAI用Python和Pandas进行数据分析&#xff0c;很快就会用到循环。但在这其中&#xff0c;就算是较小的DataFrame&#xff0c;使用标准循环也比较耗时。遇到较大的DataFrame时&#xff0c;需要的时间会更长&#xff0c;会让人更加头疼。现…

XSS和CSRF的简述与预防

文章目录XSS预防输入过滤输出编码Cookie防盗CSRF例子预防区别XSS 跨站脚本XSS&#xff0c;全称为(Cross-site scripting)&#xff0c;因为可能会与层叠样式表(Casading style sheet)英文简称相同而产生歧义&#xff0c;因此将“C”改为“X”。 攻击者在网页中嵌入JavaScript脚…

mmdetection默认下载的预训练权重文件存在本地的位置

C:\Users\Administrator.cache\torch\hub\checkpoints 取消预训练这样&#xff1a;

JavaScript的事件的节流与防抖

在前端开发中经常会碰到一些频繁的事件触发&#xff0c;例如&#xff1a; mouseoverkeydownresizescroll… 为了演示&#xff0c;写了个demo <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"v…