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构造函数所创建的,它依然呈现出数组的行为,在这种情 ...
随机推荐
- 去哪儿是如何做到大规模故障演练的？｜TakinTalks
# 一分钟精华速览 # 混沌工程作为一种提高技术架构弹性能力和容错能力的复杂技术手段,近年来讨论声音不断,相比在分布式系统上进行随机的故障注入实验,基于混沌工程的大规模自动化故障演练,不仅能将&quo ...
- Django AttributeError: 'BugDeserializer' object has no attribute '_meta'
BugDeserializer 对象中没有 '_meta' 属性,定位到调用BugDeserializer位置, 用于序列化时,将模型类对象传入instance参数 在update时,数据传入有误,更 ...
- week_4
Andrew Ng 机器学习笔记---by Orangestar Week4_Neural Networks : Representation 1. Non-linear Hypotheses 当特征 ...
- [LeetCode]最大连续1的个数
题目 代码 class Solution { public: int findMaxConsecutiveOnes(vector<int>& nums) { int length= ...
- ASP.NET 6.0 Core 迁移 ASP.NET Core 7.0
2022年微软发布了.NET 7, 同时提供了详细的升级迁移方案. Migrate from ASP.NET Core 6.0 to 7.0 今天给大家简单整理.分享一篇文章. 一.首先需要升级Vis ...
- 数据预处理时为什么要使用OneHot编码？
什么是LabelEncoder(整数编码) 整数编码 将一列文本数据转化成数值,即列中的每一个特征都通过一个整数来表示.例如,[red, blue, red, yellow] = [0,2,0,1]. ...
- 超级容易理解的Three.js中的物体rotation
假设模特头朝着自己现在躺在地上 那么改变Y就是等于躺着转圈圈 mesh.rotation.set( 0,Math.PI/1.2,0); 改变X就意味着,这个是本来模特头朝着自己躺着,然后站起来了,后脑 ...
- pytorch 配置详细过程
torch github 项目多 方便,api好调用 cpu版本 装torch 安装最新版本的就可以. torchvision 要版本对应 算法: torchvision版本号= torch版本号第一 ...
- 表单标签补充及css层叠样式
表单标签补充及css层叠样式 一.表单知识点补充 1.获取用户输入的标签两大重要属性 name属性:类似于字典的键 value属性:类似于与字典的值 # form表单朝后端发送数据的时候,标签必须得有 ...
- @ControllerAdvice解密请求，加密响应
package com.xf.config; import java.io.IOException; import java.io.InputStream; import java.lang.refl ...