JS创建对象常用设计模式工厂构造函数及原型

 更新时间:2022年07月08日 08:49:57   作者:掘金安东尼  
本篇带来你一定熟知的、用于创建对象的三种设计模式:工厂模式、构造函数模式、原型模式,有需要的朋友可以借鉴参考下,希望能够有所帮助

引言

很多工友们都说:设计模式根本用不到,然而它其实时刻就在我们身边,像王国维所说:众里寻他千百度,蓦然回首,那人正在灯火阑珊处。

工厂模式

什么是工厂模式?其实就字面意思,在现实社会生活中,市场通过不同工厂加工成不同的产品。

转化成 JS 代码就是这样的:

// 汽车工厂
function carFactory(brand, price, district) {
	 let o = new Object();
	 o.brand= brand;
	 o.price= price;
	 o.district= district;
	 o.performance= function() {
		 console.log(this.brand);
	 };
	 return o;
}
// 生产汽车
let car1 = carFactory("Benz", 50, "china");
let car2= carFactory("Honda", 30, "usa");
// 糖果工厂
function candyFactory(name, size, color) {
	 let o = new Object();
	 o.name= name;
	 o.size= size;
	 o.color= color;
	 o.performance= function() {
		 console.log(this.name);
	 };
	 return o;
}
// 生产糖果
let candy1= candyFactory("Oreo", "small", "white");
let candy2= candyFactory("quduoduo", "middle", "black");

有汽车工厂,糖果工厂等等,我们通过工厂函数,创建了特定对象。

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

构造函数模式

构造函数是用于创建特定类型对象的,可以自定义构造函数,以函数的形式为自己的对象类型定义属性和方法。

比如前面的例子,就可以该写为:

// 构造汽车的构造函数
function Car(brand, price, district) {
	 this.brand= brand;
	 this.price= price;
	 this.district= district;
	 this.performance= function() {
		 console.log(this.brand);
	 };
}
// 构造汽车
let car1 = new Car("Benz", 50, "china");
let car2= new Car("Honda", 30, "usa");

与工厂模式的区别是,构造函数模式:

  • 没有显式地创建对象;
  • 属性和方法直接赋值给了 this;
  • 没有 return;

构造函数首字母通常是大写;

这里涉及到一个重要的考点:即使用 new 会发生什么?

官方解答:

(1) 在内存中创建一个新对象。 (2) 这个新对象内部的[[Prototype]](隐式原型)特性被赋值为构造函数的 prototype (显示原型)属性。 (3) 构造函数内部的 this 被赋值为这个新对象(即 this 指向新对象)。 (4) 执行构造函数内部的代码(给新对象添加属性)。 (5) 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象。

这个,就是“原型链”的构造过程!!

car1.__proto__===Car.prototype // true
car1 instanceof Car // true
  • 构造函数的问题

构造函数的主要问题在于,其定义的方法会在每个实例上都创建一遍。

什么意思?用代码来解释:

// 构造汽车的构造函数
function Car(brand, price, district) {
	 this.brand= brand;
	 this.price= price;
	 this.district= district;
	 this.performance= function() {
	 };
}
// 构造汽车
let car1 = new Car("Benz", 50, "china");
let car2= new Car("Honda", 30, "usa");
car1.performance == car2.performance // false

即使是同样的方法,也不相等,因为每次执行 new 的时候,实例的方法都是重新创建的;

原型模式

原型模式可以解决构造函数模式“重复创建方法”的问题。

// 原型创建
function Car(brand, price, district) {
	 Car.prototype.brand= brand;
	 Car.prototype.price= price;
	 Car.prototype.district= district;
	 Car.prototype.performance= function() {
	 };
}
let car1 = new Car("Benz", 50, "china");
let car2= new Car("Honda", 30, "usa");
car1.performance === car2.performance // true

这里不妨再重温一下原型链的指向关系:

car1.__proto__===Car.prototype // true
Car.__proto__===Function.prototype // true
Function.prototype.__proto__===Object.prototype //true
Car.prototype.__proto__===Object.prototype //true
Object.prototype.__proto__===null // true

原型模式弱化了向构造函数传递初始化参数的能力,会导致所有实例默认都取得相同的属性值。

function Person() {}
Person.prototype = {
 constructor: Person,
 friends: "A",
 sayName() {
 }
}; 
let person1 = new Person();
let person2 = new Person();
person1.friends="B";
person1.friends // 'B'
person2.friends // 'A'
function PersonArr() {}
PersonArr.prototype = {
 constructor: PersonArr,
 friends:["A"],
 sayName() {
 }
}; 
let person1 = new PersonArr();
let person2 = new PersonArr();
person1.friends.push("B");
person1.friends // ["A","B"]
person2.friends // ["A","B"]

原型上的所有属性是在实例间共享的,这对函数来说比较合适。对原始值的属性 也还好,但对于引用值的属性,则会产生混乱!!

结语

工厂模式、构造函数模式、原型模式,这三者没有谁好谁坏,使用时,更多的是讲究一个 —— 适合!只有清楚它们的原理,才能游刃有余。

更多关于JS创建对象设计模式的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript 对象创建的3种方法

    JavaScript 对象创建的3种方法

    这篇文章主要给大家分享的时JavaScript 对象创建的3种方法,在 JavaScript中,对象是一组有属性名和属性值组成的无序集合,对象的创建可以通过对象字面量、new 关键字 和Object.create()函数来创建。
    2021-11-11
  • 微信小程序 教程之wxapp视图容器 swiper

    微信小程序 教程之wxapp视图容器 swiper

    这篇文章主要介绍了微信小程序 教程之wxapp视图容器 swiper的相关资料,需要的朋友可以参考下
    2016-10-10
  • JavaScript高级程序设计之变量与作用域

    JavaScript高级程序设计之变量与作用域

    这篇文章主要介绍了JavaScript高级程序设计之变量与作用域,文章主要通过描述原始值与引用值、instanceof、作用域展开具体内容,需要的朋友可以参考一下
    2021-11-11
  • 微信小程序 Windows2008 R2服务器配置TLS1.2方法

    微信小程序 Windows2008 R2服务器配置TLS1.2方法

    微信小程序免费SSL证书https、TLS版本问题的解决方案《二十四》request:fail错误(含https解决方案)(真机预览问题把下面的代码复制到PowerShell里运行一下,然后重启服务器。# Enables TLS 1.2 on ...,需要的朋友可以参考下
    2016-12-12
  • JS前端以轻量fabric.js实现示例理解canvas

    JS前端以轻量fabric.js实现示例理解canvas

    这篇文章主要为大家介绍了JS前端以轻量fabric.js实现示例理解canvas可视化,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • WebAssembly使用方法研究

    WebAssembly使用方法研究

    这篇文章主要为大家介绍了WebAssembly使用方法研究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • uniapp五分钟实现刷抖音小程序教程示例

    uniapp五分钟实现刷抖音小程序教程示例

    这篇文章主要为大家介绍了uniapp五分钟实现刷抖音小程序教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 制作特殊字的脚本

    制作特殊字的脚本

    制作特殊字的脚本...
    2006-06-06
  • 微信小程序 开发指南详解

    微信小程序 开发指南详解

    这篇文章主要介绍了微信小程序 开发指南详解的相关资料,需要的朋友可以参考下
    2016-09-09
  • JavaScript+HTML实现学生信息管理系统

    JavaScript+HTML实现学生信息管理系统

    这篇文章主要介绍了JavaScript实现学生信息管理系统,文中有非常详细的代码示例,对正在学习js的小伙伴们有一定的帮助,需要的朋友可以参考下
    2021-04-04

最新评论