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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 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
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
php 多个变量指向同一个引用($b = &$a)用法分析
2019/11/13 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
python pycharm的安装及其使用
2019/10/11 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
Python实现自动装机功能案例分析
2020/10/22 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
制定岗位职责的原则
2013/11/08 职场文书
创业女性典型材料
2014/05/02 职场文书
员工生日会策划方案
2014/06/14 职场文书
新手初学Java网络编程
2021/07/07 Java/Android