js中的class类

2023-11-05

js中的class类

函数声明和类声明之间的一个重要区别是函数声明会提升,类声明不会。需要先进行声明,再去访问,否则会报错

	var father = new Father("我是爸爸")
    class Father {
        constructor(name) {
            this.name = name;
        }
        putName(){
            console.log(this.name)
        }
    }
    // Uncaught ReferenceError: Cannot access 'Father' before initialization(在初始化之前无法访问“Person”)

constructor 方法

constructor 方法是类的默认方法,通过 new 命令生成对象实例时,自动调用该方法(默认返回实例对象 this)。一个类必须有 constructor 方法,如果没有显式定义,一个空的 constructor 方法会被默认添加。一个类只能拥有一个名为 “constructor” 的特殊方法,如果类包含多个 constructor 的方法,则将抛出 一个 SyntaxError 。

	class Father {
        constructor(name) {
            this.name = name;
        }
        putName(){
            console.log(this.name)
        }
    }
    var father = new Father("我是爸爸")
    father.putName()
  1. 在类中声明方法的时候,方法前不加 function 关键字
  2. 方法之间不要用逗号分隔,否则会报错
  3. 类的内部所有定义的方法,都是不可枚举的(non-enumerable)
  4. 一个类中只能拥有一个 constructor 方法

静态方法

静态方法可以通过类名调用,不能通过实例对象调用,否则会报错

	class Father {
        static putName(name){
            console.log(name)
        }
    }
    Father.putName("我是爸爸")
    // var father = new Father()
    // father.putName("我是爸爸 实例调用会报错") // Uncaught TypeError: father.putName is not a function

实例方法

实例方法可以通过实例对象调用,但同样不能通过类名调用,会报错

	class Father {
        constructor(){
            this.putName = function(name){
                console.log(name)
            }
        }
    }
    var father = new Father()
    father.putName("我是爸爸")
    // Father.putName("我是爸爸 类名调用会报错") // Uncaught TypeError: Father.putName is not a function

class继承

Class通过 extends 关键字实现继承。

	class Father {
        constructor(name,age){
            this.name = name
            this.age = age
        }
        putInfo(){
            console.log(this.name,this.age)
        }
    }
    class Son extends Father{
        constructor(name,age){
            super(name,age)
        }
    }
    var son = new Son("我是儿子",18)
    son.putInfo()
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js中的class类 的相关文章

  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • 如何阻止直接访问我的 JavaScript 文件?

    我使用 Minify 来缩小并缓存所有脚本请求 我只希望我的用户能够访问 JavaScript 文件的缩小版本 缩小位于www example com min我的脚本位于www example com scripts 如何阻止直接访问doc
  • Firebase,只得到新的孩子[重复]

    这个问题在这里已经有答案了 var firebase new Firebase firebaseRef on child added function snapshot 这将接收所有元素 有没有办法在创建新的 Firebase 引用时不接收
  • Vue 3 Composition API 提供/注入在单文件组件中不起作用

    我正在使用 Composition API 在 VueJS 3 中创建一个库 我实现了提供 注入 如中所述docs https v3 vuejs org guide composition api provide inject html i
  • 位置特征检测:固定

    我正在尝试找到一个脚本来检测设备是否放置position fixed元素相对于视口而不是整个文档 目前 标准桌面浏览器和 Mobile Safari 适用于 iOS 5 都是这样做的 而 Android 设备则相对于整个文档放置固定元素 我
  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • mongodb 聚合 - 累积字段的不同组值

    如果我有Player表格文件 name String score Int 我有Group文档 其中组代表玩家列表 groupName String players ObjectID 玩家可以属于多个组 我想做一个聚合Player文档 按以下
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 改变 JavaScript 中的顶部填充

    以下是我在 css 中设置顶部填充的方法 body font size font size px margin 0 padding 100px 0 20px 0 width 100 important 如何使用最简单的 javascript
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • 锁表查询及处理

    锁表及查询及kill命令生成语句 SELECT b sid b serial b logon time b username b osuser a object name alter system kill session b sid b
  • std::tuple还是struct?

    std tuple是C 11提供的新模板类 可以翻译为 元组 可把多个不同类型的变量组合成一个对象 std tuple可看做std pair的泛化实现 std pair包含两个元素 std tuple 可以同时包含多个元素 它拥有 stru
  • 【Keil5】Keil查看程序占用flash大小

    文章目录 一 问题 二 解决方法 参考资料 一 问题 我们在挑选一款单片机的时候 会查询单片机的主频 内部flash和RAM 封装 各种外设接口资源 其中flash和RAM大小尤为重要 以STM32H750VBT6为例 其内部flash只有
  • Unity3d 开发Pico4应用打开工程卡在Importing(iteration xxx) busy for xx:xx)...问题记录

    问题 大致问题如题 步骤是参照了PICO官方给出的快速开始的步骤进行的 而这个我问题的出现是在导入 PICO Unity Integration SDK 前往 SDK 下载中心 下载最新版本的 SDK 1 解压所下载的 SDK 压缩包 2
  • 什么是Base64?

    一 什么是Base64 百度百科中对Base64有一个很好的解释 Base64是网络上最常见的用于传输8Bit字节码的编码方式之一 Base64就是一种基于64个可打印字符来表示二进制数据的方法 什么是 可打印字符 呢 为什么要用它来传输8
  • HTTP 2.0 协议

    HTTP 说起HTTP 协议 超文本传输协议 很多人应该觉得很熟 不过随着HTTP2 0 的普遍应用 我们对其应该有更多的了解 HTTP是浏览器或其他客户端程序与Web服务器之间的应用层通信协议 基于TCP 协议的 主要经历 HTTP 1
  • bnu1322 长方体表面积 C语言版

    北京师范大学珠海分校 Judge Online of ACM ICPC 1322 长方体表面积 C语言版 include
  • Retinex理论及算法学习

    为了能够获取最大的信息量 达到更好的图像增强效果 了解人类视觉系统的特性和图像的属性是准确地选择图像增强方法的必备知识 一 人眼视觉系统 1 人眼成像 人的眼睛是一个非常复杂的器官 一般来说它就是一个球体 平均直径约为20mm 内壁是一层视
  • web期末复习---老师划重点!!

    18 19级的web期末考试题都是老师出题 有幸在周一下午去听了老师的划重点的课 下面我把重点列出来供大家参考 可能不是特别全欢迎补充 谢谢 table 书P25 知道外边框 内边框及其各个属性 什么属性只显示上边框 什么属性只显示下边框等
  • Spring Boot 学习笔记

    TOC 一 Spring Boot 入门 1 Spring Boot 简介 简化Spring应用开发的一个框架 整个Spring技术栈的一个大整合 J2EE开发的一站式解决方案 2 微服务 2014 martin fowler 微服务 架构
  • Python 使用cv2模块 进入视觉识别的报错,报错信息为AttributeError: module ‘cv2.cv2‘ has no attribute ‘bgsegm

    Python 使用cv2模块 进入视觉识别的报错 报错信息为AttributeError module cv2 cv2 has no attribute bgsegm 问题描述 cv2模块 进入视觉识别的报错 报错信息为AttributeE
  • (一)pygame.event详细解析

    文章目录 pygame event详细解析 函数表 函数详解 pygame event pump pygame event get pygame event poll pygame event wait pygame event peek
  • Elasticsearch学习笔记(一) DSL语句

    1 index 1 1 查询所有index GET cat indices v 1 2 新增index 新增一个名为pigg的index PUT pigg 1 3 删除index 删除pigg这个index 产线千万别这么做 删了就完了 D
  • 【react从入门到精通】深入理解React生命周期

    文章目录 人工智能福利文章 前言 React技能树 React的生命周期是什么 React v16 0前的生命周期 组件初始化 initialization 阶段 组件挂载 Mounting 阶段 组件更新 update 阶段 组件销毁阶段
  • 2.4.8 Profile虚拟IO设备

    最后更新2021 07 21 虚拟IO设备由HMC发出配置信息 由Hypervisor创建 虚拟IO设备并非真实存在 只是一些Hypervisor的参数 所以通常你可以根据需要 任意增删虚拟IO设备 但是创建虚拟IO设备依然有一些规则需要遵
  • Vue3.0——vite项目搭建

    2021 10 26 因为技术不断更新 故有些命令行不是最新的 随着后期补丁的更新 部分错误后期可能不存在了 建议大家参照时间节点看本片文章 1 搭建vite项目 npm init vitejs app 2 npm init vitejs
  • 用rsync命令和scp命令实现本机带进度条提示拷贝

    rsync命令 rsync av progress mnt yidong2 full20100526 tar gz mnt yidong1 以上命令 可以实现本机带进度条提示拷贝 可以实现不同机器带进度条提示拷贝 可以拷贝多个文件 scp命
  • 在Ubuntu20.04安装单节点ClickHouse22.8.4并解决DB::NetException: Connection refused NETWORK_ERROR导致无法远程访问的问题

    在Ubuntu20 04安装单节点ClickHouse22 8 4并解决DB NetException Connection refused 192 168 88 22 9000 NETWORK ERROR 导致无法远程访问的问题 前言 参
  • git将项目的其他分支合并到自己的分支

    步骤1 查看本地的所有分支 如果有即将合并的分支 则跳到 步骤3 git checkout 他人的分支名 git branch 步骤2 查看所有分支 确定即将合并的分支名 git branch a 步骤3 检出即将合并的分支到你的本地 gi
  • js中的class类

    js中的class类 函数声明和类声明之间的一个重要区别是函数声明会提升 类声明不会 需要先进行声明 再去访问 否则会报错 var father new Father 我是爸爸 class Father constructor name t