广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript ES6中class定义类实例方法
  • 398
分享到

JavaScript ES6中class定义类实例方法

es6中的class类es6 class用法ES6的class 2022-11-13 12:11:03 398人浏览 薄情痞子
摘要

目录前言正文1.声明类的两种方式:2.class 类的构造函数3.class中方法定义3.1 class 中定义普通的实例方法3.2 class 类中定义访问器方法3.3 类的静态方

前言

我们会发现,按照之前学习过的构造函数形式创建 类 ,不仅仅和编写普通的函数过于相似,而且代码并不容易理解。

es6(ECMAScript2015)新的标准中使用了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)

请添加图片描述

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

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

文末

到此这篇关于javascript ES6中class定义类的文章就介绍到这了,更多相关ES6中class定义类内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript ES6中class定义类实例方法

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

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

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

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

下载Word文档
猜你喜欢
  • JavaScript ES6中class定义类实例方法
    目录前言正文1.声明类的两种方式:2.class 类的构造函数3.class中方法定义3.1 class 中定义普通的实例方法3.2 class 类中定义访问器方法3.3 类的静态方...
    99+
    2022-11-13
    es6中的class类 es6 class用法 ES6的class
  • JavaScript ES6中class定义类的方法有哪些
    这篇文章主要介绍“JavaScript ES6中class定义类的方法有哪些”,在日常操作中,相信很多人在JavaScript ES6中class定义类的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作...
    99+
    2023-07-02
  • ES6 javascript中Class类继承的示例分析
    小编给大家分享一下ES6 javascript中Class类继承的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体如下:1. 基本用法Class 之间可以通过extends关键字...
    99+
    2022-10-19
    es6 class类 js
  • es6中class类静态方法,静态属性,实例属性,实例方法的示例分析
    这篇文章主要为大家展示了“es6中class类静态方法,静态属性,实例属性,实例方法的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“es6中class类...
    99+
    2022-10-19
    es6 class
  • ES6中如何实现Class类的静态方法
    这篇文章给大家分享的是有关ES6中如何实现Class类的静态方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个...
    99+
    2022-10-19
    es6 class
  • javascript能定义实例方法吗
    这篇文章主要介绍“javascript能定义实例方法吗”,在日常操作中,相信很多人在javascript能定义实例方法吗问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”java...
    99+
    2022-10-19
    javascript
  • python中class类与方法的用法实例详解
    目录类和方法的概念和实例1.python类:class2.类的构造方法__init__()3.类中方法的参数self4.继承5.方法重写类的特殊属性与方法类的私有属性总结因为一直不太...
    99+
    2022-11-10
    python中class类的用法 python class语句用法 python class的用法
  • 探讨如何定义Javascript实例方法
    Javascript是一种广泛应用于Web前端开发的编程语言,它具有灵活的语法和强大的功能。在Javascript中,我们可以使用对象来构造数据模型,并为这些对象添加方法来实现各种行为。在本文中,我们将探讨如何定义Javascript实例方...
    99+
    2023-05-14
  • Python中Class类用法实例分析
    本文实例讲述了Python中Class类用法。分享给大家供大家参考,具体如下: 尽管Python在Function Programming中有着其他语言难以企及的的优势,但是我们也不要忘了Python也是一...
    99+
    2022-06-04
    实例 Python Class
  • javascript类的定义方法是什么
    小编给大家分享一下javascript类的定义方法是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!方法有:1、构造函数法,语法“function Cat(){...
    99+
    2023-06-14
  • javascript有没有定义类的方法
    这篇文章主要讲解了“javascript有没有定义类的方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript有没有定义类的方法”吧! ...
    99+
    2022-10-19
    javascript
  • JavaScript定义静态方法的示例
    小编给大家分享一下JavaScript定义静态方法的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在javascript中,直接定义在构造函数上的方法和属性是...
    99+
    2023-06-14
  • php类的定义与实例化方法是什么
    本教程操作环境:windows7系统、PHP7.1版、DELL G3电脑php类的定义在 PHP 中,可以使用 class 关键字加类名的方式定义一个类,然后用大括号{ }将在类体中定义类的属性和方法包裹起来,类的语法格式如下:[修饰类的关...
    99+
    2017-02-04
    php 类的定义 类的实例化
  • vue props使用typescript自定义类型的方法实例
    目录前言一、问题定位二、初级解决方案解法一,函数法解法二 PropType泛型三、props的校验过程四、后话参考总结 前言 Base: vue@3.2.33 + type...
    99+
    2023-01-28
    vue组件props ts自定义类型
  • 怎么在javascript中定义方法
    这期内容当中小编将会给大家带来有关怎么在javascript中定义方法,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。javascript定义方法的方法:1、定义式,代码为【function test(ag...
    99+
    2023-06-14
  • php+mysql实现的无限分类方法类定义与使用示例
    本文实例讲述了php+mysql实现的无限分类方法类定义与使用。分享给大家供大家参考,具体如下: 创建数据库以及表 CREATE DATABASE `sortclass`DEFAULT CHARSET utf8...
    99+
    2022-05-23
    php mysql 无限分类 方法类
  • Android自定义Dialog的方法实例
    因为公司需要不同样式的dialog,既有取消和确认键 又需要只有确认键的 并且系统自带dialog样式太丑 所以就自己做了个 接下来看代码: public class M...
    99+
    2022-06-08
    方法 dialog Android
  • android 自定义TabActivity的实例方法
    一、改变Tab栏的位置。java代码。在TabActivity的oncreate方法中添加setContentView(R.layout.tab_host);其中 Layout...
    99+
    2022-06-06
    方法 Android
  • python中的3种定义类方法
    目录1、普通方法2、类方法3、静态方法4、总结python中的3种定义类方法: 普通方法 类方法(@classmethod) 类方法(@classmetho...
    99+
    2022-11-12
    python 定义类方法 python 类方法的定义
  • 怎么在python中定义类方法
    今天就跟大家聊聊有关怎么在python中定义类方法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Python的优点有哪些1、简单易用,与C/C++、Java、C# 等传统语言相比,P...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作