首页 > 其他分享 >一文了带您了解 ES6 Class 用法

一文了带您了解 ES6 Class 用法

时间:2024-09-07 09:49:32浏览次数:16  
标签:ES6 console log Class Book constructor return 用法 class

文章目录


一、概述

  • ES6中的class是基于JavaScript中的一个强大的属性,也就是原型属性prototype,由这个属性改良得来的一种语法糖。
  • 在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。
  • class 的本质是 function

二、用法

2.1 基础用法

class 定义

// 匿名类
let Book = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名类
let Book = class Book {
    constructor(a) {
        this.a = a;
    }
}

注意:类定义不会被提升,必须在访问前对类进行定义,否则就会报错。
类中方法不需要 function 关键字,方法间不能加分号。
class的主体
属性prototype, 类的所有方法都定义在类的prototype属性上面

// 通过prototype动态添加方法
Book.prototype={
    //methods
}
// 通过Object.assign动态添加方法
Object.assign(Book.prototype,{
    //methods
})

ES6 中规定,class 内部只有静态方法,没有静态属性。

class Book {
	// 新提案, 不可用
    static a = 2;
}
// 目前可行写法
Book.b = 2;

// 公共属性
class Book{}
Book.prototype.a = 2;

// 实例属性,定义在实例对象( this )上的属性。
class Book {
    pro = 2;
    constructor () {
        console.log(this.pro);
    }
}

// name 类名属性
let Book = class Exam {
    constructor(a) {
        this.a = a;
    }
}
console.log(Book.name); // Exam
 
let Book = class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Book.name); // Book

方法

/** constructor 方法是类的默认方法,创建类的实例化对象时被调用。**/
class Book{
    constructor(){
      console.log('我是constructor方法');
    }
}
new Book(); // 我是constructor方法

/** 返回对象 **/
class Test {
    constructor(){
        // 默认返回实例对象 this
    }
}
console.log(new Test() instanceof Test); // true
 
class Book {
    constructor(){
        // 指定返回对象
        return new Test();
    }
}
console.log(new Book() instanceof Book); // false

/** 静态方法 **/
class Test{
    static sum(a, b) {
        console.log( a + b);
    }
}
Test.sum(1, 3); // 4

/** 原型方法 **/
class Test {
    sub(a, b) {
        console.log(a - b);
    }
}
let test = new Test();
test.sub(2, 1); // 1

/** 实例方法 **/
class Test {
    constructor() {
    }
    sum = (a, b) => {
            console.log(a + b);
    }
}
// 或者
class Test {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

实例化

// class 的实例化必须通过 new 关键字
class Test {}
let test = Test(); 
// Class constructor Example cannot be invoked without 'new'

decorator
装饰器,是一个函数,用来修改类的行为,用于扩展类属性和类方法

function testable(target) {
    target.isTestable = true;
}
@testable
class Example {}
Example.isTestable; // true
// 多个参数嵌套实现
function testable(isTestable) {
    return function(target) {
        target.isTestable=isTestable;
    }
}
@testable(true)
class Example {}
Example.isTestable; // true

方法修饰
3个参数:target(类的原型对象)、name(修饰的属性名)、descriptor(该属性的描述对象)

class Book {
    @writable
    sum(a, b) {
        return a + b;
    }
}
function writable(target, name, descriptor) {
    descriptor.writable = false;
    return descriptor; // 必须返回
}

// 修饰器执行顺序,由外向内进入,由内向外执行。
class Book {
    @logMethod(1)
    @logMethod(2)
    sum(a, b){
        return a + b;
    }
}
function logMethod(id) {
    console.log('evaluated logMethod' + id);
    return (target, name, desctiptor) => console.log('excuted logMethod ' + id);
}
// evaluated logMethod 1
// evaluated logMethod 2
// excuted logMethod 2
// excuted logMethod 1

2.2 封装与继承

// getter / setter
// 定义
class Example{
    constructor(a, b) {
        this.a = a; // 实例化时调用 set 方法
        this.b = b;
    }
    get a(){
        console.log('getter');
        return this.a;
    }
    set a(a){
        console.log('setter');
        this.a = a; // 自身递归调用
    }
}
let exam = new Example(1,2); // 不断输出 setter ,最终导致 RangeError
class Example1{
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }
    get a(){
        console.log('getter');
        return this._a;
    }
    set a(a){
        console.log('setter');
        this._a = a;
    }
}
let exam1 = new Example1(1,2); // 只输出 setter , 不会调用 getter 方法
console.log(exam1._a); // 1, 可以直接访问

// getter 不可单独出现
class Book {
    constructor(a) {
        this.a = a; 
    }
    get a() {
        return this.a;
    }
}
let exam = new Book(1); // Uncaught TypeError: Cannot set property // a of #<Example> which has only a getter

// getter 与 setter 必须同级出现
class Father {
    constructor(){}
    get a() {
        return this._a;
    }
}
class Child extends Father {
    constructor(){
        super();
    }
    set a(a) {
        this._a = a;
    }
}
let test = new Child();
test.a = 2;
console.log(test.a); // undefined
 
class Father1 {
    constructor(){}
    // 或者都放在子类中
    get a() {
        return this._a;
    }
    set a(a) {
        this._a = a;
    }
}
class Child1 extends Father1 {
    constructor(){
        super();
    }
}
let test1 = new Child1();
test1.a = 2;
console.log(test1.a); // 2

2.3 继承

// 通过 extends 实现类的继承
class Child extends Father { ... }

// 子类 constructor 方法中必须有 super ,且必须出现在 this 之前。
class Father {
    constructor() {}
}
class Child extends Father {
    constructor() {}
    // or 
    // constructor(a) {
        // this.a = a;
        // super();
    // }
}
let test = new Child(); // Uncaught ReferenceError: Must call super 
// constructor in derived class before accessing 'this' or returning 
// from derived constructor

// 调用父类构造函数,只能出现在子类的构造函数
class Father {
    test(){
        return 0;
    }
    static test1(){
        return 1;
    }
}
class Child extends Father {
    constructor(){
        super();
    }
}
class Child1 extends Father {
    test2() {
        super(); // Uncaught SyntaxError: 'super' keyword unexpected     
        // here
    }
}


// 调用父类方法, super 作为对象,在普通方法中,指向父类的原型对象,在静态方法中,指向父类
class Child2 extends Father {
    constructor(){
        super();
        // 调用父类普通方法
        console.log(super.test()); // 0
    }
    static test3(){
        // 调用父类静态方法
        return super.test1+2;
    }
}
Child2.test3(); // 3

// 不可继承常规对象。
var Father = {
    // ...
}
class Child extends Father {
     // ...
}
// Uncaught TypeError: Class extends value #<Object> is not a constructor or null
 
// 解决方案
Object.setPrototypeOf(Child.prototype, Father);

标签:ES6,console,log,Class,Book,constructor,return,用法,class
From: https://blog.csdn.net/qq_28419035/article/details/141893612

相关文章

  • 抓包工具tcpdump用法说明
    tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上。不带任何选项的tcpdump,默认会抓取第一个网络接口,且只有将tcpdump进程终止才会停止抓包。例如:shell>tcpdump-nn-ieth0icmp下面是详细的tcpdump用法。1.1tcpdump选项它的命令格式......
  • 响应式单位rpx及搭配UI产品工具和@import导入css样式和scss变量与用法static目录以及p
    1.响应式单位rpx及搭配UI产品工具1.对于rpx的认知和用法以及对于px的区别我们可以去官网先了解一下我们的rpx用法和注意以及与px的区别。链接:页面样式与布局|uni-app官网(dcloud.net.cn)我平时使用的px是我们的屏幕像素的单位,我们在一个页面创建一个view组件,并且给其在......
  • JS-ES6
    这篇文章是关于ES6(ECMAScript2015)新特性的介绍和教学,作者通过具体的代码示例和解释,帮助读者理解和掌握这些新特性。下面是对文章中提到的ES6特性的总结和注释:ES6块级作用域let○在ES6之前,JavaScript只有全局作用域和函数作用域。let关键字的引入为JavaScript带来了块......
  • c# string库用法
    C#字符串(String)在C#中,您可以使用字符数组来表示字符串,但更常见的做法是使用string关键字来声明一个字符串变量。string关键字是System.String类的别名。1.String类的属性String类有以下两个属性:Chars在当前String对象中获取Char对象的指定位置。序号 属性1 C......
  • Numpy中reshape的用法
    目录语法介绍示例示例1示例2示例3示例4语法介绍numpy.reshape(a,newshape,order=‘C’)在不改变数据的情况下给数组一个新的形状。就是先将数组按给定索引顺序一维展开,然后按与展开时相同的索引顺序将展开的元素填充到新数组中;即等价于np.reshape(np.revel(arr......
  • C语言学习——sprintf函数详细解释及其用法
    文章目录函数功能:把格式化的数据写入某个字符串参数说明及应用举例解释:连接字符串打印地址信息利用sprintf的返回值使用sprintf的常见问题函数功能:把格式化的数据写入某个字符串头文件:stdio.h函数原型:intsprintf(char*buffer,constchar*format,[arg......
  • 《Represent, Compare, and Learn: A Similarity-Aware Framework for Class-Agnostic
    摘要论文提出了一个用于类别无关计数(Class-AgnosticCounting,CAC)的相似性感知框架。类别无关计数的目标是在给定少量示例的情况下,对查询图像中的所有实例进行计数。该框架通过联合学习表示和相似性度量来改进计数性能。作者首先提出了一个基础的双线性匹配网络(BilinearMatc......
  • GROUPING_SETS 用法
    在Hive中,`GROUPINGSETS`是一个用于生成多个分组聚合的SQL功能,它可以让你在一个查询中指定多个分组集,这样可以有效地生成多维度的汇总数据。下面我将通过一个例子来展示如何使用`GROUPINGSETS`,并创建一个Hive表以及插入十条数据进行演示。###步骤1:创建Hive表首先,我们创建......
  • 关于ybc_game库的用法(第一期)
    大家好,我是于翱睿,今天我给大家更新一期如何正确的使用ybc_game库,避免踩坑。首先,需要说的是:所有的图片必须放在images文件夹里,在代码中不用写“images/”同样,要想保存音频,所有的音频必须放在sounds文件夹中,在代码中不用写“sounds/”所有说明我都放到注释里了,注意仔细观察那......
  • UEFI —— Status Code用法
    PEI阶段用法是PeiServices中的一个组成。code:Edk2\MdeModulePkg\Universal\ReportStatusCodeRouter\Pei\ReportStatusCodeRouterPei.c整体逻辑:调用ReportStatusCode挂在gEfiPeiRscHandlerPpiGuid上的handler都会跑一便执行对应的callbackgEfiPeiRscHandlerPpiGuid用......