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

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

贴个代码先: 
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();

转载于:https://www.cnblogs.com/jakywong5701219/p/5538205.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/108998.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • MATLAB绘制B样条曲线[通俗易懂]

    MATLAB绘制B样条曲线[通俗易懂]1B样条曲线1.1B样条曲线定义B样条方法具有表示与设计自由型曲线曲面的强大功能,是形状数学描述的主流方法之一,另外B样条方法是目前工业产品几何定义国际标准——有理B样条方法(NURBS)的基础。B样条方法兼备了Bezier方法的一切优点,包括几何不变性,仿射不变性等等,同时克服了Bezier方法中由于整体表示带来不具有局部性质的缺点(移动一个控制顶点将会影响整个曲线)。B样条曲线方程可写为

    2022年6月18日
    122
  • rpm卸载安装包「建议收藏」

    rpm卸载安装包「建议收藏」rpm卸载安装包之rpm-qa|grep-invid|sort目标首先本人是想要卸载通过下面命令查询到的安装包rpm-qa|grep-invid|sort找到两个文件但是由于想卸载(base)[root@localhostname]#rpm-qa|grep-invid|sortnvidia-detect-510.47.03-1.el7.elrepo.x86_64nvidia-driver-local-repo-rhel7-510.47.03-1.0-1.x86_

    2022年9月22日
    2
  • frp内网穿透原理 解析_梅林frp内网穿透教程

    frp内网穿透原理 解析_梅林frp内网穿透教程frp内网穿透实例前置在这之前,你应该在嵌入式设备上和带有公网IP的服务器上都已经安装好了frp,如果没有的话就翻一下前面几节的内容。今天把frp的官方文档阅读完了,发现这个项目是我们国人主导的,还是比较自豪的;文档写的非常详细,我的建议是全部读一遍吧,花不了你多久时间的,因此也不介绍frp了,直接给出几个我自己的配置实例就可以了。官方文档:FRP这里给出的几个配置实例的原因主要是因为我的应用场景比较特殊,是用在IOT上,也就是寻找一种有效的方式访问到内网里的嵌入式设备,

    2025年9月5日
    6
  • Cocos2d-x Box2D物理引擎编译设置

    Cocos2d-x Box2D物理引擎编译设置

    2022年1月15日
    45
  • SpringBoot集成Eurake、Gateway和Redis+Token验证拦截器实现

    SpringBoot集成Eurake、Gateway和Redis+Token验证拦截器实现SpringBoot聚合项目配置Eurake和Gateway一、版本信息:SpringBoot <version>2.2.6.RELEASE</version>SpringCloud <spring-cloud.version>Hoxton.SR1</spring-cloud.version>二、开始配置一个聚合项目1.先建一个父级工程:最终pom.xml配置如下:<?xmlversion=”1.0″encodin

    2022年5月29日
    34
  • Vue基础知识总结 11:前端路由vue-router

    Vue基础知识总结 11:前端路由vue-router一、前端路由vue-router1、维基百科路由就是通过互联的网络把信息从源地址传输到目的地址的活动。2、路由的机制路由包括路由和转发。路由器->公网IP->映射表->内网IP映射表:[内网ip1:电脑标识1,内网ip2:电脑标识2]3、后端渲染JSP:javaserverpage后端渲染==html+css+javajava代码的作用是从数据库中读取数据,然后将他们动态的放在页面中。后端渲染的意思就是,前端请求后端,

    2022年7月11日
    27

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号