JS类之JavaScript类

声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：https://www.runoob.com/

27、JS类

27.1 类的创建和使用

类是用于创建对象的模板。我们使用 class 关键字来创建一个类，类体在一对大括号 {} 中，我们可以在大括号 {} 中定义类成员的位置，如方法或构造函数。

每个类中包含了一个特殊的方法 constructor()，它是类的构造函数，这种方法用于创建和初始化一个由 class 创建的对象。
创建一个类的语法格式如下：
class ClassName {  constructor() { ... } }
定义好类后，我们就可以使用 new 关键字来创建对象，创建对象时会自动调用构造函数方法 constructor()。

1、类的创建和使用练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS类的创建</title>
</head>
<body>

<h2>JavaScript 类</h2>
<p>JavaScript类的使用</p>
<p id="demo" style="color:red;font-weight:bold"></p>

<script>
class Runoob {
    constructor(name,url){
        this.name = name;
        this.url = url;
    }
}
let site = new Runoob("菜鸟教程","www.runoob.com");
document.getElementById("demo").innerHTML =
site.name + " : " + site.url;
</script>

</body>
</html>

生成页面效果

2、类表达式

类表达式是定义类的另一种方法。类表达式可以命名或不命名。命名类表达式的名称是该类体的局部名称。未命名类表达式的名称将会被自动赋值为变量名

只是说有点难理解，看一个例子就懂了
// 未命名/匿名类
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 会自动添加一个空的构造方法。

27.2 类的方法

我们使用关键字 class 创建一个类，可以添加一个 constructor() 方法，然后添加任意数量的方法

可以向类的方法发送参数

类声明和类表达式的主体都执行在严格模式下。比如，构造函数，静态方法，原型方法，getter 和 setter 都在严格模式下执行。如果没有遵循严格模式，则会出现错误

练习一：类的方法添加

练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类方法添加练习</title>
</head>
<body>

<h2>JavaScript 类的方法添加练习</h2>

<p>此实例展示了向Runoob类添加一个age()方法</p>

<p id="demo"></p>

<script>
class Runoob {
  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() + " 岁了。";
</script>

</body>
</html>

生成页面效果

练习二：向方法传递参数

练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>传递参数练习</title>
</head>
<body>

<h2>JavaScript 类的方法参数传递练习</h2>

<p>传递参数到 "age()" 方法。</p>

<p id="demo"></p>

<script>
class Runoob {
  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) + " 岁了。";
</script>

</body>
</html>

生成页面效果

练习三：严格模式下不能使用未声明变量

练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>严格模式验证练习</title>
</head>
<body>

<h2>JavaScript 类必须遵循严格模式 "strict mode" 的规则 </h2>

<p>JavaScript 类不能使用没有声明的变量。</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // 错误
    let date = new Date(); // 正确
    return date.getFullYear() - this.year;
  }
}


myCar = new Runoob("菜鸟教程", 2020);
document.getElementById("demo").innerHTML =
"菜鸟教程 " + myCar.age() + " 岁了。";
</script>

</body>
</html>