JavaScript类
一、什么是js类
类是创建对象的模板，使用class关键字， 类体在大括号{}中，类体中我们可以写需要的属性、方法成员，其中每个类都包含一个特殊方法constructor()。它是类的构造函数，由class创建的对象。
类的书写规则：
1 class className{
2 constructtor(){...}
3
4 }
二、使用类
定义好类之后，如何使用呢？使用new关键字来创建对象。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>JavaScript类</title>
8 </head>
9 <body>
10 <h2>JavaScript类的使用</h2>
11 <p id="demo"></p>
12 <script>
13 class Cnblogs {
14 constructor(name, url){
15 this.name = name;
16 this.url = url;
17 }
18 }
19 // 创建对象
20 let site = new Cnblogs("博客园", "http://cnblogs.com")
21 document.getElementById("demo").innerHTML=site.name + ":" +site.url
22 </script>
23 </body>
24 </html>
使用关键字new创建对象后，会自动调用构造方法constructor()。
三、类表达式
类表达式是另一个类的表达方法，类表达式可以命名也可以不命名，命名表达式的名称是局部名称。
1 // 匿名类/未命名类
2 let Cnblog = class{
3 constructor(name, url){
4 this.name = name;
5 this.url = url
6 }
7 }
8 // 类表达式调用
9 console.log(Cnblog.name)
那么命名类，顾名思义则是在class后面命名，则叫做命名类
构造方法constructor()会在创建对象时运行，用于创建类的属性。
四、类的方法
创建类后，可以创建一个构造方法，后面可以创建任意个方法，语法如下：
1 class classNamr{
2 constructor(param1, param2...){
3 this.param1 = param1;
4 this.param2 = param2;
5 }
6 method1(){}
7 method2(){}
8 }
例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>JavaScript类的方法</title>
8 </head>
9 <body>
10 <h2>类的方法</h2>
11 <p id="demo"></p>
12 <script>
13 class Cnblogs{
14 constructor(name, year){
15 this.name = name;
16 this.year = year
17 }
18 age(){
19 let date = new Date()
20 console.log(date)
21 return date.getFullYear() - this.year
22 }
23 }
24
25 let cnblogs = new Cnblogs("Cnblogs", 2015)
26 // cnblogs.age()
27 document.getElementById("demo").innerHTML= "博客园"+ cnblogs.age()+"岁了";
28 </script>
29 </body>
30 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>javascript类的方法实例</title>
8 </head>
9 <body>
10 <h2>这是一个汽车类</h2>
11 <p>它将输出汽车的名称、颜色、里程等信息</p>
12 <p id="demo"></p>
13 <script>
14 class Car{
15 constructor(make, model, year, color, mile){
16 this.make = make;
17 this.model = model;
18 this.color = color;
19 this.mile = mile;
20 }
21 describe_car(){
22 return "The car is "+this.make+" "+this.model+" and the color is "+this.color+" runs "+this.mile+" miles."
23 }
24 update_odometer(mileage){
25 this.mile=mileage;
26
27 }
28 increase_odometer(mileage){
29 this.mile +=mileage
30 }
31 decrease_odometer(mileage){
32 this.mile -=mileage
33 }
34 }
35 car = new Car("Audi", "A6", 2020, "Black", 20)
36 car.update_odometer(30)
37 document.getElementById("demo").innerHTML=car.describe_car()
38 </script>
39 </body>
40 </html>
构造方法：
| 方法 | 描述 |
|---|---|
| constructor() | 构造函数，用于创建和初始化类 |
关键字：
| 关键字 | 描述 |
|---|---|
| extends | 继承一个类 |
| static | 在类中定义一个静态方法 |
| super | 调用父类的构造方法 |
JavaScript类继承
JavaScript继承关键字extend
super()方法调用父方法的构造方法。已有的类称为“基类/父类”，新建的类称为“派生类/子类”。
例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>JavaScript类的继承</title>
8 </head>
9 <body>
10 <h2>JavaScript类的继承</h2>
11 <p id="demo"></p>
12 <script>
13 class Site{
14 constructor(name){
15 this.name = name;
16 }
17 present(){
18 return "我喜欢"+this.name;
19 }
20 }
21 // extends 父类方法继承父/基类类方法
22 class Cnblogs extends Site{
23 constructor(name, age, color){
24 // super()调用父类构造方法属性
25 super(name)
26 this.age = age;
27 this.color = color;
28 }
29 show(){
30 return this.present()+"它创建了" + this.age + "年了";
31 }
32 }
33 let cnblogs = new Cnblogs("cnblogs", 7, "green");
34 document.getElementById("demo").innerHTML=cnblogs.show()
35 </script>
36 </body>
37 </html>
super()引用了父类构造方法
JavaScript静态方法
静态方法，又叫类方法，使用关键字static修饰的方法。属于类，但不属于对象。可以通过类名.方法明调用。静态方法不能在对象中调用，只能在类中调用。
例:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>JavaScript静态方法</title>
8 </head>
9 <body>
10 <h2>JavaScript静态方法</h2>
11 <p id="demo"></p>
12 <script>
13 class Cnblogs{
14 constructor(name, color, age){
15 this.name = name;
16 this.color = color;
17 this.age = age;
18 }
19 static site(){
20 var site = this.name + this.age;
21 return "ok"
22 }
23 }
24 let cnblogs = new Cnblogs("cnblogs", "green", 10)
25 // document.getElementById("demo").innerHTML=cnblogs.site()
26 document.getElementById("demo").innerHTML = Cnblogs.site();
27 </script>
28 </body>
29 </html>
JavaScript类的更多相关文章
- JavaScript 类式继承与原型继承
交叉着写Java和Javascript都有2年多了,今天来总结下自己所了解的Javascript类与继承. Javascript本身没有类似Java的面向对象的类与继承术语,但其基于原型对象的思想却可 ...
- 第九章：Javascript类和模块
(过年了,祝大家新年好!) 第6章详细介绍了javascript对象,每个javascript对象都是一个属性集合,相互之间没有任何联系.在javascript中也可以定义对象的类,让每个对象都共享某 ...
- 一种JavaScript 类的设计模式
一种JavaScript 类的设计模式尽管前面介绍了如何定义一个类,如何初始化一个类的实例,但既可以在function定义的函数体中添加成员,又可以用prototype 定义类的成员,代码显的很混乱, ...
- JavaScript “类”定义 继承 闭包 封装
一.Javascript “类”: 类:在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法. Javascript是一 ...
- JavaScript类继承, 用什么方法好
JavaScript类继承, 用什么方法好 一个实例: 基类Car: function Car(color, year) { this.name = "car"; this.col ...
- javascript类式继承最优版
直接看实例代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...
- JavaScript学习总结(十三)——极简主义法编写JavaScript类
前两天在网上无意中发现了一篇使用极简主义法定义JavaScript类的文章,原文链接,这个所谓的"极简主义法"我还是第一次听说,是荷兰程序员Gabor de Mooij提出来的,这 ...
- JavaScript类数组转换为数组 面试题
1.JavaScript类数组转换为数组 (1)方法一:借用slice (2)方法二:Array.from 2.代码 <!DOCTYPE html> <html lang=" ...
- 13.JavaScript 类
JavaScript 类 JavaScript 是面向对象的语言,但 JavaScript 不使用类. 在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样 ...
- javascript类数组
一.类数组定义: 而对于一个普通的对象来说,如果它的所有property名均为正整数,同时也有相应的length属性,那么虽然该对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情 ...
随机推荐
- Hadoop如何保证自己的江湖地位？Yarn功不可没
前言 任何计算任务的运行都离不开计算资源,比如CPU.内存等,那么如何对于计算资源的管理调度就成为了一个重点.大数据领域中的Hadoop之所以一家独大,深受市场的欢迎,和他们设计了一个通用的资源管理调 ...
- vue中单独封装elementui中的Dialog弹框组件
一.在components文件中新建 弹框组件 <template> <div> <el-dialog title="提示" :visible.syn ...
- python多进程程序打包成exe的问题
粘贴一下部分的多进程代码 if __name__ == '__main__': """"流程模拟""" multiprocessi ...
- Window注册表的学习记录
注册表的结构: 概述:注册表是一种树状结构,在很早之前是系统的其他配置信息存放的文件,通常以.ini结尾的文件,因为数量太多不方便管理,后来就整合在一起形成了注册表.你可以按住键盘win+r,然后输入 ...
- python里面一些零碎知识点
1. Python中反斜杠可以用在一行结尾做续行符使用. 2. pytorch中,一般来说如果对tensor的一个函数后加上了下划线,则表明这是一个in-place类型.in-place类型是指,当在 ...
- LeetCode HOT 100：验证二叉搜索树(从左右子树获取信息进行推导)
题目:98. 验证二叉搜索树 题目描述: 给你一个二叉树,让你判断该二叉树是否是二叉搜索树.什么是二叉搜索树呢?就是某一个节点的左子树上的所有节点的值都小于当前节点,右子树上的所有节点值都大于当前节点 ...
- MQ系列10：如何保证消息幂等性消费
MQ系列1:消息中间件执行原理 MQ系列2:消息中间件的技术选型 MQ系列3:RocketMQ 架构分析 MQ系列4:NameServer 原理解析 MQ系列5:RocketMQ消息的发送模式 MQ系 ...
- [LeetCode]爬楼梯
题目 假设你正在爬楼梯.需要 n 步你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: ...
- 一次JVM GC长暂停的排查过程
作者:京东科技 徐传乐 背景 在高并发下,Java程序的GC问题属于很典型的一类问题,带来的影响往往会被进一步放大.不管是「GC频率过快」还是「GC耗时太长」,由于GC期间都存在Stop The Wo ...
- P1848 [USACO12OPEN]Bookshelf G
简要题意 给你 \(N\) 本书 \((h_i,w_i)\),你要将书分成任意段(顺序不能改变),使得每一段 \(j\) 中 \(\sum\limits_{i \in j} w_i \leq L\), ...