【前端知识】JavaScript——设计模式(工厂模式、构造函数模式、原型模式)

【前端知识】JavaScript------设计模式(工厂模式、构造函数模式、原型模式)

一、工厂模式

工厂模式是一种众所周知的设计模式,广泛应用于软件工程领域,用于抽象创建特定对象的过程。

优点:可以解决创建多个类似对象的问题

缺点:没有解决对象标识问题(即新创建的对象是什么类型)

示例:

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。

优点:定义自定义构造函数可以确保实例被标识为特定类型

缺点:其定义的方法会在每个实例上都创建一遍

示例:

javascript 复制代码
// 区别1: 函数名大写,为了与普通函数区分
function Person(name, age, job){ 
    // 区别2: 与工厂模式不同,传入的参数赋值给this
    this.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 属性,这个属性是一个对象,包含应该由特定引用类型的实例共享的属性和方法。

优点:在它上面定义的属性和方法可以被对象实例共享

缺点:所有实例在默认情况先都将取得相同的属性值

示例:

javascript 复制代码
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
相关推荐
果粒chenl8 分钟前
React学习(四) --- Redux
javascript·学习·react.js
IT_陈寒18 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start35 分钟前
前端基础一、HTML5
前端·html·html5
Never_Satisfied43 分钟前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖44 分钟前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER1 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css
pixle01 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端