JavaScript高级④｜类（class）与面向对象，ES6现代写法

author: 专注前端开发分享JavaScript干货title: JavaScript高级④类class与面向对象ES6现代写法update: 2026-04-28tags: JavaScript,class,面向对象,继承,静态方法,私有属性,前端进阶作者专注前端开发分享JavaScript干货更新时间2026年4月适合人群有JS基础想用现代语法写面向对象程序的开发者前言class是语法糖ES6的class本质上还是基于原型的继承只是提供了更清晰的语法。会用class才能看懂现代前端框架的源码。一、class基本语法// ES5写法原型方式functionPerson(name,age){this.namename;this.ageage;}Person.prototype.sayHifunction(){console.log(你好我是${this.name}${this.age}岁);};Person.prototype.introducefunction(){return我叫${this.name};};// ES6 class写法语法糖classPerson{constructor(name,age){this.namename;this.ageage;}sayHi(){console.log(你好我是${this.name}${this.age}岁);}introduce(){return我叫${this.name};}}// 使用constpnewPerson(张三,25);p.sayHi();// 你好我是张三25岁console.log(p.introduce());// 我叫张三二、继承extends superclassAnimal{constructor(name){this.namename;}eat(){console.log(${this.name}在吃东西);}staticinfo(){console.log(这是一个动物类);}}classDogextendsAnimal{constructor(name,breed){super(name);// 调用父类构造函数必须先调用this.breedbreed;}bark(){console.log(${this.name}在汪汪叫);}// 方法重写eat(){super.eat();// 调用父类方法console.log(狗狗吃得很香);}}constdognewDog(旺财,金毛);dog.eat();// 旺财在吃东西 狗狗吃得很香dog.bark();// 旺财在汪汪叫Dog.info();// 这是一个动物类静态方法三、静态方法staticclassMathUtils{// 静态方法属于类不属于实例staticadd(a,b){returnab;}staticmultiply(a,b){returna*b;}// 实例方法sum(...numbers){returnnumbers.reduce((a,b)ab,0);}}// 调用静态方法console.log(MathUtils.add(1,2));// 3console.log(MathUtils.multiply(3,4));// 12// 实例方法需要newconstutilsnewMathUtils();console.log(utils.sum(1,2,3));// 6// 静态属性ES2022classConfig{staticAPI_URLhttps://api.example.com;staticTIMEOUT5000;}console.log(Config.API_URL);// https://api.example.com四、私有属性和方法ES2022classUser{// 公有字段ES2022name默认名字;// 私有字段#开头外部无法访问#password;#salary0;constructor(name,password){this.namename;this.#passwordpassword;}// 公有方法changePassword(oldPwd,newPwd){if(this.#verifyPassword(oldPwd)){this.#passwordnewPwd;returntrue;}returnfalse;}// 私有方法#verifyPassword(pwd){returnpwdthis.#password;}// getter访问器getinfo(){return用户${this.name};}// settersetsalary(value){if(value0){this.#salaryvalue;}}getsalary(){returnthis.#salary;}}constusernewUser(张三,123456);console.log(user.name);// 张三公有// console.log(user.#password); // ❌ SyntaxErroruser.salary10000;console.log(user.salary);// 10000console.log(user.info);// 用户张三五、抽象类模式模拟// JS没有原生的抽象类可以用抛出错误模拟classShape{constructor(){if(new.targetShape){thrownewError(不能实例化抽象类);}}// 抽象方法子类必须实现area(){thrownewError(子类必须实现area方法);}}classCircleextendsShape{constructor(radius){super();this.radiusradius;}area(){returnMath.PI*this.radius**2;}}// const s new Shape(); // ❌ 报错constcnewCircle(5);console.log(c.area());// 78.5398...六、实战数据模型封装classProduct{static#nextId1;constructor(name,price){this.idProduct.#nextId;this.namename;this.priceprice;this.createdAtnewDate();}// 折扣价getdiscountedPrice(){returnthis.price*0.8;}// 格式化输出toString(){return${this.name}¥${this.price};}// 静态方法批量创建staticcreateMany(products){returnproducts.map(pnewProduct(p.name,p.price));}}// 使用constp1newProduct(手机,3000);constp2newProduct(耳机,500);console.log(p1.toString());// 手机¥3000console.log(p1.discountedPrice);// 2400constproductsProduct.createMany([{name:电脑,price:8000},{name:平板,price:3000}]);console.log(products.length);// 2七、知识卡概念说明class定义类constructor构造函数extends继承super()调用父类构造函数/方法static静态方法/属性#field私有字段ES2022get/set访问器八、课后作业用class实现一个Queue队列有enqueue、dequeue、front、size方法创建一个BankAccount类私有字段#balance提供deposit、withdraw、getBalance方法用继承实现BaseModel基类有save、toJSON方法UserModel继承它并添加fullName属性有问题欢迎评论区留言大家一起讨论标签JavaScript | class | 面向对象 | 继承 | 静态方法 | 私有属性 | 前端进阶