ES6知识点整理class的应用

ES6--class类(详解/看完必会) ES6中class类的学习,看完必会 阅读详情

class

  • class 本身是个语法糖,主要为了考虑在编码上更加人性化
  • 内部有super,static,get 等关键词
  • 使用起来非常类似于后台语言

使用class进行类的实现应用

'use strict';

// User 类
class User {
  constructor(name,age) {
    this.name = name;
    this.age = age;
  }

  static getName() {
    return 'User';
  }

  static getAge() {
    return this.age;
  }

  setName(name) {
    this.name = name;
  }

  setAge(age) {
    this.age = age;
  }

  get info() {
    return 'name:' + this.name + ' | age:' + this.age;
  }
}

// Manager 类
class Manager extends User{
  constructor(name,age,password){
    super(name,age);
    this.password = this.password;
  }

  changePwd(pwd) {
    return this.password = pwd;
  }

  get info() {
    var info = super.info; // 使用super继承父级 get
    return info + ' === new';
  }
}
// typeof User:  function  typeof Manager:  function
console.log('typeof User: ', typeof User, ' typeof Manager: ', typeof Manager); 

let manager = new Manager('Li', 22, '123456');
manager.setAge(23);
console.log(manager.info); // name:Li | age:23 === new
console.log(User.prototype);
console.log(Manager.prototype); 

在class之前使用原型对象定义类的应用

// 构造函数
function User(name,age) {
  this.name = name;
  this.age = age;
}
// 原型
User.prototype = {
  getName:function(){
    return 'User';
  },
  setName:function(name){
    this.name = name;
  },
  getAge:function(){
    return this.age;
  },
  setAge:function(age){
    this.age = age;
  }
}

// 取值函数和存执函数
Object.defineProperty(User.prototype,'info', {
  get() {
    return 'name:' + this.name + ' | age:' + this.age;
  }
});

var user = new User('Joh', 26);
console.log(user); // User {name: "Joh", age: 26}

// 子类
function Manager(name, age, password) {
  User.call(this, name, age);
  this.password = password;
}

Manager.__proto__ = User; // 继承静态方法
Manager.prototype = Object.create(User.prototype); // 继承prototype原型方法
Manager.prototype.changePwd = function (pwd) {
  this.password = pwd;
};
var manager = new Manager('Li', 22, '123456');
manager.setAge(23);
console.log(manager.info); // name:Li | age:23
console.log(User.prototype); // 不变
console.log(Manager.prototype); // {changePwd:function(){}, info:"name:undefined | age:undefined", __proto__:指向Manager.prototype}

使用 class 定义的类不被提升,需按顺序执行

正常:

let user = new class User {
  constructor(name) {
    this.name = name;
  }
}('Joh');
console.log(user); // User {name: "Joh"}

错误:

var man = new Man(); // 此处报错,使用class声明的类不会被提升 Uncaught ReferenceError: Man is not defined
class Man {
  constructor(name){
    this.name = name;
  }
}
ES6面试题整理 阅读详情

相关推荐

ES6里的类(Class)不会用?看完这篇你就会了!

写在前面 本篇文章旨在让读者快速入门ES6中关于类的相关运用,关于在ES5中如何实现近类结构等问题不在此过多讲解。 默认读者掌握关于面向对象的基本知识,并了解其他面向对象语言中的类的概念。 类的声明 基本语法 要声明一个类,首先打出class关键字,然后是类的名字,后面的部分跟声明一个对象类似,但是并不需要用 逗号 隔开各个部分。 举个栗子: class FoodClass{ //构造函数,constructor是保留字,constructor构造函数是可以缺省的 constructor(name){ this.name = name; } showName(){ consol

ES6语法之——class

在面向对象的编程中,class 是用于创建对象的可扩展的程序代码模版,它为对象提供了状态(成员变量)的初始值和行为(成员函数或方法)的实现。使用场景:在日常开发中,我们经常需要创建许多相同类型的对象,例如用户(users)、商品(goods)或者任何其他东西。正如关键字new可以帮助我们实现这种需求。但在现代 JavaScript 中,还有一个更高级的“类(class)”构造方式,它引入许多非常棒的新功能,这些功能对于面向对象编程很有用。基本语法: 然后我们使用new MyClass()来创建拥有上述方

m0_63153901的博客 848

《探秘 BME680温度湿度气压气体传感器模块:环境感知的卓越之选》:此文为AI自动生成

BME680 是一款由博世公司推出的集成环境传感器模块,在环境监测和物联网等领域中发挥着重要作用。它能够同时测量温度、湿度、气压和气体浓度等多个环境参数,为各种应用提供准确可靠的环境数据。该模块采用小巧的封装形式,便于集成到各种设备中,无论是智能家居、可穿戴设备还是工业监测系统,都能轻松适配。例如,在智能家居系统中,BME680 模块可以监测室内环境参数,如温度、湿度、气压和空气质量等。通过与智能家居控制器或智能手机应用程序的连接,用户可以实时了解室内环境状况,并根据需要进行调整。

zheng_ruiguo的专栏 1874

ES6 class类的用法

es6 class基础用法 以前的JavaScript没有类的概念,它是基于原型的面相对象的语言。原型对象的特点就是将自身属性共享给新对象。我们先看一下下面的代码实现。 //常规写法 function Person(name,age) { this.name = name; ...

weixin_33869377的博客 338

【Unity3D】RTS Engine 笔记一

RTS Engine 中配置一个新场景, 初步认识GameManager、设置地形以及配置地形网格搜索

ViYeye的博客 1653

Python调用Google Trends官方数据接口实战指南

Google Trends作为全球最权威的搜索热度分析工具,其数据本质是公开、结构化、可编程访问的时序指标,而非需爬取的网页内容。其底层基于标准HTTP协议与JSON API交互,核心原理在于复现用户浏览器行为——通过/explore接口获取token,再凭token请求/widgetdata/multiline等端点获取归一化(0-100)时间序列数据。该技术路径规避了Selenium渲染依赖与非官方库的脆弱性,具备高稳定性、易调试、可监控等工程优势,广泛应用于竞品监测、内容选题验证、地域营销策略制定等业

weixin_29789925的博客 422

Vue 或者 React 中,什么情况下会用 Es6 的 Class 类

class类

云散的博客 2152

Sigrity XtractIM实战:5步搞定IC封装宽带模型提取(附BGA案例)

本文通过一个典型BGA封装案例,详细介绍了使用Cadence Sigrity XtractIM工具进行IC封装宽带模型提取的五步实战流程。内容涵盖从环境准备、参数设置、结果验证到模型导出的完整操作,重点阐述了如何利用XtractIM生成高精度、紧凑的宽带SPICE模型,以解决高速电路设计中因封装模型不准导致的信号与电源完整性问题,助力工程师提升仿真精度与设计效率。

a1b2c的博客 321

ES6--Class类

Class概述 概述 在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。 class 的本质是 function。 它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。 基础用法 类定义 类表达式可以为匿名或命名。 // 匿名类 let Example = class { constructor(a) { this....

吴声子夜歌的博客 820

Vue - 详细实现低代码平台,支持拖曳式可视化生成应用软件功能,用户通过拖拽元素、搭积木的方式创建应用(适合迭代的基础架构、低代码平台)

Vue低代码平台-拖曳式拖拉拽可视化生成应用软件,拖拽式低代码数据可视化开发平台,vue实现拖拽,拖拽式Vue组件代码生成平台,基于vue的可视化拖拽代码生成工具,Vue实现可拖拽组件的方法,一个低代码平台的前端部分,靠拖拉拽生成页面。Vue技术栈从零实现低代码可视化搭建平台示例,低代码轮子,通过拖拽就可生成Vue代码的平台来了,vue低代码平台开发相关比低代码更强大的零代码开发平台,这款低代码SAAS数据可视化工具,拖拽生成大屏。vue实现拖拽效果,Vue自由拖拽缩放组件,自定义组件(文本、图片

🏆 前端领域优质创作者 1万+

YOLOV12融合MSDA多尺度空洞注意力:突破尺度限制的科研实践指南

MSDA通过多尺度空洞注意力的设计,为YOLOV12突破尺度检测瓶颈提供了有效方案。从原理理解到代码实现,再到集成调优,每一步都是科研中“解决实际问题”的具体实践。如果你在实验中发现某类尺度目标的检测仍有不足,可以尝试结合数据增强(如随机缩放、多尺度训练)来强化模型对尺度变化的鲁棒性。科研的价值在于不断解决真实难题,希望这份指南能真正帮你在目标检测的尺度感知领域找到新的突破点,祝你在科研探索中持续收获新的见解与成果。

FJN110的博客 244

ES6 知识点整理

ES6核心知识点摘要 变量声明:let/const具有块级作用域和暂时性死区,const声明常量时引用类型属性可修改。 箭头函数:继承外层this,不可作构造函数,无arguments对象。 模板字符串:反引号支持多行文本和变量嵌入(${x})。 解构赋值:从数组/对象快速提取值,简化数据操作。 异步处理:Promise管理异步状态,async/await以同步写法处理异步。 数据结构:Set自动去重,Map支持任意类型键。 Class与模块化:类语法糖实现继承,import/export拆分代码模块。 高

黄同学的博客 1482

【QNX+Android虚拟化方案】129 - USB眼图参数配置

【QNX+Android虚拟化方案】129 - USB眼图参数配置

|~~~热爱生活、努力学习的小伙汁~~~| 821

ES6新特性整理

欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 声明:本文参考文章如下: 业界大佬阮一峰老师的ES6标准入门 一位道友的[理解 JavaScript 中的 for…of 循环](https://www.cnblogs.com/m2maomao/p/7743143.html) github上的You-Dont-Know-JS Babe...

王工头的博客 7068

部署与可视化系统:移动端跟踪系统:YOLOv8 + ByteTrack 结合 Android CameraX 实现实时行人计数 App

本文详细介绍了在Android移动端实现实时行人检测、跟踪与计数系统的完整方案。系统采用YOLOv8+ByteTrack技术栈,基于NCNN推理引擎,无需云端算力即可在手机端侧完成全流程处理。文章从技术选型、系统架构、CameraX集成等多个维度进行深入解析,重点阐述了移动端部署面临的工程挑战和优化策略。通过四层管道模型设计,实现了从图像采集到目标跟踪的高效处理流程,并采用C++ NDK开发确保性能。该系统在中端手机上可达到10FPS,旗舰机型可达30FPS,为移动端实时目标跟踪提供了可落地的解决方案。

ZXSXJ的博客 94

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

es6知识点整理

es6知识点整理 文章目录es6知识点整理let和const变量的解构赋值模板字符串函数的扩展对象的语法糖set和mapsymbolPromiseasync/awaitclass let和const let 声明变量 不存在变量提升 不能在变量声明语句之前去使用变量 在变量声明前使用变量会报错 暂时性死区 存在暂时性死区,即在变量声明语句之前的区域和声明语句外的块级作用域下是不能使用该变量的 不允许重复声明 在声明变量之后,不能重复声明该变量,只能进行赋值操作 块级作用域 ES6中,

XDE_cat_的博客 807

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

ES6的简单的整理与应用

小伙伴大多数还在使用ES5来进行编写,使用ES5这无可厚非,因为ES5毕竟还是主流,速度也更快,但ES6引入的新特性是ES5无法比拟的,接下来分享一下我掌握的es6 也为自己做个总结 ES6搭建环境(与语法没什么关系 可忽略) 现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的...

前端小狮的博客 304

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

贝叶斯统计 [韦来生编]

贝叶斯(Bayes)统计是近几十年来迅速发展起来的数理统计的一个重要分支。贝叶斯方法与经典统计方法的主要不同之处是进行统计推断时除了利用样本信息外,还要利用参数的先验信息,因此可以提高统计推断或统计决策的效果。它在经济、金融、生物、医学、自然科学和社会科学等许多领域具有广泛的应用。贝叶斯方法的研究已渗透到了统计学的几乎所有领域。作者在给中国科学技术大学概率论与数理统计专业本科生开设的“数理统计”课程中有一章专门讲授“贝叶斯方法和统计决策理论”,近十年来也给中国科学技术大学概率统计专业研究生开设过几次“贝叶斯分析”课。本书是在对过去讲稿的内容作了适当的增减和调整的基础上完成的。  本书共分六章。第1章是绪论,介绍了贝叶斯统计的若干基本概念,同时对必要的数理统计的基础知识有重点地作了回顾。第二章介绍了确定先验分布的若干可供选择的方法。第三章介绍了几类常见统计模型参数的后验分布的主要结果和计算方法。第四章和第五章分别介绍了“贝叶斯统计推断”和“贝叶斯统计决策”的内容。第六章介绍了贝叶斯统计计算的若干方法,包括蒙特卡洛方法和马尔可夫链蒙特卡洛(MCMC)方法以及相关统计软件的简介。本书的每一章附右大量的例题和习题,书末附有常用的几个表格和部分习题解答供读者查用。  大约可在54学时内讲授本书的第1章至第六章的主要内容,教师可根据学时需要选讲本书第1章至第六章的部分内容。书中标“*”号的章节可略去不讲,留给读者作为阅读材料。第六章例题中的R代码和部分例题的数据文件等可从作者个人主页下载。  作者在编写本书的过程中参考了J.O.Berger教授的《统计决策论及贝叶斯分析》和茆诗松教授编写的《贝叶斯统计》等书中的一些内容,以及《贝叶斯分析》一书中由张伟平博士编写的有关贝叶斯统计计算的一些内容。在此表示衷心感谢。  本书编写准备过程中,中国科学技术大学统计与金融系的几个研究生帮助完成了本书部分中文的录入和排版,作者对他们的辛勤工作表示真诚的感谢。高等教育出版社为本书的出版给予了大力支持。在此一并致谢。

ES6面试、复习干货知识点汇总

点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群作者:StevenLikeWatermelon https://juejin.cn/post/68449037344644...

程序员成长指北 1297

ES6中Class的基本用法

有一段时间没有写Class了,突然遇到几个点有不确定了。在这里回顾整理一下。 Class是什么 ES6 提供了更接近传统面向对象语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。 在ES6没有出来之前, 通过prototype一样可以开心的玩耍。 function F(val){ // 对象属性 this.x = val } // 对象方法 F.prototype.f1 = function () { console.log(this.x) } // .

凡友福老师的博客 1100

es6 filter函数的用法_ES6语法重点整理

目录:数组、函数、Symbol和对象Proxy和ReflectGenerator函数和Promise对象Class、ModuleES6简介:ECMAScript6是JavaScript语言的下一代标准,在2015年6月正式发布。其目标是使JavaScript语言可用于编写复杂的大型应用程序,成为企业级开发语言。本文参考:《ES6 标准入门》阮一峰,《JavaScript权威指南》、JavaScri...

weixin_36444911的博客 1393

ES6 class关键字 ~ 非常详细

下面的对ES6中class关键字的整理,希望可以帮助到有需要的小伙伴~ 文章目录类的声明构造函数getter与setter不允许提前声明不允许重复声明静态方法静态方法的语法类的继承实现类的继承继承于内置对象Super关键字类的实例 传统面向对象是基于类的面向对象,类的继承实际上是构造函数的继承 JSON是基于原型的面向对象 es6 给了JSON类的语法规则,但是底层没有提供类,底层是构造函数。类的继承实际上是构造函数的继承。 // 这个原型指向对象 Hero.prototype = { age :

weixin_46370867的博客 462

ES6中的class类详解,web中文开发

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点,以及我个人的学习方法、学习路线等,当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面,包括但不限于前端基础,HTML,CSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取,点击资料领取直通车免费领取!是附赠给大家的。知识点涉及比较全面,包括但不限于前端基础,HTML,CSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等。

2401_84093203的博客 942

js ES6类class类(语法糖)整理

在es5中,生成实例对象的方法是通过构造函数 在es6中,通过class关键字,可以定义类, 类必须要用new调用否则会报错 //es5 function Person(name,age){ this.name=name; this.age=age; } var obj =new Person("张三",18); console.log(obj.name,o...

HwH66998的博客 1269

ES6用法整理

ES6用法整理let 和 const扩展运算符(...)Set 和 MapPromiseProxy 和 ReflectGenerator函数 和 async 函数Class类 let 和 const ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。 { let a = 10; var b = 1; } a // Refer...

曹天笑_笑笑笑的博客 431

ES6中的class类详解

静态方法和静态属性,是使用的属性和方法2.1 静态方法静态方法不会被子类继承,子类不能调用静态方法中的this,指向的是类class,不是类的实例。因此,不能通过实例来调用// 报错2.2 静态属性// 静态属性静态属性不能被子类继承,子类不能调用静态属性只能通过类名来调用,不能通过类的实例来调三、class继承extendsclass可以用过extends关键字来继承ES6继承,子类构造函数中必须使用super()。

2301_78145364的博客 1432
上一篇: ES6知识点整理let和const的应用
下一篇: 构建工具Grunt的快速使用
Wang's Blog
博客等级 码龄12年 7438粉丝 2421原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值