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构造函数所创建的,它依然呈现出数组的行为,在这种情 ...
随机推荐
- MySQL数据结构(索引)
目录 一:MySQL索引与慢查询优化 1.什么是索引? 2.索引类型分类介绍 3.不同的存储引擎支持的索引类型也不一样 二:索引的数据结构 1.二叉树(每个节点只能分两个叉) 2.数据结构(B树) 3 ...
- 如何让铁威马NAS可以通过互联网访问？
当你在家或者出差去外地时候,可能要通过互联网访问你的TNAS设备,而使用远程访问功能,你可以随时随地访问你的TNAS 设备.读取你TNAS 中的文件或是对你的TNAS 设备进行配置.远程访问能给你的工 ...
- javascript计算器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [python]《Python编程快速上手:让繁琐工作自动化》学习笔记7
1. 用GUI 自动化控制键盘和鼠标第18章 (代码下载) pyautogui模块可以向Windows.OS X 和Linux 发送虚拟按键和鼠标点击.根据使用的操作系统,在安装pyautogui之前 ...
- [图像处理] YUV图像处理入门3
5 yuv420格式的灰阶测试图 本程序中的函数主要是为YUV420P视频数据流的第一帧图像添加边框.函数的代码如下所示: /** * @file 5 yuv_graybar.cpp * @autho ...
- pycham debug 专辑
遇到大量代码的项目时怎么迅猛的调代码今天将交给大家几个方法 配置环境: 环境的统一是一切的基础,因为不同的版本不同步之间会造成很多各式各样的报错 然后选择现有环境进行配置 上面的路径进行默认环境变量的 ...
- Python从零到壹丨图像增强及运算：图像掩膜直方图和HS直方图
摘要:本章主要讲解图像直方图相关知识点,包括掩膜直方图和HS直方图,并通过直方图判断黑夜与白天,通过案例分享直方图的实际应用. 本文分享自华为云社区<[Python从零到壹] 五十二.图像增强及 ...
- Java 进阶P-3.5+P-3.6
对象数组的for-each循环 for-each是用于遍历数组的另一种形式的for循环.for-each循环显着减少了代码,并且循环中没有使用索引或计数器. 句法: For(<数组/列表的数据类 ...
- Linux备份服务
备份服务 一.备份服务概述 备份服务:需要使用脚本,打包备份,定时任务 通过rsyncd服务,不同主机之间进行数据传输 rsyncd特点: rsync是个服务,也是命令 使用方便,有多种模式 传输数据 ...
- drf-day1——web应用模式、API接口、接口测试工具postman
目录 学习资料 一.web 应用模式 二.API接口 API概念 三.接口测试工具postman postman介绍 postman下载与使用 四.如何在浏览器中测试 学习资料 # 个人博客:http ...