JavaScript 类(class)
JavaScript 类(class)
类是用于创建对象的模板。
我们使用 class 关键字来创建一个类,类体在一对大括号 {} 中,我们可以在大括号 {} 中定义类成员的位置,如方法或构造函数。
每个类中包含了一个特殊的方法 constructor(),它是类的构造函数,这种方法用于创建和初始化一个由 class 创建的对象。
创建一个类的语法格式如下:
实例:
实例
以上实例创建了一个类,名为 "Runoob"。
类中初始化了两个属性: "name" 和 "url"。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
使用类
定义好类后,我们就可以使用 new 关键字来创建对象:
实例
创建对象时会自动调用构造函数方法 constructor()。
类表达式
类表达式是定义类的另一种方法。类表达式可以命名或不命名。命名类表达式的名称是该类体的局部名称。
实例
let Runoob = class {
constructor(name, url) {
this.name = name;
this.url = url;
}
};
console.log(Runoob.name);
// output: "Runoob"
// 命名类
let Runoob = class Runoob2 {
constructor(name, url) {
this.name = name;
this.url = url;
}
};
console.log(Runoob.name);
// 输出: "Runoob2"
构造方法
构造方法是一种特殊的方法:
- 构造方法名为 constructor()。
- 构造方法在创建新对象时会自动执行。
- 构造方法用于初始化对象属性。
- 如果不定义构造方法,JavaScript 会自动添加一个空的构造方法。
类的方法
我们使用关键字 class 创建一个类,可以添加一个 constructor() 方法,然后添加任意数量的方法。
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
以下实例我们创建一个 "age" 方法,用于返回网站年龄:
实例
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let runoob = new Runoob("菜鸟教程", 2018);
document.getElementById("demo").innerHTML =
"菜鸟教程 " + runoob.age() + " 岁了。";
我们还可以向类的方法发送参数:
实例
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let runoob = new Runoob("菜鸟教程", 2020);
document.getElementById("demo").innerHTML=
"菜鸟教程 " + runoob.age(year) + " 岁了。";
严格模式 "use strict"
类声明和类表达式的主体都执行在严格模式下。比如,构造函数,静态方法,原型方法,getter 和 setter 都在严格模式下执行。
如果你没有遵循严格模式,则会出现错误:
实例
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // 错误
let date = new Date(); // 正确
return date.getFullYear() - this.year;
}
}
下图实例使用类未声明的变量:
更多严格模式可以参考:JavaScript 严格模式(use strict)
参考
类方法
方法 | 描述 |
---|---|
constructor() | 构造函数,用于创建和初始化类 |
类关键字
关键字 | 描述 |
---|---|
extends | 继承一个类 |
static | 在类中定义一个静态方法 |
super | 调用父类的构造方法 |
JavaScript 类(class)的更多相关文章
- 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构造函数所创建的,它依然呈现出数组的行为,在这种情 ...
随机推荐
- P8474 「GLR-R3」立春
简要题意 \(\tau(\sigma)\) 表示排列 \(\sigma\) 的逆序对个数,求: \[\sum_{i \in \operatorname{permutation(n)}}2^{\tau( ...
- css边框,盒子模型、浮动、定位
边框,盒子模型.浮动.定位 一.边框 border-width : 边框宽度 border-style : 边框样式 1.solid 实线 2.none 无边框 3.dotted 点状虚线边框 4.d ...
- Objects非空判断-声明异常throws
Objects非空判断 还记得我们学习过一个类Objects吗,曾经提到过它由一些静态的实用方法组成,这些方法是null-save(空指针安全的)或null-tolerant (容忍空指针的),那么在 ...
- 【随笔记】NDK 编译开源库 SQLite3
NDK 编译环境搭建请参考:[工作笔记]NDK 编译开源库 nghttp2/openssl/curl_lovemengx的博客-CSDN博客 一.下载源代码 wget https://github.c ...
- GDOI 2021 PJ 总结
Day 0.5 在门口等了好久,终于进去了. Day 1 下午来到考场,发现自己承诺书没有拿,然后就跑到宿舍去拿,回来发现只要身份证. T1一眼是个博弈,发现不太好打,先跳. T2发现最多消耗4320 ...
- python3异常打印堆栈信息
import traceback try: a=1/0 except: print(traceback.format_exc())
- java 启动查看jar包加载顺序并设置classpath
本文为博主原创,转载请注明出处: 1.idea查看jar包加载顺序 jdk8 可以通过 -XX:+TraceClassPaths 参数进行查看jar包的加载顺序 jdk11 可以通过 ...
- ECharts 提示框组件Tooltip属性大全(包含文本注释)
tooltip: { // 提示框组件:可以设置在全局(tooltip),可以设置在坐标系中(grid.tooltip.polar.tooltip.single.tooltip),可以设置在系列中(s ...
- Cesium中各种坐标以及相互转换(七)
2023-01-11 1.坐标系 Cartesian3 笛卡尔坐标,又叫世界坐标,是一个三维空间中的点 ,具有xyz,类似:(-1314910.6675027965, 5328726.84641194 ...
- JZOJ 3252. 【GDOI三校联考】炸弹
思路 注:上图只是个例子,其实建图时 \(5\) 是不会连向 \(6\) 的 \(Code\) #include<cstdio> #include<cstring> #incl ...