目录
本文主要介绍JavaScript中面向对象的使用。在介绍之前,先介绍ES5中构造函数的使用。
1.构造函数(ES5)
<script>
function Person(name, age) {
this.name = name;
this.age = age;
this.say = function() {
return this.name + this.age;
};
}
var p1 = new Person('zs', 24);
console.log(p1.name);
console.log(p1.age);
console.log(p1.say());
</script>
2.面向对象
ES6提供了面向对象的方法:面向对象使用constructor构建对象,可定义公有属性和静态变量。
// 面向对象
class Human {
// 静态变量
static type = 'three';
// 公共属性
body = '身体';
constructor(name, age) {
this.name = name;
this.age = age;
}
walk() {
return this.name + ' can walk';
}
}
var p2 = new Human('ls', 34);
var p3 = new Human('w5', 56);
// p2实例对象
console.log(p2.name);
console.log(p2.age);
console.log(p2.body);
console.log(p2.walk());
// p3实例对象
console.log(p3.name);
console.log(p3.age);
console.log(p3.body);
console.log(p3.walk());
// 静态变量
console.log(p1.type);
console.log(p2.type);
console.log(Human.type);
3.面向对象的继承
(1)extends关键词获取父类的属性和方法
面向对象提供了继承的方法,通过extends关键词可继承某类的属性和方法。现定义Male类,继承上面定义的Human类,即可获取Human类的属性和方法。
// 继承
class Male extends Human {};
var p4 = new Male('z6', 78);
console.log(p4.name);
console.log(p4.age);
console.log(p4.body);
console.log(p4.walk());
(2)定义私有属性
此外,在子类中,可定义私有属性进行使用。
// 继承
class Male extends Human {
#power = 'strong';
getP(){
return this.#power;
}
};
var p4 = new Male('z6', 78);
console.log(p4.getP());
(3)构造扩充
在父类的基础上,子类可利用constructor构造新的构造函数
// 继承
class Male extends Human {
constructor(name, age, sex) {
super(name, age);
this.sex = sex;
}
};
var p4 = new Male('z6', 78, '男');
console.log(p4.sex);
4.面向对象的get和set方法
面向对象提供了get和set方法,其实是对象的属性。当获取该属性时,执行get中的操作,当为该属性赋值时,会执行set中的操作。
<!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 Num {
_num = 10;
get num() {
return this._num * 5;
};
set num(val) {
this._num = this._num * val;
}
}
let n = new Num();
console.log(n.num);
n.num = 3;
console.log(n.num);
</script>
</body>
</html>
打印结果: