ES6中类的使用

已于 2022-06-23 19:15:22 修改
阅读量1.4k 收藏 3
点赞数 2
文章标签： es6 javascript
于 2022-06-22 12:41:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39112047/article/details/125407082
版权

引言

按照构造函数形式创建类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。在ES6(ECMAScript2015)新的标准中使用了class关键字来直接定义类。但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已。所以学好了构造函数、原型链更有利于我们理解类的概念和继承关系。
那么如何来使用class来定义一个类呢？

类的声明

//类的声明
class Person{

}
//babel


//类的表达式
// var Animal = class{

// }

可以观察一下类的特点，它也是有原型的。

//类的声明
class Person{

}
//babel


//类的表达式
// var Animal = class{

// }

//研究一下类的特点
console.log(Person.prototype); //还是有原型的 {}
console.log(Person.prototype.__proto__); //Object: null prototype] {}
console.log(Person.prototype.constructor); //[class Person]也是指向当前对象本身的
console.log(typeof Person); //function   typeof是不会返回class的，它返回的很多东西都是固定的

类的构造方法

通过类的构造方法，可以把值传入类中。这里和构造函数有些许不同，是依靠constructor来实现的。

//类的声明和构造函数是分开的
class Person{
    //类的构造方法
    //注意：一个类只能有一个构造函数，不能做类的重载
    //1.在内存中创建一个对象
    //2.将类的原型portotype，赋值给我们创建出来的对象 moni.__proto__ = Person.prototype
    //3.将我们对象赋值给函数的this  this = moni
    //4.执行函数体中的代码
    //5.自动返回创建出来的对象
    constructor(name,age){ //和prototype的那个constructor没关系
        this.name = name
        this.age = age
    }
}

类中方法的定义

类中的方法主要有普通方法，访问器方法，静态方法等。访问器方法也就是get,set。静态方法支持直接通过类名来访问（并不需要创建一个对象实例）。

var names = ['aaa','bbb','ccc']
class Person{
    constructor(name,age){
        this.name = name
        this.age = age
        this._address = "广州市"
    }

    //这里的函数都会进行共享的，它们是放到原型上面的
    eating(){
        console.log(this.name+"eating");
    }
    running(){ 
        console.log(this.name+'running');
    }

    //类的访问器方法（get,set）,这个其实用的也不是特别多
    get address(){
        console.log("拦截访问操作");
        return this._address
    }

    set address(newAddress){
        console.log("拦截设置操作");
        this._address = newAddress
    }

    //类的静态方法
    //创建出来的对象进行访问的
    //var p = new Person()
    //p.xxx

    //静态方法可以直接通过类名来访问
    //Person.createPerson() 
    static randomPerson(){
        var nameIndex = Math.floor(Math.random() * names.length)
        var name = names[nameIndex]
        var age = Math.floor(Math.random() * 100)
        return new Person(name,age)
    }

}

var p = new Person('harry',18)
p.running()
console.log(p.address);
p.address = "北京市"
console.log(p.address);

// var p1 = Person.randomPerson

for(var i = 0 ; i < 50; i++){
    console.log(Person.randomPerson());
}

class中实现继承

下面是案例代码（代码1）：

class Person{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    running(){
        console.log(this.name + 'is runing~');
    }
    //重写的方法，存在需要追加功能的情况
    personMethod(){
        console.log('处理逻辑1');
        console.log('处理逻辑2');
        console.log('处理逻辑3');
    }
    static studentMethod(){
        console.log('person static method');
    }
}

class Student extends Person{
    //JS引擎在解析子类的时候就有要求，如果我们有实现继承
    //那么子类的构造方法中，在使用this之前。或者在return 之前。
    constructor(name,age,sno){
        super(name,age) //交给父类处理
        this.sno = sno
    }
    studying(){
        console.log(this.name + 'is studying~');
    }
    //@overwite
    personMethod(){
        super.personMethod()
        console.log('处理逻辑4');
    }
    staticMethod(){
        console.log('student static method');
    }
    
}
var stu = new Student('hgx',18,111)
console.log(stu);
stu.running()
stu.studying()
stu.personMethod()

super关键字

子类可以继承父类，并且可以重写父类的方法。这里要重点介绍一下super和这个关键字的作用。

作用1

JS引擎在解析子类的时候就有要求，如果我们有实现继承那么子类的构造方法中，在使用this之前或者在return 之前必须通过super关键字调用一下父类的构造方法。

作用2

如果想要子类重写的方法中追加父类的功能，可以通过super调用父类的方法。

来自本人掘金文章 https://juejin.cn/post/7111919038346821645/**## 引言
按照构造函数形式创建类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。在ES6(ECMAScript2015)新的标准中使用了class关键字来直接定义类。但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已。所以学好了构造函数、原型链更有利于我们理解类的概念和继承关系。
那么如何来使用class来定义一个类呢？

类的声明

//类的声明
class Person{

}
//babel


//类的表达式
// var Animal = class{

// }

可以观察一下类的特点，它也是有原型的。

//类的声明
class Person{

}
//babel


//类的表达式
// var Animal = class{

// }

//研究一下类的特点
console.log(Person.prototype); //还是有原型的 {}
console.log(Person.prototype.__proto__); //Object: null prototype] {}
console.log(Person.prototype.constructor); //[class Person]也是指向当前对象本身的
console.log(typeof Person); //function   typeof是不会返回class的，它返回的很多东西都是固定的

类的构造方法

通过类的构造方法，可以把值传入类中。这里和构造函数有些许不同，是依靠constructor来实现的。

//类的声明和构造函数是分开的
class Person{
    //类的构造方法
    //注意：一个类只能有一个构造函数，不能做类的重载
    //1.在内存中创建一个对象
    //2.将类的原型portotype，赋值给我们创建出来的对象 moni.__proto__ = Person.prototype
    //3.将我们对象赋值给函数的this  this = moni
    //4.执行函数体中的代码
    //5.自动返回创建出来的对象
    constructor(name,age){ //和prototype的那个constructor没关系
        this.name = name
        this.age = age
    }
}

类中方法的定义

类中的方法主要有普通方法，访问器方法，静态方法等。访问器方法也就是get,set。静态方法支持直接通过类名来访问（并不需要创建一个对象实例）。

var names = ['aaa','bbb','ccc']
class Person{
    constructor(name,age){
        this.name = name
        this.age = age
        this._address = "广州市"
    }

    //这里的函数都会进行共享的，它们是放到原型上面的
    eating(){
        console.log(this.name+"eating");
    }
    running(){ 
        console.log(this.name+'running');
    }

    //类的访问器方法（get,set）,这个其实用的也不是特别多
    get address(){
        console.log("拦截访问操作");
        return this._address
    }

    set address(newAddress){
        console.log("拦截设置操作");
        this._address = newAddress
    }

    //类的静态方法
    //创建出来的对象进行访问的
    //var p = new Person()
    //p.xxx

    //静态方法可以直接通过类名来访问
    //Person.createPerson() 
    static randomPerson(){
        var nameIndex = Math.floor(Math.random() * names.length)
        var name = names[nameIndex]
        var age = Math.floor(Math.random() * 100)
        return new Person(name,age)
    }

}

var p = new Person('harry',18)
p.running()
console.log(p.address);
p.address = "北京市"
console.log(p.address);

// var p1 = Person.randomPerson

for(var i = 0 ; i < 50; i++){
    console.log(Person.randomPerson());
}

class中实现继承

下面是案例代码（代码1）：

class Person{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    running(){
        console.log(this.name + 'is runing~');
    }
    //重写的方法，存在需要追加功能的情况
    personMethod(){
        console.log('处理逻辑1');
        console.log('处理逻辑2');
        console.log('处理逻辑3');
    }
    static studentMethod(){
        console.log('person static method');
    }
}

class Student extends Person{
    //JS引擎在解析子类的时候就有要求，如果我们有实现继承
    //那么子类的构造方法中，在使用this之前。或者在return 之前。
    constructor(name,age,sno){
        super(name,age) //交给父类处理
        this.sno = sno
    }
    studying(){
        console.log(this.name + 'is studying~');
    }
    //@overwite
    personMethod(){
        super.personMethod()
        console.log('处理逻辑4');
    }
    staticMethod(){
        console.log('student static method');
    }
    
}
var stu = new Student('hgx',18,111)
console.log(stu);
stu.running()
stu.studying()
stu.personMethod()

super关键字

子类可以继承父类，并且可以重写父类的方法。这里要重点介绍一下super和这个关键字的作用。

作用1

JS引擎在解析子类的时候就有要求，如果我们有实现继承那么子类的构造方法中，在使用this之前或者在return 之前必须通过super关键字调用一下父类的构造方法。

作用2

如果想要子类重写的方法中追加父类的功能，可以通过super调用父类的方法。

JS中创建类继承自内置类

比如我要自定义一个方法，返回数组的第一个元素，这个是内置类Array里没有的方法。我可以创建一个类继承于Array这个内部类。代码如下

// 比如我要自定义一个方法，返回数组的第一个元素
class HGXArray extends Array{
    //自定义的方法
    firstItem(){
        //这里的this是构造类HGXArray(3) [ 1, 2, 3]
        return this[0]
    }
}

var arr = new HGXArray(1,2,3)
console.log(arr.firstItem()); //1

mixin混入函数（实现多继承）

JS是单继承的，一个类只能有一个父类，如果要实现多继承就得用到mixin混入函数。这个mixin混入函数里面好像只能写方法进去，无法继承父类属性，写constructor进去会报错。（研究完这个问题我会更新文档）下面是案例代码：

class Person{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    sleep(){
        console.log('我会睡');
    }
}


function mixinRunner(BaseClass){
    class NewClass extends BaseClass{
        running(){
            console.log('在跑步');
        }
    }
    return NewClass
}

function mixinEater(BaseClass){
    return class extends BaseClass{
        eating(){
            console.log('eater');
        }
    }
}

let NewStudent = mixinEater(mixinRunner(Person))
//这一步不能忘记，新建对象
let ns = new NewStudent('harry',20)
console.log(ns.name);
ns.sleep()
ns.eating()
ns.running()

来自本人掘金文章 https://juejin.cn/post/7111919038346821645/**

Harry小黄
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
老生常谈ES6中的类
08-29
下面小编就为大家带来一篇老生常谈ES6中的类。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Class 的基本语法
Geordies的博客
02-09 683
# Class 的基本语法 # 简介 # 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this....
【JavaScript】ES6 中的类和模块
最新发布
好久不见的流星
02-19 668
ES6 中引入的类和模块为 JavaScript 提供了现代化的编程方式，使得面向对象和模块化编程更加直观和易用。类提供了更简洁的语法和更灵活的继承方式，而模块则使得代码更易于组织和复用。在实际项目中，使用 ES6 的类和模块有助于提高代码的可读性、可维护性和可扩展性。希望通过本篇博客，你对 ES6 中的类和模块有了更深入的了解。
es6（五）—— class（类）详解
weixin_44784401的博客
02-07 2990
JavaScript 中 class（类）详解
ES6中class类、类的继承extends、多态、字面量的增强、解构、let/const、字符串模板、函数的默认参数、展开语法、数值、Symbol使用、Set、Map、es7-13总结
米儿的博客
11-17 1877
一、认识class定义类 我们会发现，按照前面的构造函数形式创建 类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。 在ES6（ECMAScript2015）新的标准中使用了class关键字来直接定义类； 但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已； 可以使用两种方式来声明类：类声明和类表达式 // 类的声明 class Person { } // 类的表达式 var Animal = class { } 类和构造函数的异同 类的一些特性和我们的构造函数的特性其实是一
ES6——类的创建、添加以及继承
NanChen的博客
10-10 1580
目录 一、创建类和对象 二、类中添加其方法 三、类的继承 super()方法 四、子类继承父类的方法同时扩展自己的方法 五、super关键字调用父类的普通函数 六、使用类的注意事项 使用类的注意事项总结： 1. 在 ES6 中的类没有变量提升，必须先定义类，才能通过类实例化对象。 2. 类里面的共有的属性和方法一定要加this使用。 3.constructor 里面的this 指向的是创建的实例对象，方法里面的this 指向的是这个方法的调用者。 原文链接 一、创建类和对象...
ES6 中的类（class）
TKOP_的博客
04-16 1168
ES6 引入的 class 关键字具有定义类的能力。类是 ECMAScript 中新的基础性语法糖。虽然 ES6 表面上看起来可以支持正式的面向对象编程，但实际上它背后使用的依旧是原型和构造函数的概念。（笔记内容参考《JavaScript 高级程序设计（第4版）》章节8.4 类以前在笔记《js 中原型、原型链和继承概念（详细全面）》中简要提过部分内容，这里系统看一次。类声明和类表达式。两种方式都需要使用 class 关键字加大括号定义。类表达式与函数表达式类似，在它们被求值前都不能被引用。
ES6--class类（详解/看完必会）
蜗牛~~
02-22 7885
ES6中class类的学习，看完必会
ES6中的类（class）
Han_Zhou_Z的博客
01-08 2724
目录 一、类（class） 1、在ES6中提供class关键字来定义类 2、在ES6中，支持getter和setter方法的定义，使用getter方法时，采用使用get关键字。使用setter方法时，采用使用set关键字 3、在ES6中提供static关键字类声明静态成员 4、类的继承 一、类（class） class Person{ static num = 1001 constructor(name,gender){//构造方法 this.name = n
js高级之｜ES6中类的使用
qq_45313933的博客
01-12 686
类方法的写法与继承。
ES6中class类用法实例浅析
08-30
主要介绍了ES6中class类用法,结合实例形式分析了ES6中类的实现方法与相关语法使用技巧,需要的朋友可以参考下
ES6中定义类和对象的方法示例
10-16
主要介绍了ES6中定义类和对象的方法,结合实例形式分析了ES6中类的定义、继承、静态方法、静态属性等相关操作技巧,需要的朋友可以参考下
ES6中Class类构造函数、实例、原型属性和方法、继承extends、super关键字
qq_51066068的博客
05-11 2106
目录 Class类 构造函数 实例属性和方法 原型属性和方法 静态属性和方法 继承 super 关键字 Class类 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。 ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰更像面向对象编程的语法而已。所以ES..
ES6中的类（Class）
热门推荐
『愚』的博客
11-29 1万+
ES6中的类（Class）类的基本语法constructor方法this与class（原型）属性与方法添加到this上属性与方法添加到类上类的静态成员 类的基本语法 ES6提供了更接近面向对象（注意：javascript本质上是基于对象的语言）语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 //定义
ES6新特性 Class 类的全方面理解
圆圆的 JavaScript 博客
10-20 888
javascript语言只有对象，没有类的概念。跟传统的面向对象语言（比如 C++ 和 Java）差异很大，非常容易让人困惑~ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念！本文就带你全方面理解class~
ES6中的类
qq_49171551的博客
09-15 332
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类类必须有constructor方法，如果没有显示定义，一个空的constructor方法会被默认添加。静态属性和静态方法是定义在类【构造函数】上的，所以可以通过类构造函数直接访问。class可以通过extends关键字实现继承，子类可以没有构造器，系统会默认分配。ES6提供了类Class这个概念，作为对象的模板。定义一个类通过class关键字，ES6的类可以看成是构造函数的另一种写法。
ES6的函数、类
学无止境
11-09 300
ES6的函数、类
面向对象（四）es6中的类
小羽苏的博客
11-06 113
之前都是在es5中创建类的方法，而在es6中为我们提供了更为简单的语法糖供我们创建类，不过其底层还是和之前的原型、原型链相关，所以学习一下还是有必要的，那现在就来看看再es6中我们怎样创建类吧。
es6中class类封装
10-11
在ES6中，我们可以使用class关键字来定义类并实现封装。类封装允许我们将相关的属性和方法组织在一起，从而提高代码的可读性和可维护性。 下面是一个使用class关键字封装的例子： ```javascript class Animal { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值