Javascript 中创建自定义对象的方法(设计模式)
Javascript 中创建对象,可以有很多种方法。
Object构造函数/对象字面量:
抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性.
var student = new Object();
student.name = "xiao ming";
student.age = 20;
student.getName = function () {
alert(this.name);
}
熟悉javascript 对象字面量的同学,可以换一种更好的写法,至少看上去更简洁。
var student = {
name: "xiao hong",
age: 18,
getName: function () {
alert(this.name);
}
};
缺点:上面方法有个缺点就是,使用同一个接口创建很多类似的对象时,会产生大量重复的代码。这个应该很容易理解了,函数(方法或者类)一般是用来创建公共的方法,上面的对象创建过程,根本没有函数的影子,所以谈不上什么重用。
工厂模式:
工厂模式 抽象了具体创建对象的过程。就像一个黑盒,你只要调用函数(进入工厂),并且传入相应参数(各种原材料),就会出来一个相应的对象(工厂生产的产品)。工厂模式解决了创建多个相似对象的问题。
function studentFactory(name,age) {
var student = new Object();
student.name = name;
student.age = age;
student.sayName = function () {
alert(this.name);
}
return student;
}
var p1 = studentFactory("ming", 20);
var p2 = studentFactory("hong", 18);
缺点:工厂模式也有缺点,最大的缺点就是 对象类型识别的问题。只能判断出对象是Object 类型(p1 instanceof Object),而无法具体判断出来是哪种类型。使用工厂模式创建出来的student 其实都有着类似的属性和方法,只是值不同而已。这时 更好的解决方法是,创建一个Student 函数,这样所有的对象都属于 Student 类型。所以工厂模式不是不好,只是 构造函数模式更优。
自定义类型的构造函数:
构造函数可以用来创建特定类型的对象。
function Student(name,age) {
this.name = name;
this.age = age;
this.sayName = function () {
alert(this.name);
}
}
var p3 = new Student("ming", 20);
var p4 = new Student("hong", 18);
alert(p3 instanceof Student);
alert(p3.sayName==p4.sayName); //false
缺点:自定义构造函数 的不足之处就是,每个对象都会重新创建自己的方法,其实这些方法功能是一样的(像 sayName),但是它们却不相同(p3.sayName 和p4.sayName不相等)。
原型模式:
定义一个空函数,然后把所有属性和方法都添加到原型上,这样所有的 对象都会共用这些属性和方法。
function Student() {};
Student.prototype.name = "ming";
Student.prototype.age = 20;
Student.prototype.friends = ['qi'];
Student.prototype.sayName = function () {
alert(this.name);
};
缺点:有些属性不能共享,共享回来带来问题,例如:friends。每位同学的friends 大多都不会相同。
构造函数与原型的组合:
function Student(name, age, friends) {
this.name = name;
this.age = age;
this.friends = friends;
}
Student.prototype = {
constructor: Student,
sayName: function () {
alert(this.name);
}
};
总结:构造函数与原型的组合 是一种获得广泛认可的创建自定义类型的方法。 也是上面这些方法中的最优方法。
/*************************************************************************************************************/
其实上面的创建对象的方法已经很多了,但是还是有可能出现一些比较特殊的场景,需要继续的优化。
动态原型模式:
它是构造函数与原型组合 的一种优化。对于那些共用的属性和方法,如果初始化之后,就不必再重复初始化,提高效率。
function Student(name, age) {
this.name = name;
this.age = age;
if ((typeof this.sayName) != "function") {
Student.prototype.sayName = function () {
alert(this.name);
}
}
}
var stu = new Person("ming", 20);
//alert(stu instanceof Student);
stu.sayName();
var stuNew = new Person("hong", 18);
//alert(stuNew instanceof Student);
stuNew.sayName();
当创建多个student对象时,sayName 方法只会初始化一次。
最后还有一种很有用的创建对象的方式,就是稳妥构造函数。
稳妥构造函数模式:
在这个模式中会禁止使用this和new,所有对象没有公共的属性。只能读取变量的值,而不能修改。
////稳妥构造函数模式
function Student(name, age) {
var o = new Object();
o.sayName = function () {
alert(name);
}
return o;
}
var stu = Student("ming", 21);
stu.sayName();
Javascript 中创建自定义对象的方法(设计模式)的更多相关文章
- JavaScript中创建自定义对象的方法
本文内容参考JavaScript高级程序设计(第3版)第6章:面向对象的程序设计 ECMA-262中把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”我所理解的就是对象就是一个结构 ...
- JS中创建自定义对象的方法
1.直接给对象扩充属性和方法: 2.对象字面量: 3.工厂方式: 4.构造函数方式: 5.原型方式: 6.混合方式. <script> // 1.直接给对象扩充属性和方法; var cat ...
- JavaScript中创建字典对象(dictionary)实例
这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象 ...
- 简单使用JSON,JavaScript中创建 JSON 对象(一)
JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. ...
- JavaScript 中有关数组对象的方法
JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象 ...
- 在JavaScript中重写jQuery对象的方法
jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序 ...
- Floodlight 中创建消息对象的方法
在 floodlight 中创建各种openflow message 和 action 等採用的是简单工厂方式.BasicFactory类(实现OFMessageFactory接口.) ...
- java4中创建内对象的方法
在java程序中,对象可以被显式地或者隐式地创建.四种显式的创建对象的方式: ● 用new语句创建对象 ● 运用反射手段,调用java.lang.Class 或者 java.lang. ...
- JavaScript中的string对象及方法
string对象 string对象的两种创建 var a="hello"; var b=new String("hello"); //下面是方法 //charA ...
随机推荐
- MATLAB介绍
MATLAB MATLAB[1] 是美国MathWorks公司出品的商业数学软件,用于算法开发.数据可视化.数据分析以及数值计算的高级技术计算语言和交互式环境,主要包括MATLAB和Simulink ...
- Error occured processing XML 'Cannot find class [springmvc.extention.BeanArgumentResolver]'.
<Description Resource Path Location Type Error occured processing XML 'Cannot find class [springm ...
- Objective-C 内存管理之 _ARC
内存管理之 ARC 和 自己主动释放池 一.ARC 中的变量全部权修饰符 变量修饰符,主要用来标识对象的生命周期.在手动内存管理方式中没有这些概念. ARC 环境下变量全部权修饰符主要有以下几个: _ ...
- SharePoint 2013设置“以其他用户身份登录”
登录web服务器,打开位于“C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\CONTR ...
- 初学springMVC搭建框架过程及碰到的问题
刚刚开始学spring框架,因为接了一个网站的项目,想用spring+springMVC+hibernate整合来实现它,现在写下搭建框架的过程及碰到的问题.希望给自己看到也能让大家看到不要踏坑. 一 ...
- [转]spring mvc注解方式实现向导式跳转页面
由于项目需要用到向导式的跳转页面效果,本项目又是用spring mvc实现的,刚开始想到用spring 的webflow,不过webflow太过笨重,对于我们不是很复杂的跳转来说好像有种“杀鸡焉用牛刀 ...
- yum update
Linux升级命令有两个分别是yum upgrade和yum update, 这个两个命令是有区别的:代码如下:yum -y update升级所有包同时也升级软件和系统内核 代码如下:yum -y u ...
- python3.5之mysql扩展
最近在学习廖雪峰的python3的教程,这是官方http://www.liaoxuefeng.com/,建议大家想学习python的同学可以去看看,真的是在网上能找到的最好文本教程,没有之一 在廖老实 ...
- jmeter实例演示
Jmeter 是比较轻便的性能测试工具,下面根据一个实例演示下jmeter的常见用法 一.前期准备,在使用之前,先分析测试需求,比如:需不要登录?需不需要监视服务器性能?多线程还是多循环?需不需根据流 ...
- codeforces 27E . Number With The Given Amount Of Divisors 搜索+数论
题目链接 首先要知道一个性质, 一个数x的因子个数等于 a1^p1 * a2^p2*....an^pn, ai是x质因子, p是质因子的个数. 然后就可以搜了 #include <iostrea ...