如何在15分钟内掌握JavaScript面向对象编程

发表于:2012-5-08 10:11

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:王然    来源:51Testing软件测试网采编

  导读:经常看到一些JavaScript的代码脏乱得无法理解,到处都是属性和方法,或者一个循环套着一个循环。但如果使用面向对象就能很好的理清代码,并方便理解和修改代码。如果你不希望自己的代码只有上帝理解的话,就请尽量考虑使用面向对象的模式。

  译文正文:

  到处都是属性、方法,代码极其难懂,天哪,我的程序员,你究竟在做什么?仔细看看这篇指南,让我们一起写出优雅的面向对象的JavaScript代码吧!

  作为一个开发者,能否写出优雅的代码对于你的职业生涯至关重要。随着像Node.js这类技术的发展,你甚至可以在服务器端使用JavaScript了。同样的,你也可以使用JavaScript来控制MongoDB的持续数据存储。

  文本标记

  文本标记只是JavaScript里创建对象的一种方法,当然这里肯定不止这一种,但它是你在只打算创建一个对象实例时的首选方法。

var bill = {};

  上面的代码并不实用,它只是一个空对象。接下来我们动态地向这个对象中添加一些属性和方法。

  1. bill.name = "Bill E Goat";  
  2. bill.sound = function() {  
  3.     console.log( 'bahhh!' );  
  4. };

  这里添加了属性name,并且给它分配了值"Bill E Goat"。我们并不需要先创建一个空对象,而可以把所有代码直接写在一对括号里。

  1. var bill = { 
  2.   name: "Bill E Goat"
  3.   sound: function() { 
  4.     console.log( 'bahhh!' ); 
  5.   }
  6. };

  是不是很美观?访问它的属性和方法就像呼吸一样简单、自然。

  1. bill.name; // "Bill E Goat" 
  2. bill.sound(); // "bahhh"

  如果属性名不是一个合法的标志符,我们还可以这样访问它:

bill['name']; // "Bill E Goat"

  注意:我在调用方法时在其后添加了圆括号。现在,我们再重写一下当前的sound方法,并添加一个参数。

  1. bill.sound = function(noise) {  
  2.     console.log(noise);  
  3. };  
  4. bill.sound("brrr!"); // "brrr!" He's cold :)

  很好,我们已经传入参数了,并且在方法定义中访问了它。接下来,向对象中增加一个新方法来访问name属性。

  1. bill.sayName = function() { 
  2.     console.log( "Hello " + this.name ); 
  3. }; 
  4. bill.sayName(); // "Hello Bill E Goat"

  我们可以使用this.propertyName(在本例中即this.name)在方法内访问属性。

bill.sayName; // function

  怎么回事?访问sayName方法返回了一个方法定义。现在让我们再深入些。

  1. var sound = bill.sound; 
  2. sound('moo!'); // "moo!"

  现在我们指定了sound方法为一个局部函数,可以调用这个函数并且传递参数。你认为在复制bill的时候会发生什么?(类比下克隆羊Dolly)

  1. var sally = bill; 
  2. sally.name; // "Bill E Goat",可它的名字是Sally
  3. sally.name = "Sally"
  4. sally.name; // "Sally",好些了
  5. bill.name; // "Sally",问题又转移到bill身上了

  上面的例子中我们新建了一个变量sally,并使它和bill相同,所以bill和sally会在内存中引用了同一个对象。这时候给改变一块它们就会同时发生改变。再看看下面这段代码:

  1. bill.name = "Bill E Goat"
  2. bill.sayName(); // "Hello Bill E Goat"; 
  3. var sayName = bill.sayName; 
  4. sayName; // function 目前为止一切顺利
  5. sayName(); // "Hello ",为什么这里又不再显示bill的名字了?

21/212>
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号