ES6 class的应用实例分析
编程学习 2021-07-04 15:51www.dzhlxh.cn编程入门
这篇文章主要介绍了ES6 class的应用,结合实例形式分析了class在ES6面向对象程序设计中定义类的相关操作技巧,需要的朋友可以参考下
本文实例讲述了ES6 class的应用。分享给大家供大家参考，具体如下：
class
- class 本身是个语法糖，主要为了考虑在编码上更加人性化
- 内部有super,static,get 等关键词
- 使用起来非常类似于后台语言
使用class进行类的实现应用
'use strict';
// User 类
class User {
constructor(name,age) {
this.name = name;
this.age = age;
}
static getName() {
return 'User';
}
static getAge() {
return this.age;
}
setName(name) {
this.name = name;
}
setAge(age) {
this.age = age;
}
get info() {
return 'name:' + this.name + ' | age:' + this.age;
}
}
// Manager 类
class Manager extends User{
constructor(name,age,password){
super(name,age);
this.password = this.password;
}
changePwd(pwd) {
return this.password = pwd;
}
get info() {
var info = super.info; // 使用super继承父级 get
return info + ' === new';
}
}
// typeof User: function typeof Manager: function
console.log('typeof User: ', typeof User, ' typeof Manager: ', typeof Manager);
let manager = new Manager('Li', 22, '123456');
manager.setAge(23);
console.log(manager.info); // name:Li | age:23 === new
console.log(User.prototype);
console.log(Manager.prototype);
在class之前使用原型对象定义类的应用
// 构造函数
function User(name,age) {
this.name = name;
this.age = age;
}
// 原型
User.prototype = {
getName:function(){
return 'User';
},
setName:function(name){
this.name = name;
},
getAge:function(){
return this.age;
},
setAge:function(age){
this.age = age;
}
}
// 取值函数和存执函数
Object.defineProperty(User.prototype,'info', {
get() {
return 'name:' + this.name + ' | age:' + this.age;
}
});
var user = new User('Joh', 26);
console.log(user); // User {name: "Joh", age: 26}
// 子类
function Manager(name, age, password) {
User.call(this, name, age);
this.password = password;
}
Manager.__proto__ = User; // 继承静态方法
Manager.prototype = Object.create(User.prototype); // 继承prototype原型方法
Manager.prototype.changePwd = function (pwd) {
this.password = pwd;
};
var manager = new Manager('Li', 22, '123456');
manager.setAge(23);
console.log(manager.info); // name:Li | age:23
console.log(User.prototype); // 不变
console.log(Manager.prototype); // {changePwd:function(){}, info:"name:undefined | age:undefined", __proto__:指向Manager.prototype}
使用 class 定义的类不被提升，需按顺序执行
正常：
let user = new class User {
constructor(name) {
this.name = name;
}
}('Joh');
console.log(user); // User {name: "Joh"}
错误：
var man = new Man(); // 此处报错，使用class声明的类不会被提升 Uncaught ReferenceError: Man is not defined
class Man {
constructor(name){
this.name = name;
}
}
更多关于JavaScript相关内容可查看本站专题：《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。