JavaScript 构造函数详细解析

本文详细介绍JavaScript构造函数。本文目录1. 基本构造函数2. 构造函数的工作原理3. 原型与构造函数4. 实例属性 vs 原型属性5. 构造函数的继承6. 构造函数与类的关系7. 静态方法与属性8. 构造函数的问题与优化构造函数 vs 工厂函数1. 基本构造函数通过new关键字调用的函数即为构造函数// 构造函数functionPerson(name,age){// 实例属性this.namename;this.ageage;// 实例方法this.greetfunction(){returnHello, my name is${this.name};};}// 创建实例constalicenewPerson(name1,30);console.log(alice.greet());// Hello, my name is name12. 构造函数的工作原理当使用new调用构造函数时会发生以下步骤创建一个新对象新对象的原型[[Prototype]]被设置为构造函数的prototype属性构造函数的this指向新对象执行构造函数内的代码如果构造函数返回一个对象则返回该对象否则返回新创建的对象// 手动模拟 new 操作符functionmyNew(constructor,...args){constobjObject.create(constructor.prototype);constresultconstructor.apply(obj,args);returntypeofresultobjectresult!null?result:obj;}constbobmyNew(Person,Bob,25);3. 原型与构造函数构造函数的prototype属性是一个对象所有实例都会继承该对象的属性和方法functionAnimal(name){this.namename;}// 原型方法所有实例共享同一个方法Animal.prototype.speakfunction(){console.log(${this.name}makes a sound.);};constdognewAnimal(Buddy);dog.speak();// Buddy makes a sound.// 检查原型关系console.log(doginstanceofAnimal);// trueconsole.log(Object.getPrototypeOf(dog)Animal.prototype);// true4. 实例属性 vs 原型属性functionCar(make){// 实例属性每个实例独有this.makemake;this.wheels4;}// 原型属性所有实例共享Car.prototype.startfunction(){console.log(${this.make}started.);};consttoyotanewCar(Toyota);constfordnewCar(Ford);console.log(toyota.hasOwnProperty(make));// trueconsole.log(toyota.hasOwnProperty(start));// false (继承自原型)5. 构造函数的继承通过构造函数实现继承的几种方式// 父类构造函数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!);};constlabradornewDog(Buddy,Labrador);labrador.speak();// Buddy makes a sound.labrador.bark();// Buddy barks!6. 构造函数与类的关系ES6 的class是构造函数的语法糖// ES6 类classPerson{constructor(name,age){this.namename;this.ageage;}greet(){// 自动添加到原型returnHello,${this.name};}}// 等价于传统构造函数functionPerson(name,age){this.namename;this.ageage;}Person.prototype.greetfunction(){returnHello,${this.name};};7. 静态方法与属性属于构造函数本身而非实例的方法和属性functionCalculator(){// 实例属性this.value0;}// 静态方法Calculator.addfunction(a,b){returnab;};// 静态属性Calculator.version1.0;// 使用静态方法console.log(Calculator.add(3,5));// 8// 实例无法访问静态成员constcalcnewCalculator();// calc.add(3, 5); // 报错8. 构造函数的问题与优化方法重复创建每个实例都有一份方法的副本浪费内存。// 不推荐在构造函数内定义方法functionBadExample(){this.methodfunction(){/* ... */};// 每个实例都会创建新函数}// 推荐使用原型定义方法functionGoodExample(){/* ... */}GoodExample.prototype.methodfunction(){/* ... */};// 所有实例共享同一个函数忘记使用new关键字导致this指向全局对象非严格模式或undefined严格模式。// 安全的构造函数模式functionSafeConstructor(){if(!(thisinstanceofSafeConstructor)){returnnewSafeConstructor();}// 初始化代码}// 或使用 ES6 类强制使用 newclassSafeClass{constructor(){/* ... */}}构造函数 vs 工厂函数特性构造函数工厂函数调用方式通过new关键字调用像普通函数一样调用返回值自动返回新对象除非手动返回其他对象必须显式返回一个对象原型链实例的原型指向构造函数的prototype实例的原型取决于返回的对象使用场景创建具有继承关系的对象创建简单对象或需要复杂初始化的对象// 工厂函数functioncreatePerson(name,age){return{name,age,greet(){returnHello,${this.name};}};}constpersoncreatePerson(Charlie,35);← 上一篇 AngularJS知识快速入门上记得点赞、关注、收藏哦下一篇 Ajax——在OA系统提升性能的局部刷新 →