昆明网站建设 昆明光硕,在线制作视频,商业网站开发入门选课,网站设计的发展趋势【前端知识】JavaScript——设计模式#xff08;工厂模式、构造函数模式、原型模式#xff09; 一、工厂模式 工厂模式是一种众所周知的设计模式#xff0c;广泛应用于软件工程领域#xff0c;用于抽象创建特定对象的过程。 优点#xff1a;可以解决创建多个类似对象的…【前端知识】JavaScript——设计模式工厂模式、构造函数模式、原型模式 一、工厂模式 工厂模式是一种众所周知的设计模式广泛应用于软件工程领域用于抽象创建特定对象的过程。 优点可以解决创建多个类似对象的问题 缺点没有解决对象标识问题即新创建的对象是什么类型 示例 function createPerson(name, age, job) { // 创建对象将值赋值给该对象后返回let o new Object(); o.name name; o.age age; o.job job; o.sayName function() { console.log(this.name); }; // 返回对象return o; } let person1 createPerson(Nicholas, 29, Software Engineer); let person2 createPerson(Greg, 27, Doctor);二、构造函数模式 构造函数模式与工厂模式相比没有显式地创建对象其属性和方法直接赋值给了 this且没有 return。 优点定义自定义构造函数可以确保实例被标识为特定类型 缺点其定义的方法会在每个实例上都创建一遍 示例 // 区别1: 函数名大写为了与普通函数区分 function Person(name, age, job){ // 区别2: 与工厂模式不同传入的参数赋值给thisthis.name name; this.age age; this.job job; this.sayName function() { console.log(this.name); }; // 区别3: 无需返回对象 } // 区别4: 通过new操作符创建Person实例 let person1 new Person(Nicholas, 29, Software Engineer); let person2 new Person(Greg, 27, Doctor); person1.sayName(); // Nicholas person2.sayName(); // Greg注意使用 new 操作符调用构造函数的执行过程 步骤过程1在内存中创建一个新对象。2这个新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性。3构造函数内部的 this 被赋值为这个新对象即 this 指向新对象。4执行构造函数内部的代码给新对象添加属性。5如果构造函数返回非空对象则返回该对象否则返回刚创建的新对象。 三、原型模式 每个函数都会创建一个 prototype 属性这个属性是一个对象包含应该由特定引用类型的实例共享的属性和方法。 优点在它上面定义的属性和方法可以被对象实例共享 缺点所有实例在默认情况先都将取得相同的属性值 示例 function Person() {} Person.prototype.name Nicholas; Person.prototype.age 29; Person.prototype.job Software Engineer; Person.prototype.sayName function() { console.log(this.name); }; let person1 new Person(); person1.sayName(); // Nicholas let person2 new Person(); person2.sayName(); // Nicholas console.log(person1.sayName person2.sayName); // true