深入理解JavaScript系列(48):对象创建模式(下篇)

2024-09-01 15:32

本文主要是介绍深入理解JavaScript系列(48):对象创建模式(下篇),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

介绍

本篇主要是介绍创建对象方面的模式的下篇,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码。

模式6:函数语法糖

函数语法糖是为一个对象快速添加方法(函数)的扩展,这个主要是利用prototype的特性,代码比较简单,我们先来看一下实现代码:

if (typeof Function.prototype.method !== "function") {Function.prototype.method = function (name, implementation) {this.prototype[name] = implementation;return this;};
}

扩展对象的时候,可以这么用:

var Person = function (name) {this.name = name;
}
.method('getName',function () {return this.name;})
.method('setName', function (name) {this.name = name;return this;
});

这样就给Person函数添加了getName和setName这2个方法,接下来我们来验证一下结果:

var a = new Person('Adam');
console.log(a.getName()); // 'Adam'
console.log(a.setName('Eve').getName()); // 'Eve'

模式7:对象常量

对象常量是在一个对象提供set,get,ifDefined各种方法的体现,而且对于set的方法只会保留最先设置的对象,后期再设置都是无效的,已达到别人无法重载的目的。实现代码如下:

var constant = (function () {var constants = {},ownProp = Object.prototype.hasOwnProperty,// 只允许设置这三种类型的值allowed = {string: 1,number: 1,boolean: 1},prefix = (Math.random() + "_").slice(2);return {// 设置名称为name的属性set: function (name, value) {if (this.isDefined(name)) {return false;}if (!ownProp.call(allowed, typeof value)) {return false;}constants[prefix + name] = value;return true;},// 判断是否存在名称为name的属性isDefined: function (name) {return ownProp.call(constants, prefix + name);},// 获取名称为name的属性get: function (name) {if (this.isDefined(name)) {return constants[prefix + name];}return null;}};
} ());

验证代码如下:

// 检查是否存在
console.log(constant.isDefined("maxwidth")); // false// 定义
console.log(constant.set("maxwidth", 480)); // true// 重新检测
console.log(constant.isDefined("maxwidth")); // true// 尝试重新定义
console.log(constant.set("maxwidth", 320)); // false// 判断原先的定义是否还存在
console.log(constant.get("maxwidth")); // 480

模式8:沙盒模式

沙盒(Sandbox)模式即时为一个或多个模块提供单独的上下文环境,而不会影响其他模块的上下文环境,比如有个Sandbox里有3个方法event,dom,ajax,在调用其中2个组成一个环境的话,和调用三个组成的环境完全没有干扰。Sandbox实现代码如下:

function Sandbox() {// 将参数转为数组var args = Array.prototype.slice.call(arguments),// 最后一个参数为callbackcallback = args.pop(),// 除最后一个参数外,其它均为要选择的模块modules = (args[0] && typeof args[0] === "string") ? args : args[0],i;// 强制使用new操作符if (!(this instanceof Sandbox)) {return new Sandbox(modules, callback);}// 添加属性this.a = 1;this.b = 2;// 向this对象上需想添加模块// 如果没有模块或传入的参数为 "*" ,则以为着传入所有模块if (!modules || modules == '*') {modules = [];for (i in Sandbox.modules) {if (Sandbox.modules.hasOwnProperty(i)) {modules.push(i);}}}// 初始化需要的模块for (i = 0; i < modules.length; i += 1) {Sandbox.modules[modules[i]](this);}// 调用 callbackcallback(this);
}// 默认添加原型对象
Sandbox.prototype = {name: "My Application",version: "1.0",getName: function () {return this.name;}
};

然后我们再定义默认的初始模块:

Sandbox.modules = {};Sandbox.modules.dom = function (box) {box.getElement = function () {};box.getStyle = function () {};box.foo = "bar";
};Sandbox.modules.event = function (box) {// access to the Sandbox prototype if needed:// box.constructor.prototype.m = "mmm";box.attachEvent = function () {};box.detachEvent = function () {};
};Sandbox.modules.ajax = function (box) {box.makeRequest = function () {};box.getResponse = function () {};
};

调用方式如下:

// 调用方式
Sandbox(['ajax', 'event'], function (box) {console.log(typeof (box.foo));// 没有选择dom,所以box.foo不存在
});Sandbox('ajax', 'dom', function (box) {console.log(typeof (box.attachEvent));// 没有选择event,所以event里定义的attachEvent也不存在
});Sandbox('*', function (box) {console.log(box); // 上面定义的所有方法都可访问
});

通过三个不同的调用方式,我们可以看到,三种方式的上下文环境都是不同的,第一种里没有foo; 而第二种则没有attachEvent,因为只加载了ajax和dom,而没有加载event; 第三种则加载了全部。

模式9:静态成员

静态成员(Static Members)只是一个函数或对象提供的静态属性,可分为私有的和公有的,就像C#或Java里的public static和private static一样。

我们先来看一下公有成员,公有成员非常简单,我们平时声明的方法,函数都是公有的,比如:

// 构造函数
var Gadget = function () {
};// 公有静态方法
Gadget.isShiny = function () {return "you bet";
};// 原型上添加的正常方法
Gadget.prototype.setPrice = function (price) {this.price = price;
};// 调用静态方法
console.log(Gadget.isShiny()); // "you bet"// 创建实例,然后调用方法
var iphone = new Gadget();
iphone.setPrice(500);console.log(typeof Gadget.setPrice); // "undefined"
console.log(typeof iphone.isShiny); // "undefined"
Gadget.prototype.isShiny = Gadget.isShiny;
console.log(iphone.isShiny()); // "you bet"

而私有静态成员,我们可以利用其闭包特性去实现,以下是两种实现方式。

第一种实现方式:

var Gadget = (function () {// 静态变量/属性var counter = 0;// 闭包返回构造函数的新实现return function () {console.log(counter += 1);};
} ()); // 立即执行var g1 = new Gadget(); // logs 1
var g2 = new Gadget(); // logs 2
var g3 = new Gadget(); // logs 3

可以看出,虽然每次都是new的对象,但数字依然是递增的,达到了静态成员的目的。

第二种方式:

var Gadget = (function () {// 静态变量/属性var counter = 0,NewGadget;//新构造函数实现NewGadget = function () {counter += 1;};// 授权可以访问的方法NewGadget.prototype.getLastId = function () {return counter;};// 覆盖构造函数return NewGadget;
} ()); // 立即执行var iphone = new Gadget();
iphone.getLastId(); // 1
var ipod = new Gadget();
ipod.getLastId(); // 2
var ipad = new Gadget();
ipad.getLastId(); // 3

数字也是递增了,这是利用其内部授权方法的闭包特性实现的。

这篇关于深入理解JavaScript系列(48):对象创建模式(下篇)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1127333

相关文章

Java实现MD5加密的四种方式

《Java实现MD5加密的四种方式》MD5是一种广泛使用的哈希算法,其输出结果是一个128位的二进制数,通常以32位十六进制数的形式表示,MD5的底层实现涉及多个复杂的步骤和算法,本文给大家介绍了Ja... 目录MD5介绍Java 中实现 MD5 加密方式方法一:使用 MessageDigest方法二:使用

Java中的runnable 和 callable 区别解析

《Java中的runnable和callable区别解析》Runnable接口用于定义不需要返回结果的任务,而Callable接口可以返回结果并抛出异常,通常与Future结合使用,Runnab... 目录1. Runnable接口1.1 Runnable的定义1.2 Runnable的特点1.3 使用Ru

Java中Runnable和Callable的区别和联系及使用场景

《Java中Runnable和Callable的区别和联系及使用场景》Java多线程有两个重要的接口,Runnable和Callable,分别提供一个run方法和call方法,二者是有较大差异的,本文... 目录一、Runnable使用场景二、Callable的使用场景三、关于Future和FutureTa

Spring 中 BeanFactoryPostProcessor 的作用和示例源码分析

《Spring中BeanFactoryPostProcessor的作用和示例源码分析》Spring的BeanFactoryPostProcessor是容器初始化的扩展接口,允许在Bean实例化前... 目录一、概览1. 核心定位2. 核心功能详解3. 关键特性二、Spring 内置的 BeanFactory

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)

《Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)》:本文主要介绍Java导入、导出excel的相关资料,讲解了使用Java和ApachePOI库将数据导出为Excel文件,包括... 目录前言一、引入Apache POI依赖二、用法&步骤2.1 创建Excel的元素2.3 样式和字体2.

Java实现将Markdown转换为纯文本

《Java实现将Markdown转换为纯文本》这篇文章主要为大家详细介绍了两种在Java中实现Markdown转纯文本的主流方法,文中的示例代码讲解详细,大家可以根据需求选择适合的方案... 目录方法一:使用正则表达式(轻量级方案)方法二:使用 Flexmark-Java 库(专业方案)1. 添加依赖(Ma

Spring Boot拦截器Interceptor与过滤器Filter详细教程(示例详解)

《SpringBoot拦截器Interceptor与过滤器Filter详细教程(示例详解)》本文详细介绍了SpringBoot中的拦截器(Interceptor)和过滤器(Filter),包括它们的... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)详细教程1. 概述1

SpringBoot利用dynamic-datasource-spring-boot-starter解决多数据源问题

《SpringBoot利用dynamic-datasource-spring-boot-starter解决多数据源问题》dynamic-datasource-spring-boot-starter是一... 目录概要整体架构构想操作步骤创建数据源切换数据源后续问题小结概要自己闲暇时间想实现一个多租户平台,

C#原型模式之如何通过克隆对象来优化创建过程

《C#原型模式之如何通过克隆对象来优化创建过程》原型模式是一种创建型设计模式,通过克隆现有对象来创建新对象,避免重复的创建成本和复杂的初始化过程,它适用于对象创建过程复杂、需要大量相似对象或避免重复初... 目录什么是原型模式?原型模式的工作原理C#中如何实现原型模式?1. 定义原型接口2. 实现原型接口3