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 相关文章推荐
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 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无限分类源码分享(思路不错)
2011/10/13 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python绘制动态曲线教程
2020/02/24 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
什么是Python中的匿名函数
2020/06/02 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
应聘医药销售自荐书范文
2014/02/08 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js