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类 的相关文章

  • 在 Nodejs/javascript 中的 Excel 中创建动态数量的列或标题

    我用过exceljsNodejs中用于将json数据导出到excel的模块 它工作正常 但必须在添加行之前预定义标题 列的名称 即列是固定的 添加行后 我无法动态添加列 我尝试了许多通过 npm 提供的模块 但它们都具有相同的功能 那么 有
  • 从 iframe 关闭父弹出窗口

    在domain1 com 上 我有一个链接 可以打开domain2 com 的弹出窗口 弹出窗口中有一个 iframe 也托管在 domain2 com 上 在 iframe 中 我试图关闭弹出窗口 我似乎对如何做到这一点感到困惑 在 if
  • 外部 CSS 是否应用于 jsPDF 生成的 pdf

    我已经开始使用 jspdf 制作一些演示 我有一个 html 文件 我的 css 在外部文件中 我写了下面的代码来生成我的pdf pdfButton on click function var pdf new jsPDF p in lett
  • Karma + JSPM + Typescript - 未找到“.ts.js”

    主要只是想让 Karma JSPM 在加载 ts 文件时发挥良好作用 但绝对没有运气 我看到一个讨论库 https github com Larchy karma jspm typescript coverage tree master一个
  • 代理递归函数

    想象一个简单的递归函数 我们试图包装它以检测输入和输出 A simple recursive function const count n gt n 1 count n 1 Wrap a function in a proxy to ins
  • CKEDITOR.styleSet.add - 'a' 元素的新样式

    由于某种原因如果我改变 p to a 它不再出现在样式列表中 有什么理由吗 CKEDITOR stylesSet add default name Wys wiersza 1 element p styles line height 18p
  • 从画布保存/转换后文件质量下降的问题

    这是我正在使用的代码 代码位于这篇文章的底部 但这里是链接GitHubGist Noitidart ff addon snippet browseForBadgeThenCreateSaveAnApply js https gist git
  • React 功能组件:作为函数调用与作为组件调用

    假设我有一个功能组件 const Foo props gt div props name div 直接作为函数调用有什么区别 const fooParent gt div Foo name foo div 与将其称为组件相比 const f
  • 名称属性的 CSS 选择器?

    这可能是一个愚蠢的问题 但是属性的 CSS 选择器是什么 a 那是 名字 document body innerHTML myString anchor HTML String 这段 JavaScript 创建了一个 a 带有名称的元素 H
  • 如何使用 JS/Puppeteer 上传文件

    我试图弄清楚如何将图片文件上传到输入对话框中 不可能只输入名称并按 Enter 键 因为我没有找到使用 Puppeteer 实现自动化的方法 我想我必须设置一些值作为图片 但我不知道该怎么做 有任何想法吗 您使用上传文件elementHan
  • 验证动态添加的输入字段

    我用过this http docs jquery com Plugins Validation以下表单的 jquery 验证插件
  • 删除数组中所有对象的属性

    我想删除bad数组中每个对象的属性 有没有比使用更好的方法for循环并从每个对象中删除它 var array bad something good something bad something good something for var
  • 处理照片上传的最佳方式是什么?

    我正在为一个家庭成员的婚礼制作一个网站 他们要求的一个功能是一个照片部分 所有客人都可以在婚礼结束后前往并上传他们的照片 我说这是一个很棒的想法 然后我就去实现它 那么只有一个问题 物流 上传速度很慢 现代相机拍摄的照片很大 2 5 兆 我
  • 如何使用 Ajax 在 Flask 中发布按钮值而不刷新页面?

    我有一个问题 当我单击 Flask 应用程序中的按钮时 我想避免重新加载 我知道有 Ajax 解决方案 但我想知道如何将我的按钮链接到 ajax 函数以发布按钮值并运行链接到其值的 python 函数 这是我的 html 按钮 div di
  • 将base64图像转换为Node Js中的文件

    我是 Node Js 新手 我需要包含用户的个人资料图片 我从 IOS 应用程序收到 Base64 图像的请求 我需要将其存储在 images 文件夹中并将图像路径保存在 mongodb 数据库中 我使用了以下代码 var bitmap n
  • 角度距离计算

    我正在使用角度制作距离计算应用程序 Html
  • Javascript For 循环在 dom 元素上执行[重复]

    这个问题在这里已经有答案了 我有 javascript 代码来获取具有类名称的元素 并迭代从元素中删除该类 var elements document getElementsByClassName test console log Leng
  • Chrome + 另一个进程:进程间通信比 HTTP/XHR 请求更快?

    我有一个进程 1 对视频流进行实时图像处理 我需要在 Chrome 中的 HTML 页面中渲染该视频 同一台计算机上的进程 2 在canvas or img or videoHTML5 元素 由于我有 1000x1000 像素 x 3 字节
  • JavaScript 开关(真)

    你好 我正在尝试处理 ajax json 响应 这是我的代码 success function j switch true case j choice1 alert choice2 break case j choice2 alert ch
  • Fancybox修改。如何修改 fancybox 以停止在每个画廊的最后一项? (画廊 1 画廊 2 等)[重复]

    这个问题在这里已经有答案了 我正在为我的照片库使用 fancybox 插件 我有多个包含更多项目 照片 的画廊 我想知道如何在点击每个画廊的最后一个项目时停止幻灯片放映 我的 fancybox js 没有被修改 谢谢 您需要添加该选项loo

随机推荐

  • 锁表查询及处理

    锁表及查询及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