JavaScript实现创建自定义对象的常用方式总结


Posted in Javascript onJuly 09, 2018

本文实例讲述了JavaScript实现创建自定义对象的常用方式。分享给大家供大家参考,具体如下:

1. 对象字面量方式

对象字面量方式是创建自定义对象的首选模式,简单方便。

var per = {
 name:'zhangsan',
 age:25,
 job:'html',
 sayName:function(){
  alert(this.name);
 }
}

缺点:使用同一个接口创建很多对象,会产生大量的重复代码。比如我想再创建一个per1对象,我就得把上面的代码再重新写一遍,改变不同的属性值。

2、工厂模式

工厂模式抽象了创建具体对象的过程。由于在ECMAScript中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节,如下面的例子:

function createPerson(name,age,job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function(){
  alert(this.name);
 }
 return o;
}
var person1 = createPerson('zhang',30,'java');
var person2 = createPerson('zhao',25,'php');

函数createPerson()能够根据接受到的参数来构建一个包含所有必要信息的Person对象。可以无数次的调用这个函数,而每次它都会返回一个包含三个属性和一个方法的对象。

缺点:工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。

3、构造函数模式

可以使用构造函数模式将前面的例子重写如下:

function Person(name,age,job){
 this.name= name;
 this.age = age;
 this.job = job;
 this.sayName = function(){
  alert(this.name);
 }
}
var person1 = new Person('zhang',30,'java');
var person2 = new Person('zhao',25,'php');

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型。而这正是构造函数模式胜过工厂模式的地方。

然而,使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍。在上面的例子中,person1和person2都有一个名为sayName()的方法,但那两个方法不是同一个Function的实例,创建两个完成同样任务的Function实例的确没有必要;况且有this对象在,根本不用在执行代码前就把函数绑定到特定对象上面。因此可以像下面这样,通过把函数定义转移到构造函数外部来解决这个问题。

function Person(name,age,job){
 this.name= name;
 this.age = age;
 this.job = job;
 this.sayName = sayName();
}
function sayName(){
  alert(this.name);
}
var person1 = createPerson('zhang',30,'java');
var person2 = createPerson('zhao',25,'php');

在这个例子中,我们把sayName()函数的定义转移到构造函数外部。而在构造函数内部,我们将sayName属性设置成等于全局的sayName函数,这样person1和person2对象就共享了在全局作用域中定义的同一个sayName()函数。这样确实解决了两个函数在做同一件事的问题,可是新问题又来了:在全局作用域中定义的函数实际上只能被某个对象调用,这让全局作用域有点名不副实。更让人无法接受的是:如果对象需要定义很多方法,那么就要定义很多全局函数。好在,这些问题可以通过使用原型模式来解决。

4、原型模式

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处是可以让所有的对象实例共享他所包含的属性和方法。

function Person(){}
Person.prototype.name = 'zhang';
Person.prototype.age = '22';
Person.prototype.job = 'html5';
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
var person2 = new Person();

原型模式也不是没有缺点。首先,它省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但还不是原型的最大问题。原型模式的最大问题是由共享的本性所导致的。

原型中所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性倒也说的过去,通过在实例上添加一个同名属性,可以隐藏原型中的对应属性。然后,对于包含引用类型的属性来说,问题就比较突出了。

function Person(){}
Person.prototype = {
 constructor:Person,
 name:'zhang',
 age :'22',
 job :'html5',
 friends:['wang','li'],
 sayName : function(){
  alert(this.name);
 }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push('zhao');
alert(person1.friends); //'wang,li,zhao'
alert(person2.friends); //'wang,li,zhao'
alert(person1.friends === person2.friends); //true

从上面的打印的结果我们就可以知道为什么很少人单独使用原型模式了,实例一般都是要有属于自己的全部属性的。

5、组合使用构造函数模式和原型模式

组合使用构造函数模式和原型模式,是创建自定义类型的最常见方式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度的节省了内存。

function Person(name,age,job){
 this.name= name;
 this.age = age;
 this.job = job;
 this.friends = ['wang','li'];
}
Person.prototype = {
 constructor:Person,
 sayName : function(){
  alert(this.name);
 }
}
var person1 = new Person('zhang',26,'java',);
var person2 = new Person('sun',25,'php');
person1.friends.push('zhao');
alert(person1.friends); //'wang,li,zhao'
alert(person2.friends); //'wang,li'
alert(person1.friends === person2.friends); //false

在上面的例子中,实例属性都是在构造函数中定义的,而由所有实例共享的属性constructor和方法satName()则是在原型中定义的。而修改了person1.friends(向其中添加一个新字符串),并不会影响到person2.friends,因为他们分别引用了不同的数组。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
jQuery 入门级学习笔记及源码
Jan 22 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
vue-cli配置环境变量的方法
Jul 09 #Javascript
JS逻辑运算符短路操作实例分析
Jul 09 #Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 #Javascript
使用async await 封装 axios的方法
Jul 09 #Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 #Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 #jQuery
JS实现图片旋转动画效果封装与使用示例
Jul 09 #Javascript
You might like
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
Vue实现本地购物车功能
2018/12/05 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
使用python Django做网页
2013/11/04 Python
python字典基本操作实例分析
2015/07/11 Python
python批量创建指定名称的文件夹
2019/03/21 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
python 6种方法实现单例模式
2020/12/15 Python
车工岗位职责
2013/11/26 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
区三好学生主要事迹
2014/01/30 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
报到证办理个人委托书
2014/10/06 职场文书
欢迎词范文
2015/01/27 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
详解Vue的列表渲染
2021/11/20 Vue.js
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL