qileilove

blog已经转移至github,大家请访问 http://qaseven.github.io/

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

  导读:经常看到一些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的名字了?

 bill的name是一个本地实例变量,只对bill可得。当sayName方法被创建为全局变量时,当它碰到this.name声明时,它会在全局查找name的值。唯一的问题在于name还没有被定义。现在让我们在全局定义name,看看会发生什么:

  1. var name = "Bearded Octo"
  2. sayName(); // "Hello Bearded Octo"

  这里我们在全局范围内定义了name变量,并且赋予了值"Bearded Octo"。当我们在调用sayHello方法时它会在全局范围内查找name变量,最终会获得值"Bearded Octo"。我们为什么不为这几个对象建立一个共同的“类”呢?

  构造函数

  构造函数是另一个编写面向对象JavaScript代码的方法,当你需要初始化对象的属性、方法,或者需要创建多个属性、方法各不相同的实例时,它将是你最佳的选择。同样我们先从创建一个空对象开始:

function Game() {};

  这个对象包括自己的属性,你甚至可以在创建对象时传入属性,然后再对其进行修改。

  1. var zelda = new Game(); 
  2. var smb = new Game(); 
  3. zelda.title = "Legend of Zelda"
  4. smb.title = "Super Mario Brothers"
  5. zelda.title; // "Legend of Zelda" 
  6. smb.title; // "Super Mario Brothers"

  现在这个对象已经有自己的方法了!新创建对象时我们甚至可以传递属性,之后再修改。

  1. function Game(title) {  
  2.     this.title = typeof title !== 'undefined' ? title : "";  
  3. };  
  4. var zelda = new Game("Legend of Zelda");  
  5. zelda.title; // "Legend of Zelda" 
  6. zelda.title = "Ocarina of Time"
  7. zelda.title; // "Ocarina of Time" 
  8. var blank = new Game(); 
  9. blank.title; // ""

  也许你没看明白第二行的内容,其实是使用了三元操作来避免单行的if else,它和下面标准的if else语句是一个意思。

  1. if (typeof title !== 'undefined') {  
  2.     this.title = title;  
  3. else {  
  4.     this.title = "";  
  5. }  
  6. // Is the same as  
  7. this.title = typeof title !== 'undefined' ? title : "";

  如果title变量在对象被创建时传入,title实例变量将会指定为title的值。如果没有值传入,那么title将会被初始化为默认值""。我们同样可以创建一个方法来访问这个属性:

  1. zelda.loveTitle = function() { 
  2.     console.log( "I love " + this.title );  
  3. }; 
  4. zelda.loveTitle(); // "I love Ocarina of Time"

  这样就很整洁了,但是我们还能做得更好。我们可以在Game类中添加一个方法,这样所有Game类的实例将都能使用此方法。

  1. Game.prototype.heartIt = function() {  
  2.     console.log( "I heart " + this.title );  
  3. };  
  4. zelda.heartIt(); // "I heart Ocarina of Time"  
  5. smb.heartIt(); // "I heart Super Mario Brothers"

  后记:当然这只是JavaScript面向对象编程的入门,OO JS还有很多内容可以讲。

posted on 2012-05-09 10:02 顺其自然EVO 阅读(678) 评论(2)  编辑  收藏 所属分类: HTML5

评论

# re: 如何在15分钟内掌握JavaScript面向对象编程 2014-04-06 19:19 sifi

在这里的http://www.miniqiang.com  回复  更多评论   

# re: 如何在15分钟内掌握JavaScript面向对象编程[未登录] 2014-04-26 14:47 zhang

用alert(bill.sound());问什么没有反应?IE浏览器~  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 
<2012年5月>
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

导航

统计

常用链接

留言簿(54)

随笔分类

随笔档案

文章分类

文章档案

搜索

最新评论

阅读排行榜

评论排行榜