说明
ES6 从入门到精通系列（全23讲）学习笔记。
es5 造类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>function Person(name,) {
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
return this.name;
}
Person.prototype.getAge = function() {
return this.age;
}
let kaimo = new Person("kaimo", 313);
console.log(kaimo);
console.log(kaimo.getName());
console.log(kaimo.getAge());</script>
</body>
</html>
class 造类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>class Person {
// 实例化的时候会被立即调用
constructor(name,) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
getAge() {
return this.age;
}
}
let kaimo = new Person("kaimo", 313);
console.log(kaimo);
console.log(kaimo.getName());
console.log(kaimo.getAge());</script>
</body>
</html>
这里添加方法还可以使用 Object.assign() 一次性向类中添加多个方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>class Person {
// 实例化的时候会被立即调用
constructor(name,) {
this.name = name;
this.age = age;
}
}
Object.assign(Person.prototype, {
getName() {
return this.name;
},
getAge() {
return this.age;
}
})
let kaimo = new Person("kaimo", 313);
console.log(kaimo);
console.log(kaimo.getName());
console.log(kaimo.getAge());</script>
</body>
</html>
