JS 创建对象(常见的几种方法)


Posted in Javascript onNovember 03, 2008

贴个代码先:
function O(user,pwd){ //use constructor
this.user=user;
this.pwd=pwd;
this.get=get;
return this;
}
function O2(user,pwd){ //use factory
var obj=new Object();
obj.user=user;
obj.pwd=pwd;
obj.get=get;
return obj;
}
function O3(){ //use prototype
}
O3.prototype.user='abc';
O3.prototype.pwd='dis';
// O3.propotype.get='get';
//O3.prototype.get(){
//alert(this.pwd);
//}
function O4(user,pwd){
this.user=user;
this.pwd=pwd;
return this;
}
O4.prototype.get=function(){alert('123');}

//function get(){
//alert("This User:"+this.user);
// }
function test2(){
//var a=new O2('Us','Pw'); use factory & constructor
//var a=new O3(); //use prototype
//a.get();
var a=new O4('*U4','P4'); //混合
//a.user='Not ABC'; //set new property
//alert(a.user);
a.get();
}
常用的MS 就这几种,可能还有其它的.碰到再说吧....
题外话:昨天手欠,试图用alert(window.appName)到ff之下去查看浏览器版本,结果弹出的竟然是Netscape,咋不是 firefox。继而又跑去chrome下试验,又一次弹出了Netscape。baidu搜 Netscape 竟然发现js就出自Netscape公司。惭愧啊惭愧!!!研究了这么久的js都不认识祖师爷。于是又跑去找了找族谱,原来js出自Brendan Eich之手,95年他创造js时候,也不过就31岁。哎呀,真是白活了,如他一般老的我,到现在都学不会js,真是人比人气死人。。js当初设计的时候,没有想到自己能从一部打电话用的手机变成集拍照,上网,游戏,电话于一身的智能机。真是造化弄人!!!也许各中的神奇,连Brendan Eich本人都没有想到。应该说Brendan Eich创造了js,而一大批的js牛人成就了今天如此复杂的js。
js不是木有类么?没关系,人家不是设计了原型属性么~
js不是木有块级作用域么?没关系,人家不是有作用域链么~
js怎样实现成员变量私有化?哦,用闭包解决吧~
哦,这么多基本概念,彻底的晕掉了,路漫漫其修远兮。
言归正传,本文讨论几种js创建对象的方法,先从最好理解的工厂模式开始:

function createPerson(name,age,job){ 
var o = {}; 
o.name = name; 
o.age = age; 
o.job = job; 
o.sayName = function(){ 
alert(this.name); 
}; 
return o; 
} 
var tanya = createPerson("tanya","30","female"); 
var ansel = createPerson("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName();

这里先定义o为一个空的对象,然后为o设置了一堆属性。其实也可以直接给o属性的嘛,所以如果这样写也是ok的。
function createPerson(name,age,job){ 
var o = { 
name : name, 
age : age, 
job : job, 
sayName : function(){ 
alert(this.name); 
} 
}; 
return o; 
} 
var tanya = createPerson("tanya","30","female"); 
var ansel = createPerson("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName();

还有一种办法是利用无敌的this,因为this就表示当前运行时的对象,将构造函数this的作用域指向新对象,将当前运行对象的属性和方法都赋给新对象,这样对象模式称为构造函数模式
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 
} 
var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName();

在这个例子中,tanya和ansel都有一个constructor属性,该属性指向person。
考虑一下如下的情况:
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 
} 
Person("tanya","30","female"); 
Person("ansel","30","male"); 
window.sayName(); 
window.sayName();

发现两次弹出的都是ansel,这是因为不用new的话,就不是一个person的实例,而仅仅在执行函数。而在全局作用域调用一个函数时this总是指向Global对象。而Global对象在浏览器中就是window对象。
我们还可以用构造模式在另外一个对象中调用sayName方法,还记得Apply和call么,来吧再考虑另外一种情况,
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 
} 
var olivia = {}; 
Person.call(olivia,"tanya","30","female"); 
olivia.sayName(); 
var philip = {} 
Person.apply(philip,["ansel","30","male"]); 
philip.sayName();

原型模式就要考虑原型链了,分析一下,sayName方法在实例中被重复定义了两次,但其实没有必要创造两个一样的副本。使用原型方法,可以使是tanya和ansel的共享一个sayName方法。
于是原型模式的写法如下:
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
} 
Person.prototype.sayName= function(){ 
alert(this.name); 
}; 
var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName();

实际应用时,不是一成不变的套用某种模式,活学活用。需要共享方法的时候就用原型模式,需要使用副本的时候就用构造模式,还可以结合起来,把所有信息都封装在构造函数中,而通过在构造函数中初始化原型,使得对象保持了同时使用构造函数和原型的优点。
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
if (typeof sayName != "function" ){ 
Person.prototype.sayName= function(){ 
alert(this.name); 
}; 
} 
} 
var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
ansel.sayName = function () { 
alert("Hi ansel, how hansome you are!"); 
} 
tanya.sayName(); 
ansel.sayName();
Javascript 相关文章推荐
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 Javascript
ajax无刷新动态调用股票信息(改良版)
Nov 01 #Javascript
使用EXT实现无刷新动态调用股票信息
Nov 01 #Javascript
让任务管理器中的CPU跳舞的js代码
Nov 01 #Javascript
js CSS操作方法集合
Oct 31 #Javascript
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 #Javascript
JS Array对象入门分析
Oct 30 #Javascript
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 #Javascript
You might like
php 动态多文件上传
2009/01/18 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
JsChart组件使用详解
2018/03/04 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
用python计算文件的MD5值
2020/12/23 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
2014年大班保育员工作总结
2014/12/02 职场文书
会议欢迎词
2015/01/23 职场文书
品德与社会教学反思
2016/02/24 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
python中pymysql包操作数据库方法
2022/04/19 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers