文档章节

js设计模式(工厂,构造函数)

igoryuyu
 igoryuyu
发布于 2018/08/22 23:36
字数 856
阅读 86
收藏 0

1、工厂模式

用函数来封装特定接口创建对象细节,抽象创建具体对象的过程

createProduct函数每次都会返回一个包含三个属性的对象,解决了创建多个相似对象的问题。

function createProduct(name, price, description) {
    let product = new Object()
    product.name = name;
    product.price = price;
    product.description = description;
    return product;

}

或

function createProduct(name, price, description) {
    return {
        name: name,
        price: price,
        description: description
    }

}

let oneYearCard = createProduct('秦桥云阅读年卡', 300, '秦桥云阅读卡,免费畅读一年畅读类书籍')
let oneMonthCard = createProduct('秦桥云阅读月卡', 30, '秦桥云阅读卡,免费畅读一个月畅读类书籍')


拓展


1、皆开辟新内存,而非引用
let oneYearCard = createProduct('秦桥云阅读年卡', 300, '秦桥云阅读卡,免费畅读一年畅读类书籍') //先开辟内存创建新对象,再将引用地址赋给oneYearCard
let oneMonthCard = createProduct('秦桥云阅读月卡', 30, '秦桥云阅读卡,免费畅读一个月畅读类书籍')// 同上
oneYearCard.name = 'oneYearCard'
oneMonthCard.name = 'oneMonthCard'
console.log(oneYearCard.name) // oneYearCard
console.log(oneMonthCard.name) // oneMonthCard

2、引用
let oneYearCard = createProduct('秦桥云阅读年卡', 300, '秦桥云阅读卡,免费畅读一年畅读类书籍') //先开辟内存创建新对象,再将引用地址赋给oneYearCard
let oneMonthCard = oneYearCard
console.log(oneYearCard.name) // 秦桥云阅读年卡
console.log(oneMonthCard.name) // 秦桥云阅读年卡
oneMonthCard.name = 'test'
console.log(oneYearCard.name) // test
console.log(oneMonthCard.name) // test


3、实际应用,新增商品:
let list = []
function addProduct(name, price, description) {
    //do something
    return list.push({
        name: name,
        price: price,
        description: description
    })
}
...

2、构造函数模式

ECMAScript中的构造函数可用来创建特定类型的对象。像Object,Array这样的原生构造函数,在运行时会自动出现在执行环境中。

此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。

在下面的例子中,Product首字母大写,借鉴自其他面向对象语言,用于区别于其他函数。

使用new操作符创建Product的新实例,会经历以下四个步骤:

1)、开辟一块新内存,创建一个新对象

2)、将构造函数的作用域赋给新对象(因此this就指向了这个新对象)

3)、执行构造函数中的代码为新对象添加属性)

4)、返回新对象

function Product(name, price, description) {
    //debugger 如图2.1.1, 图2.1.2
    console.log(this) // Product {}
    this.name = name;
    this.price = price;
    this.description= description;
}
let oneYearCard = new Product('秦桥云阅读年卡', 300, '秦桥云阅读卡,免费畅读一年畅读类书籍')//先开辟内存创建Product对象,再赋值
let oneMonthCard = new Product('秦桥云阅读月卡', 30, '秦桥云阅读卡,免费畅读一个月畅读类书籍')//同上

oneYearCard与oneMonthCard保存着Product的一个不同的实例。这两个对象都有一个constructor(构造函数)属性,该属性指向Product
console.log(oneYearCard.constructor == Product) // true
console.log(oneMonthCard.constructor == Product)// true

instanceof操作符检测类型
console.log(oneYearCard instanceof Object) // true  继承自Object
console.log(oneYearCard instanceof Product) // true
console.log(oneMonthCard instanceof Object) // true
console.log(oneMonthCard instanceof Product) // true

创建自定义的构造函数意味新创建了一种类型,可以将它的实例标识为一种特定的类型

图2.1.1 图2.1.2

© 著作权归作者所有

下一篇: js 堆栈
igoryuyu
粉丝 0
博文 15
码字总数 31758
作品 0
徐汇
高级程序员
私信 提问
JavaScript 设计模式解析【1】——创建型设计模式

工厂模式 工厂模式是用来创建对象的一种设计模式。 它不会暴露创建对象的具体逻辑,而是将逻辑封装在一个函数中,那么这个函数便成为了工厂,同时根据抽象程度的不同分为、 简单工厂模式 通过...

Reaper622
09/30
0
0
[译] 你需要知道的7个JavaScript设计模式

原文地址 设计模式在JavaScript中用于在JavaScript的Web项目中解决一些常见问题的可重复解决方案。 简介 JavaScript设计模式是非常适合作为一种模式去提供问题的解决方案,但这并不能代表可以...

金刚小仓
09/30
0
0
JavaScript设计模式系列三之单例模式(附案例源码)

文章初衷 设计模式其实旨在解决语言本身存在的缺陷 目前javaScript一些新的语法特性已经集成了一些设计模式的实现, 大家在写代码的时候,没必要为了用设计模式而去用设计模式, 那么我这边为什...

小钱钱阿圣
2017/09/22
0
0
JavaScript 设计模式之创建型设计模式

简单工厂模式 工厂模式是用来创建对象的一种最常用的设计模式。我们不需要暴露创建对象的具体逻辑,而是将逻辑都封装在一个函数中,那么这个函数将视为一个工厂。工厂模式可分为、 和 。 又称...

流年_L
08/22
0
0
《JavaScript设计模式与开发实践》原则篇(2)—— 最少知识原则

最少知识原则(LKP)说的是一个软件实体应当尽可能少地与其他实体发生相互作用。这 里的软件实体是一个广义的概念,不仅包括对象,还包括系统、类、模块、函数、变量等。 单一职责原则指导我们...

嗨呀豆豆呢
2018/12/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库表与表之间的一对一、一对多、多对多关系

表1 foreign key 表2 多对一:表 1 的多条记录对应表 2 的一条记录 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 表2的多条记...

Garphy
43分钟前
6
0
MySQL 表崩溃修复

MySQL日志报错 2019-10-19 13:41:51 19916 [ERROR] /usr/local/mysql/bin/mysqld: Table './initread_hss/user_info' is marked as crashed and should be repaired2019-10-19 13:41:51 1......

雁南飞丶
53分钟前
6
0
Error和Exception

1.Error类和Exception类都是继承Throwable类 2.Error(错误)是系统中的错误,程序员是不能改变的和处理的,是在程序编译时出现的错误,只能通过修改程序才能修正。一般是指与虚拟机相关的问...

大瑞清_liurq
今天
4
0
8086汇编基础 start 程序入口标签的示例

    IDE : Masm for Windows 集成实验环境 2015     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   ......

志成就
今天
4
0
uni app 零基础小白到项目实战2

<template> <scroll-view v-for="(card, index) in list" :key="index"> <view v-for =(item, itemIndex) in card"> {{item.value}}</view> </scroll-view></template> GraceUi va......

达达前端小酒馆
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部