ES6--class类（详解/看完必会）

已于 2024-07-01 17:57:45 修改
阅读量9.8k 收藏 93
点赞数 26
分类专栏： ❤️❤️--Javascript 文章标签： es6 前端 es6之class类 class类继承 class类详解
于 2023-02-22 15:05:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/129144571
版权

目录

1、基本概念

2、基本用法

3、class与构造函数的区别

4、constructor的使用

5、自定义方法

6、extends和super

（1）问题一：我们想要在点击按钮二的时候改变字体大小，如何写呢？

（2）问题二：有的人又说，那直接再写一遍好了，把原来父类的construtor方法内容全部照搬过来，只是多了一个fontSize属性而已，请问这样可以吗？

（3）super如何使用呢？

（4）除了属性可以改写，方法也可以改写 

7、static关键字

8、setter和getter方法

（1）setter

 （2）getter

全代码粘贴

让你彻底学会class类~

我们通过一个例子来说明这个class类的原理以及如何使用，，，

我们想要实现的功能就是：根据用户输入的内容点击不同的按钮生成两种不同的语句，并输出显示

 先写一个功能html。然后开启我们的class学习之路

      <input type="text">
      <button class="btn1">自动生成语句一</button>
      <button class="btn2">自动生成语句二</button>
      <p></p>

接着我们先用原生js获取到每个标签

      <script>
            const input = document.querySelector('input'),
                  btn1 = document.querySelector('.btn1'),
                  btn2 = document.querySelector('.btn2'),
                  p = document.querySelector('p')
      </script>

1、基本概念

类可以看做是对象的模板，用一个类可以创建出许多不同的对象

2、基本用法

calss 类名 {} 没有分号，类名首字母大写，内容写在花括号里面。实例化执行构造方法，所以必须有构造方法constructor ，但可以不写出来。在构造方法constructor 中定义属性，在构造方法constructor外面定义方法。

3、class与构造函数的区别

大家一听类名首字母大写？就会想起来构造函数，构造函数也是首字母大写，其他class和构造函数都是自家人，Class在语法上更加贴合面向对象的写法，实现继承更加易读、易理解，更易于写java等后端语言的程序员使用，本质上还是语法糖，使用prototype；用typeof检测都是function类型。  那是不是也可以用new生成实例呢？答：正确

接下来我们来定义一个类，然后再生成一个实例。

 注意：这个实例要写在定义类的后面，因为class是没有什么声明提升这样的功能的。

 我们可以看到上面创建的实例，明显是个空实例，因为构造函数的同门师兄弟class里面没有内容，我们要想把他丰富起来，例如添加属性或者方法，这些属性或方法是每次生成实例都会各自添加的，也就是说我们要让每个实例都有自己特有的属性，但是都享用同一套代码，这么一想，好像挺方便的，如何写呢？

我们这时就要用到constructor了，constructor是class里面的一个方法，每次new的时候就会触发这个constructor，我们可以通过constructor定义2个参数 

4、constructor的使用

这里创建实例的时候传入的2个参数，此时this.text就被赋值了‘我输入了’，也就是实例的属性text这时就被赋值了‘我输入了’这个字符串。

定义完了属性，如何定义方法？

5、自定义方法

方法直接写就行，在class里面创建方法也不需要写function关键字，也不需要用this。

 这个方法就代表，当触发该方法的时候，p标签里面的内容就会变成Generatestate实例的text属性+用户输入的内容，p标签的字体颜色就会变成实例的color属性。这两个属性都是根据传入的参数来动态变化的。

此时我们来给按钮添加点击事件，来触发实例里面的showWord函数

最低0.47元/天 解锁文章
suoh's Blog
关注
  • 26
    点赞
  • 踩
  • 93
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
ES6中的class类详解，万字长文轻松彻底入门Flutter
m0_60607971的博客
03-31 417
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件VUE组件库级组件封装-高复用弹窗组件。
ES6中的类（Class）
m0_70273331的博客
04-29 258
this与class（原型） 属性与方法添加到this上 属性与方法添加到类上 类的静态成员 [](()类的基本语法 ================================================================ ES6提供了更接近面向对象（注意：javascript本质上是基于对象的语言）语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，E..
ES6 中的类（class）
TKOP_的博客
04-16 1264
ES6 引入的 class 关键字具有定义类的能力。类是 ECMAScript 中新的基础性语法糖。虽然 ES6 表面上看起来可以支持正式的面向对象编程，但实际上它背后使用的依旧是原型和构造函数的概念。（笔记内容参考《JavaScript 高级程序设计（第4版）》章节8.4 类以前在笔记《js 中原型、原型链和继承概念（详细全面）》中简要提过部分内容，这里系统看一次。类声明和类表达式。两种方式都需要使用 class 关键字加大括号定义。类表达式与函数表达式类似，在它们被求值前都不能被引用。
Java基础：类的详细说明
最新发布
epitomizelu的专栏
05-29 840
访问修饰符] class 类名 {// 成员变量（属性）[修饰符] 数据类型 变量名;// 构造函数[修饰符] 类名([参数列表]) {// 初始化代码// 成员方法（行为）[修饰符] 返回类型 方法名([参数列表]) {// 方法体```java// 类的定义// 成员变量// 默认构造函数System.out.println("默认构造函数被调用");// 有参构造函数System.out.println("有参构造函数被调用");// 成员方法。
ES6 javascript中Class类继承用法实例详解
11-27
本文实例讲述了ES6 javascript中Class类继承用法。分享给大家供大家参考，具体如下： 1. 基本用法 Class 之间可以通过extends关键字实现继承， 这比 ES5 的通过修改原型链实现继承， 要清晰和方便很多。 class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类， 该类通过extends关键字， 继承了Point类的所有属性和方法。 但是由于没有部署任何代码， 所以这两个类完全一样， 等于复制了一个Point类。 下面， 我们在ColorPoint内部加上代码。 class ColorPoint extend
解读ES6中class关键字
11-29
class是es6引入的最重要特性之一。在没有class之前，我们只能通过原型链来模拟类。 1 、介绍  //定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } 　　Point类除了构造方法，还定义了一个toString方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不
Class 的基本语法
Geordies的博客
02-09 693
# Class 的基本语法 # 简介 # 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this....
es6（五）—— class（类）详解
weixin_44784401的博客
02-07 3166
JavaScript 中 class（类）详解
详解ES6的类
lisusususuli的博客
02-20 1724
基础 一个简单的示意图 ES5实现构造函数和实例对象 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';}; var p = new Point(1, 2); ES6...
JS es6的Class类详解
热门推荐
weixin_44691513的博客
09-05 3万+
文章目录JS es6的Class类详解class基本语法Class的基本语法之constructorClass的基本语法之类的调用方式Class的基本语法之getter和setterClass的基本语法之类的属性名Class的基本语法的特别注意点Class的静态属性和方法Class的私有方法和私有属性构造函数的新属性构造函数的新属性 JS es6的Class类详解 class基本语法 JavaScript 语言中，生成实例对象的传统方法是通过构造函数和原型的组合模式.ES6 提供了更接近传统语言（java）
Class类（基本介绍、常用方法）
while(true){ study }
07-17 1万+
从类图来看，Class就是一个类，和其他类是一样的，只是这个类的使用方法和功能有点特殊性，仅此而已。类加载器，也就是ClassLoader，里面有个方法叫loadClass()，通过这个方法来完成类加载，生成某个类对应的Class对象。如果加载的类不是同一个那Class肯定就不同了。验证一下我们可以创建一个Dog类这里肯定跟上面是不相同了，Dog类和Cat类已经不是同一个类，也就是说Dog类在堆内存中也会有一个Class对象，cls1和cls2对应的是同一个。......
es6-promise.auto.js
10-31
<!-- Automatically provides/replaces `Promise` if missing or broken. --> [removed][removed] ...-- Minified version of `es6-promise-auto` below. --> [removed][removed] [removed][removed]
es6-string-html：es6多行字符串中的突出显示代码
02-05
在es6多行字符串中添加了对代码的语法突出显示支持： ...只需在字符串之前插入注释/ * html * /或html （或sql而不是html）（有关可能的值，请参见“要求”部分），或从命令菜单中选择Insert es6-string-h
es6-promise
04-02
es6-promise.auto.js ,可用于微信小程序开发，小程序里需要
es6-class-mixin:ES6类的Mixins
05-02
npm i -S es6-class-mixin 原料药 mixin通过具有功能或属性的对象扩展给定的类。 mixin ( ParentClass , ... mixins ) // return new MixedClass extended by Mixins 例子 // Basic const mixin = require ( 'es6-...
es6-class:ES6 类编译为 ES5
07-03
编译使用 ES6 类编写的 JavaScript 以使用与 ES5 兼容的函数语法。 例如，这个： class Person { constructor ( firstName , lastName ) { this . firstName = firstName ; this . lastName = lastName ; } ...
Class类常用方法介绍、获取Class对象的方式、通过反射实现各种骚操作
Java技术攻略的博客
03-07 3780
加载和连接是JVM来完成的，我们无法控制，而初始化阶段就是我们自己可控的了（比如你在静态代码里面写什么内容是你自己可以控制的）用户可能输入1，也可能输入2，Dog类不一定会用到，静态加载不管那么多，它在编译的时候就会加载这个类，并且进行语法的校验。Person类是动态加载，所以，没有编写Person类也不会报错，只有当动态加载该类时，才会报错。动态加载 : 运行时加载需要的类,如果运行时不用该类，则不报错，降低了依赖性。静态加载 : 编译时加载相关的类，如果没有则报错，依赖性太强。
ES6中class类、类的继承extends、多态、字面量的增强、解构、let/const、字符串模板、函数的默认参数、展开语法、数值、Symbol使用、Set、Map、es7-13总结
米儿的博客
11-17 2291
一、认识class定义类 我们会发现，按照前面的构造函数形式创建 类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。 在ES6（ECMAScript2015）新的标准中使用了class关键字来直接定义类； 但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已； 可以使用两种方式来声明类：类声明和类表达式 // 类的声明 class Person { } // 类的表达式 var Animal = class { } 类和构造函数的异同 类的一些特性和我们的构造函数的特性其实是一
es6中class类封装
10-11
在ES6中，我们可以使用class关键字来定义类并实现封装。类封装允许我们将相关的属性和方法组织在一起，从而提高代码的可读性和可维护性。 下面是一个使用class关键字封装的例子： ```javascript class Animal { constructor(name, age) { this.name = name; this.age = age; } eat(food) { console.log(`${this.name} is eating ${food}.`); } sleep() { console.log(`${this.name} is sleeping.`); } } const cat = new Animal('Tom', 3); cat.eat('fish'); // 输出：Tom is eating fish. cat.sleep(); // 输出：Tom is sleeping. ``` 在上面的例子中，我们定义了一个Animal类。类有一个构造函数`constructor`，用于初始化对象的属性。类还有`eat`和`sleep`两个方法，可以被类的实例调用。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

suoh's Blog

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

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

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

打赏作者

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

抵扣说明：

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

余额充值