JavaScript面向对象

上一篇 / 下一篇  2012-06-20 09:42:42 / 个人分类:Java

由于js语言本身语法的灵活性,使得在js程序中出现了各种各样的代码风格,但也因为如此,导致了代码的可读性和可维护性大大降低,特别随着项目的不断更新,js代码的不断更新,到后期时甚至连自己的代码都不知然了,因此确定一种好的代码风格是很有必要的。

1^ j/H'{4v*m-`0  近些年随着ajax的兴起,js变得越来越受重视,js开始在web开发中充当非常重要的角色,因此也开始遇到了各种各样的问题,于是很多大牛就提出了js的面向对象编程方法。

oteL+` K0

^i lE$L6w0  JavaScript是一种基于原型(prototype)的面向对象的语言,它没有类的概念,所有的一切都派生自现有对象的一个副本。51Testing软件测试网e#Gy,o(k-p ND;Q)`9_

?:B ZQWff%L0  一、下面看我画的总结图:51Testing软件测试网yhoO m

51Testing软件测试网 t1p!t6Obw|5y3l

  二、难点解析51Testing软件测试网W7YB*h fZ

  1、this的概念

)Q"n8}p&F"I J0

  this管家你在引用的是包含它的函数作为某个对象的方法被调用时的那个对象。下面看下面一个小例子:

|k AAz1s]*e"Nl0
51Testing软件测试网 _ J.q3Ox,m_

<script. type="text/javascript">
[k0Y NA+i7w0  var sound="admin";
7?9EH*r}:x1rWl0  function myFunction(){
Nho i8OVa*J4~#vl0    this.style.color='red';
tQ6X!P#Xe0\f0    alert(sound);51Testing软件测试网`Q h,o?Jl
  }51Testing软件测试网%Y1s.A"gW1a
</script>

)`1Mb SN L/s(|)k0

JHI^3Nu+},A*J8k's,Z0<body>51Testing软件测试网DzR'^D3U4[6Qy
  <a href="#" id="a">这是测试用的超链接</a>
Ny5P-YV]y0<script. type="text/javascript">51Testing软件测试网e7{ S#R(x4Q
   document.getElementById("a").onclick=myFunction;51Testing软件测试网;T1lWp/p4{i
</script>
WUCe8e/Iw [0</doby>
51Testing软件测试网;^:i)bz4D |*U

  根据this的定义我们知道,上例中的this代表的是超链接。

/g0_QX0i*X0

  2、构造函数的创建51Testing软件测试网 r8Yg s\9F7l

  Function是创建构造函数的起点。我们在之前学习C#的时候就已经学过,在创建函数实例的时候,我们也能创建构造函数。在js中也一样,例如编写代码:

*f;Lta;WV,C0

  var myObject=new myConstructor();51Testing软件测试网(o$f-dF2S

  此时,myConstructor函数也可以作为构造函数。当对象被实例之后,构造函数会执行包含的代码。51Testing软件测试网]Wc"|3_J }7a

3、闭包

~!J4}"B4H'y6rW1d-g0

l*^{7M!L2V"yQ0  闭包其实非常好理解,它的含义就类似于我们所学习的全局变量和局部变量。闭包是将函数内部和函数外部连接起来的一座桥梁。

Pm}D:I _ n0

+a2SB7WzQL0  下面看一个例子,详见注释:

J%iE0RW~051Testing软件测试网LP}Ea

51Testing软件测试网6L{O/s/d3j,Te3s2f

<script. type="text/javascript" language="javascript">
K pFZlh%R }0 function override(){51Testing软件测试网*?:@'eE(F
 
3V4y[y7um;|0  //自定义alert函数51Testing软件测试网!]sOYaq^V#k
  var alert=function(message){
eT%N];}:UY4X0   window.alert('override'+message);
`Ws|5Wj4HMfp0  };51Testing软件测试网(NeT?U%i
  alert('alert');//调用自定义的alert函数。
C\+Q |*fk` [0  window.alert('window.alert');//调用window内置函数alert
&L:s'w5l.V%lW0 }51Testing软件测试网l.kL+x.sK w
 override();//调用函数,执行函数内部的方法51Testing软件测试网5Sb`Ss'Fk
 alert('alert from outside');//调用window函数的alert(这里由于闭包的原因,看不到用于自定义的alert函数)51Testing软件测试网!P a|0~L(b`0`'U+NzD
</script>
51Testing软件测试网2] f/CWvM"x

  闭包的作用:一是可以读取函数内部的变量,另一个是让这些变量的值始终保持在内存中。怎样理解这句话呢?下面再来看一段代码:

wA mcO1I K#b1rg0

/Qj#^&F(Wk-Jy051Testing软件测试网g kXhO!WT

<script. type="text/javascript">
{(M]-h ? Jh0 function funOne(){
r tU @0k0u(TR0  var n=999;51Testing软件测试网+d:td^!^
  nAdd=function(){
#iN7Y0_-I(k0   n+=1;
^aIg0eU M0  }51Testing软件测试网b0d#M fe8LR
  function funTwo(){51Testing软件测试网$M$P/m&lp
   alert(n);51Testing软件测试网Vk2S6|%]7~ p
  }51Testing软件测试网WZ%u'k#`-r%v F
  return funTwo;
k0T q(O&[A D8}0 }
_j%]*xDnhN0 
j+o4j`6Jr#|)R0 var result=funOne();
+K Qu,NjE_s0 result();//99951Testing软件测试网FtTOJ9F j
 nAdd();
Y'R%s6W'oq Z0 result(); //100051Testing软件测试网,FZapx/U
</script>
51Testing软件测试网-P ` @$lo^

  在这段代码中,result实际上就是闭包funTwo函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了funOne中的局部变量n一直保存在内存中,并没有在funOne调用后被自动清除。

r5H7UY9~.Z051Testing软件测试网~6L9w W8g T

  为什么会这样呢?因为funOne是funTwo的父函数,而funTwo被赋给了一个全局变量,这导致funTwo始终在内存中,而 funTwo的存在依赖于funOne,因此funOne也始终在内存中,不会在调用结束后,被垃圾回收机制——garbage collection回收。

4s })|(F.K.^``W051Testing软件测试网1L&q o'ast,i:Y\"w)b

  “nAdd=function(){n+=1}”一行代码中,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局 部变量。其次,nAdd的值是一个匿名函数——anonmous function,而这个匿名函数本身也是一个闭包,所以nAdd相当于一个setter,可以在函数外部对函数内部的局部变量进行操作。

)H j(s$P%p$m0

?4} `5uw zUP0  三、总结

O7v K#Rc%E0

;b6Ea8ez8q7|P0  js面向对象部分的总结就到这里了。很多地方,本人理解的也不是很到位,希望您提出宝贵意见。本博客之前,推出过关于js面向对象的小例子,如果有兴趣的话,您可以自行查看。

XQw!B/u8N_@e7c0

TAG:

 

评分:0

我来说两句

Open Toolbar