广告
返回顶部
首页 > 资讯 > 精选 >JavaScript ES6中class定义类的方法有哪些
  • 329
分享到

JavaScript ES6中class定义类的方法有哪些

2023-07-02 16:07:15 329人浏览 泡泡鱼
摘要

这篇文章主要介绍“javascript es6中class定义类的方法有哪些”,在日常操作中,相信很多人在JavaScript ES6中class定义类的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作

这篇文章主要介绍“javascript es6中class定义类的方法有哪些”,在日常操作中,相信很多人在JavaScript ES6中class定义类的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript ES6中class定义类的方法有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

1.声明类的两种方式:

class 关键字 类的声明

class Person{}

类表达式(不常用)

var People = class { }

那么 Person类的原型是什么?如下展示了原型和typeof中Person的类型

console.log(Person.prototype) // Person {}console.log(Person.prototype.__proto__) // {}console.log(Person.constructor) // [Function: Function]console.log(typeof Person) // function

2.class 类的构造函数

如果我们希望在创建对象的时候给类传递一些参数,这个时候应该怎么做呢?

  • 每个类都可以有一个自己的构造函数(方法),这个方法的名称是固定的 constructor

  • 当我们通过new操作符,操作一个类的时候会调用这个类的构造函数constructor

  • 每个类只能有一个构造函数,如果包含多个构造函数,那么会抛出异常。

示例代码如下:

// 类的声明class Person {    // 类的构造方法    constructor(name, age) {        this.name = name        this.age = age    }    foo () {        console.log(this.name)    }}var p1 = new Person('h', 19)console.log(p1)// Person { name: 'h', age: 19 }p1.foo() // h

当我们通过new关键字操作类的时候,会调用这个 constructor函数,并执行如下操作(假设new关键字新创建的对象为p1):

  • 在内存中创建一个对象

  • 将类的原型prototype赋值给创建出来的对象 p1.__proto__ = Person.prototype

  • 将对象赋值给函数的this:new绑定 this = p1

  • 执行函数体中的代码

  • 自动返回创建出来的对象
    **

3.class中方法定义

3.1 class 中定义普通的实例方法
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~')    }}var p1 = new Person('jam', 19)console.log(p1)p1.eating()p1.running()
3.2 class 类中定义访问器方法
class Person {    // 类的构造方法    constructor(name, age) {        this.name = name        this.age = age        this._address = '北京市'    }    // 类的访问器方法    get address () {        // 在这里可以设置拦截访问操作        console.log('获取呢')        return this._address    }    set address (newValue) {        // 在这里可以设置拦截设置操作        console.log('修改呢')        return this._address = newValue    }}var p1 = new Person('jam', 19)console.log(p1.address)p1.address = '天津市'console.log(p1.address)
3.3 类的静态方法(类方法)

类的静态方法就是在方法前加一个static关键字,该方法就成为了类的静态方法。
类的静态方法,不会被类的实例继承,而是直接通过类来调用。

小案例:使用类的静态方法完成随机生成Person实例

class Person {    // 类的构造方法    constructor(name, age) {        this.name = name        this.age = age        this._address = '北京市'    }        // 类的静态方法(也称为类方法)  创建对象随机生成一个名字小案例    static randomPerson () {        // 创建一个存储名字的数组        let names = ['jam', 'jak', 'jag', 'jao', 'jno']        // Math.random()生成一个0-1之间的数字,小数肯定是不对的        let nameIndex = Math.floor(Math.random() * names.length)        let name = names[nameIndex]        // 生成随机年龄        let age = Math.floor(Math.random() * 100)        // return随机生成的人物 姓名+ 年龄        return new Person(name, age)    }}

这里直接调用类的静态方法就可以 不需要使用new操作符创建创建实例对象

随机生成一个Person实例(附效果图)

// 随机生成一个  var p2 = Person.randomPerson()console.log(p2)

JavaScript ES6中class定义类的方法有哪些

随机生成多个Person实例(附带效果图)

// 随机生成多个for (let index = 0; index < 20; index++) {    console.log(Person.randomPerson())}

JavaScript ES6中class定义类的方法有哪些

到此,关于“JavaScript ES6中class定义类的方法有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: JavaScript ES6中class定义类的方法有哪些

本文链接: https://www.lsjlt.com/news/342982.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript ES6中class定义类的方法有哪些
    这篇文章主要介绍“JavaScript ES6中class定义类的方法有哪些”,在日常操作中,相信很多人在JavaScript ES6中class定义类的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作...
    99+
    2023-07-02
  • JavaScript ES6中class定义类实例方法
    目录前言正文1.声明类的两种方式:2.class 类的构造函数3.class中方法定义3.1 class 中定义普通的实例方法3.2 class 类中定义访问器方法3.3 类的静态方...
    99+
    2022-11-13
  • es6变量定义的方法有哪些
    本篇内容介绍了“es6变量定义的方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!es6的6种变量定义方法:1、用关键字var定义变量...
    99+
    2023-07-05
  • ES6中的class类知识点有哪些
    这篇文章主要介绍了ES6中的class类知识点有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇ES6中的class类知识点有哪些文章都会有所收获,下面我们一起来看看吧。cl...
    99+
    2022-10-19
  • python中定义类的方法有哪些
    本篇内容主要讲解“python中定义类的方法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“python中定义类的方法有哪些”吧!python中的3种定义类方法:普通方法类方法(@class...
    99+
    2023-06-21
  • JavaScript中定义函数的方法有哪些
    小编给大家分享一下JavaScript中定义函数的方法有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!有3种方法:1、function关键字,语法“function 函数名(参数列表){//声明}”;2、用函数表达式形...
    99+
    2023-06-14
  • javascript中定义数组的方法有哪些
    这篇文章给大家分享的是有关javascript中定义数组的方法有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。javascript中定义数组的方法:1、使用“var 数组名=...
    99+
    2022-10-19
  • javascript有没有定义类的方法
    这篇文章主要讲解了“javascript有没有定义类的方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript有没有定义类的方法”吧! ...
    99+
    2022-10-19
  • javascript有哪些定义变量的方法
    这篇文章主要讲解了“javascript有哪些定义变量的方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript有哪些定义变量的方法”吧!js定义变量的方法:1、使用var定义...
    99+
    2023-06-14
  • javascript中常用的ES6方法有哪些
    这篇文章主要介绍javascript中常用的ES6方法有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!JavaScript可以做什么1.可以使网页具有交互性,例如响应用户点击,给用户提供更好的体验。2.可以处理表...
    99+
    2023-06-14
  • javascript定义函数的类型有哪些
    这篇文章主要为大家展示了“javascript定义函数的类型有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript定义函数的类型有哪些”这篇文...
    99+
    2022-10-19
  • ES6中如何实现Class类的静态方法
    这篇文章给大家分享的是有关ES6中如何实现Class类的静态方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个...
    99+
    2022-10-19
  • Python类的定义继承调用方法有哪些
    这篇文章主要讲解了“Python类的定义继承调用方法有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Python类的定义继承调用方法有哪些”吧!一、类的约束# _开头:&nbs...
    99+
    2023-07-02
  • JavaScript es6的新增数组方法有哪些
    这篇文章主要讲解了“JavaScript es6的新增数组方法有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript es6的新增数组方法有哪些”吧!1...
    99+
    2023-06-21
  • 自定义Hook的方法有哪些
    这篇文章主要介绍“自定义Hook的方法有哪些”,在日常操作中,相信很多人在自定义Hook的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”自定义Hook的方法有哪些”...
    99+
    2022-10-19
  • android中自定义view的方法有哪些
    在Android中,可以通过以下几种方式来自定义View:1. 继承View类:创建一个继承自View类的子类,并实现相应的绘制方法...
    99+
    2023-10-18
    android
  • php中数组的定义方法有哪些
    本篇内容主要讲解“php中数组的定义方法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php中数组的定义方法有哪些”吧!两种方法:1、直接为数组元素赋值,语法为“$数组变量名[下标] = ...
    99+
    2023-06-30
  • es6的set方法有哪些
    这篇文章主要介绍“es6的set方法有哪些”,在日常操作中,相信很多人在es6的set方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”es6的set方法有哪些”的疑惑...
    99+
    2022-10-19
  • javascript类的定义方法是什么
    小编给大家分享一下javascript类的定义方法是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!方法有:1、构造函数法,语法“function Cat(){...
    99+
    2023-06-14
  • asp定义数组的方法有哪些
    ASP中定义数组的方法有以下几种:1. 使用Array关键字:可以使用Array关键字来声明一个数组变量,并使用赋值语句为数组分配内...
    99+
    2023-09-21
    asp
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作