JS创建对象(常见的几种方法)
2023-06-13 09:14:06 时间
贴个代码先:
functionO(user,pwd){//useconstructor
this.user=user;
this.pwd=pwd;
this.get=get;
returnthis;
}
functionO2(user,pwd){//usefactory
varobj=newObject();
obj.user=user;
obj.pwd=pwd;
obj.get=get;
returnobj;
}
functionO3(){//useprototype
}
O3.prototype.user="abc";
O3.prototype.pwd="dis";
//O3.propotype.get="get";
//O3.prototype.get(){
//alert(this.pwd);
//}
functionO4(user,pwd){
this.user=user;
this.pwd=pwd;
returnthis;
}
O4.prototype.get=function(){alert("123");}
//functionget(){
//alert("ThisUser:"+this.user);
//}
functiontest2(){
//vara=newO2("Us","Pw");usefactory&constructor
//vara=newO3();//useprototype
//a.get();
vara=newO4("*U4","P4");//混合
//a.user="NotABC";//setnewproperty
//alert(a.user);
a.get();
}
常用的MS就这几种,可能还有其它的.碰到再说吧....
题外话:昨天手欠,试图用alert(window.appName)到ff之下去查看浏览器版本,结果弹出的竟然是Netscape,咋不是firefox。继而又跑去chrome下试验,又一次弹出了Netscape。baidu搜Netscape竟然发现js就出自Netscape公司。惭愧啊惭愧!!!研究了这么久的js都不认识祖师爷。于是又跑去找了找族谱,原来js出自BrendanEich之手,95年他创造js时候,也不过就31岁。哎呀,真是白活了,如他一般老的我,到现在都学不会js,真是人比人气死人。。js当初设计的时候,没有想到自己能从一部打电话用的手机变成集拍照,上网,游戏,电话于一身的智能机。真是造化弄人!!!也许各中的神奇,连BrendanEich本人都没有想到。应该说BrendanEich创造了js,而一大批的js牛人成就了今天如此复杂的js。
js不是木有类么?没关系,人家不是设计了原型属性么~
js不是木有块级作用域么?没关系,人家不是有作用域链么~
js怎样实现成员变量私有化?哦,用闭包解决吧~
哦,这么多基本概念,彻底的晕掉了,路漫漫其修远兮。
言归正传,本文讨论几种js创建对象的方法,先从最好理解的工厂模式开始:
复制代码代码如下:
functionO(user,pwd){//useconstructor
this.user=user;
this.pwd=pwd;
this.get=get;
returnthis;
}
functionO2(user,pwd){//usefactory
varobj=newObject();
obj.user=user;
obj.pwd=pwd;
obj.get=get;
returnobj;
}
functionO3(){//useprototype
}
O3.prototype.user="abc";
O3.prototype.pwd="dis";
//O3.propotype.get="get";
//O3.prototype.get(){
//alert(this.pwd);
//}
functionO4(user,pwd){
this.user=user;
this.pwd=pwd;
returnthis;
}
O4.prototype.get=function(){alert("123");}
//functionget(){
//alert("ThisUser:"+this.user);
//}
functiontest2(){
//vara=newO2("Us","Pw");usefactory&constructor
//vara=newO3();//useprototype
//a.get();
vara=newO4("*U4","P4");//混合
//a.user="NotABC";//setnewproperty
//alert(a.user);
a.get();
}
常用的MS就这几种,可能还有其它的.碰到再说吧....
题外话:昨天手欠,试图用alert(window.appName)到ff之下去查看浏览器版本,结果弹出的竟然是Netscape,咋不是firefox。继而又跑去chrome下试验,又一次弹出了Netscape。baidu搜Netscape竟然发现js就出自Netscape公司。惭愧啊惭愧!!!研究了这么久的js都不认识祖师爷。于是又跑去找了找族谱,原来js出自BrendanEich之手,95年他创造js时候,也不过就31岁。哎呀,真是白活了,如他一般老的我,到现在都学不会js,真是人比人气死人。。js当初设计的时候,没有想到自己能从一部打电话用的手机变成集拍照,上网,游戏,电话于一身的智能机。真是造化弄人!!!也许各中的神奇,连BrendanEich本人都没有想到。应该说BrendanEich创造了js,而一大批的js牛人成就了今天如此复杂的js。
js不是木有类么?没关系,人家不是设计了原型属性么~
js不是木有块级作用域么?没关系,人家不是有作用域链么~
js怎样实现成员变量私有化?哦,用闭包解决吧~
哦,这么多基本概念,彻底的晕掉了,路漫漫其修远兮。
言归正传,本文讨论几种js创建对象的方法,先从最好理解的工厂模式开始:
functioncreatePerson(name,age,job){
varo={};
o.name=name;
o.age=age;
o.job=job;
o.sayName=function(){
alert(this.name);
};
returno;
}
vartanya=createPerson("tanya","30","female");
varansel=createPerson("ansel","30","male");
tanya.sayName();
ansel.sayName();
这里先定义o为一个空的对象,然后为o设置了一堆属性。其实也可以直接给o属性的嘛,所以如果这样写也是ok的。
functioncreatePerson(name,age,job){
varo={
name:name,
age:age,
job:job,
sayName:function(){
alert(this.name);
}
};
returno;
}
vartanya=createPerson("tanya","30","female");
varansel=createPerson("ansel","30","male");
tanya.sayName();
ansel.sayName();
还有一种办法是利用无敌的this,因为this就表示当前运行时的对象,将构造函数this的作用域指向新对象,将当前运行对象的属性和方法都赋给新对象,这样对象模式称为构造函数模式
functionPerson(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
alert(this.name);
};
}
vartanya=newPerson("tanya","30","female");
varansel=newPerson("ansel","30","male");
tanya.sayName();
ansel.sayName();
在这个例子中,tanya和ansel都有一个constructor属性,该属性指向person。
考虑一下如下的情况:
functionPerson(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么,来吧再考虑另外一种情况,
functionPerson(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
alert(this.name);
};
}
varolivia={};
Person.call(olivia,"tanya","30","female");
olivia.sayName();
varphilip={}
Person.apply(philip,["ansel","30","male"]);
philip.sayName();
原型模式就要考虑原型链了,分析一下,sayName方法在实例中被重复定义了两次,但其实没有必要创造两个一样的副本。使用原型方法,可以使是tanya和ansel的共享一个sayName方法。
于是原型模式的写法如下:
functionPerson(name,age,job){
this.name=name;
this.age=age;
this.job=job;
}
Person.prototype.sayName=function(){
alert(this.name);
};
vartanya=newPerson("tanya","30","female");
varansel=newPerson("ansel","30","male");
tanya.sayName();
ansel.sayName();
实际应用时,不是一成不变的套用某种模式,活学活用。需要共享方法的时候就用原型模式,需要使用副本的时候就用构造模式,还可以结合起来,把所有信息都封装在构造函数中,而通过在构造函数中初始化原型,使得对象保持了同时使用构造函数和原型的优点。
functionPerson(name,age,job){
this.name=name;
this.age=age;
this.job=job;
if(typeofsayName!="function"){
Person.prototype.sayName=function(){
alert(this.name);
};
}
}
vartanya=newPerson("tanya","30","female");
varansel=newPerson("ansel","30","male");
ansel.sayName=function(){
alert("Hiansel,howhansomeyouare!");
}
tanya.sayName();
ansel.sayName();
相关文章
- js数组反转的几种方法「建议收藏」
- JavaScript笔记(19)之JS执行机制
- 用JS获取地址栏url参数的方法_js的url是啥
- 利用Jquery Lazyload JS插件实现网页图片延迟加载
- jquery中的$()是什么_js简单特效
- js 数组去除重复数据-当WPS开始像支持VBA一样支持JS语言时,微软又该何去何从?
- JS逆向:常见无限Debugger以及绕过方法
- js Date 函数方法详解编程语言
- JS propertyIsEnumerable()方法:检测一个属性是否可枚举
- Linux上的JS压缩工具(js压缩工具linux)
- 纯JS图片批量预加载技术代码
- 手把手教你自己写一个js表单验证框架的方法
- 用js实现小球的自由移动代码
- ASP.NET中后台注册js脚本使用的方法对比
- js判断背景图片是否加载成功使用img的width实现
- js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
- js传参数受特殊字符影响错误的解决方法
- js将json格式内容转换成对象的方法
- js获取对象为null的解决方法
- JS网页图片按比例自适应缩放实现方法
- JS如何将数字类型转化为没3个一个逗号的金钱格式
- JSP加载JS文件不起作用的有效解决方法
- js取整数、取余数的方法
- 纯js实现遮罩层效果原理分析
- 让html页面不缓存js的实现方法
- node.js中的http.response.removeHeader方法使用说明
- VisualStudio中js调试的方法图解
- node.js中的fs.fchown方法使用说明
- js中的getAttribute方法使用示例