深入理解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),
// 最后一个参数为callback
callback = 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);
}
// 调用 callback
callback(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
数字也是递增了，这是利用其内部授权方法的闭包特性实现的。
总结
这是对象创建模式的下篇，两篇一起总共9种模式，是我们在日常JavaScript编程中经常使用的对象创建模式，不同的场景起到了不同的作用，希望大家根据各自的需求选择适用的模式。
相关文章
表单元素的submit()方法和onsubmit事件应用概述
表单元素拥有submit方法，同时也具有onsubmit事件句柄，用于监听表单提交。可以使用elemForm.submit();方法触发表单提交,感兴趣的朋友可以了解下，或许对你有所帮助2013-02-02
获取一个数组中的最大（最小）值的最简单的方法，就是对数组进行一次遍历，通过比较，找到其最大（最小）值。但是其实在javascript的原生方法中，已经提供了一些快捷方法，可以实现此功能,需要的朋友可以了解下2012-12-12
这篇文章主要介绍了微信开发 微信授权详解的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了简介JavaScript中的setHours()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了详细分析JS函数去抖和节流相关知识以及代码分析，需要的朋友学习参考下吧。2017-12-12
这是我看了DOM编程艺术，悟透JavaScript，javascript权威指南5做的笔记，我资质不深，不能写出高深的文章， 如果你觉得笔记写得不好，可以不看我以后的。这篇文章就当作浪费你几分钟。2008-07-07
javascript中的onkeyup和onkeydown区别介绍
文本框里输入的时候要开始计算文本框里面输入了多少字，自然想到了onkeydown事件，然后计算value.length的方法，下面看下具体的代码2013-04-04
本文实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性2013-11-11
在javaScript中关于submit和button的区别介绍
submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了，submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上2013-10-10
这篇文章主要介绍了Shell脚本实现Linux系统和进程资源监控,本文讲解了检查进程是否存在、检测进程 CPU 利用率、检测进程内存使用量、检测进程句柄使用量、,需要的朋友可以参考下2015-03-03
最新评论