JS面向对象详解

本文详细介绍JS面向对象。本文目录1. 基于原型的继承2. 构造函数3. ES6 类语法4. 静态方法和属性5. 访问器属性6. 继承与多态7. 组合与混入8. 私有属性和方法1. 基于原型的继承JavaScript 中每个对象都有一个内部属性[[Prototype]]指向它的原型对象。当访问一个对象的属性时JavaScript 会先在对象本身查找找不到则沿着原型链向上查找。// 创建原型对象constanimalPrototype{speak(){console.log(${this.name}makes a sound.);}};// 创建对象并指定原型constdogObject.create(animalPrototype);dog.nameBuddy;dog.speak();// Buddy makes a sound.// 检查原型关系console.log(Object.getPrototypeOf(dog)animalPrototype);// true2. 构造函数传统的创建对象和实现继承的方式// 构造函数functionAnimal(name){this.namename;}// 原型方法Animal.prototype.speakfunction(){console.log(${this.name}makes a sound.);};// 子类构造函数functionDog(name,breed){Animal.call(this,name);// 继承属性this.breedbreed;}// 继承原型方法Dog.prototypeObject.create(Animal.prototype);Dog.prototype.constructorDog;// 子类方法Dog.prototype.barkfunction(){console.log(${this.name}barks!);};constdognewDog(Buddy,Labrador);dog.speak();// Buddy makes a sound.dog.bark();// Buddy barks!3. ES6 类语法ES6 引入的class是构造函数的语法糖提供更简洁的写法// 基类classAnimal{constructor(name){this.namename;}speak(){console.log(${this.name}makes a sound.);}}// 子类classDogextendsAnimal{constructor(name,breed){super(name);// 调用父类构造函数this.breedbreed;}bark(){console.log(${this.name}barks!);}}constdognewDog(Buddy,Labrador);dog.speak();// Buddy makes a sound.dog.bark();// Buddy barks!4. 静态方法和属性属于类本身而非实例的方法和属性classMathUtils{staticPI3.14;staticsum(a,b){returnab;}}console.log(MathUtils.PI);// 3.14console.log(MathUtils.sum(2,3));// 5constutilsnewMathUtils();// utils.sum(2, 3); // 报错实例无法访问静态方法5. 访问器属性控制属性的读取和设置行为classPerson{constructor(firstName,lastName){this._firstNamefirstName;this._lastNamelastName;}// 访问器属性getfullName(){return${this._firstName}${this._lastName};}setfullName(value){const[firstName,lastName]value.split( );this._firstNamefirstName;this._lastNamelastName;}}constpersonnewPerson(John,Doe);console.log(person.fullName);// John Doeperson.fullNameJane Smith;console.log(person._firstName);// Jane6. 继承与多态JavaScript 支持单继承一个子类只能有一个父类但通过原型链和组合可以实现复杂的继承关系// 多态示例classShape{getArea(){return0;// 默认实现}}classCircleextendsShape{constructor(radius){super();this.radiusradius;}getArea(){returnMath.PI*this.radius**2;// 重写方法}}classRectangleextendsShape{constructor(width,height){super();this.widthwidth;this.heightheight;}getArea(){returnthis.width*this.height;// 重写方法}}functionprintArea(shape){console.log(Area:${shape.getArea()});// 多态调用}printArea(newCircle(5));// Area: 78.5398163397448printArea(newRectangle(4,5));// Area: 207. 组合与混入组合是比继承更灵活的代码复用方式// 混入对象constFlyable{fly(){console.log(Flying...);}};constSwimmable{swim(){console.log(Swimming...);}};// 使用组合而非继承classDuck{constructor(){Object.assign(this,Flyable,Swimmable);// 混入功能}quack(){console.log(Quack!);}}constducknewDuck();duck.fly();// Flying...duck.swim();// Swimming...duck.quack();// Quack!8. 私有属性和方法ES2022 引入了私有字段Private Fields语法classBankAccount{#balance0;// 私有属性constructor(initialBalance){this.#balanceinitialBalance;}#validateAmount(amount){// 私有方法returnamount0;}deposit(amount){if(this.#validateAmount(amount)){this.#balanceamount;}}getBalance(){returnthis.#balance;}}constaccountnewBankAccount(1000);account.deposit(500);console.log(account.getBalance());// 1500// console.log(account.#balance); // 报错无法访问私有属性← 上一篇 AngularJS知识快速入门上记得点赞、关注、收藏哦下一篇 Ajax——在OA系统提升性能的局部刷新 →