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

上一篇 / 下一篇 2012-05-09 09:20:59 / 个人分类：Java

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

　　译文正文：

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

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

v5t.zB S4[0　　文本标记

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

3tY%Qwm@R3|0 51Testing软件测试网$i {Y#TN]&d

var bill = {};

G{N%t9Q#~.uRS5]0　　上面的代码并不实用，它只是一个空对象。接下来我们动态地向这个对象中添加一些属性和方法。51Testing软件测试网]p,B'o8uo5O

51Testing软件测试网$LW'd/C`P9v

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

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

var bill = {
name: "Bill E Goat",
sound: function() {
console.log( 'bahhh!' );
}
};

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

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

　　如果属性名不是一个合法的标志符，我们还可以这样访问它：51Testing软件测试网lqP2@yb{

9e0B)vaD*{O!}W0

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

　　注意：我在调用方法时在其后添加了圆括号。现在，我们再重写一下当前的sound方法，并添加一个参数。51Testing软件测试网7|B'd$?I+Lu$c

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

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

~#NAKe~:w.U0

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

Zl2{,}4o W3y0　　我们可以使用this.propertyName（在本例中即this.name）在方法内访问属性。51Testing软件测试网R [:}8@!S-W

E?'Xx'M"v6RQ0

bill.sayName; // function

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

*\^Ij3Q?"p(Y0

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

9u+j,hI1W6L8} W$m0　　现在我们指定了sound方法为一个局部函数，可以调用这个函数并且传递参数。你认为在复制bill的时候会发生什么？（类比下克隆羊Dolly）

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

6z\"ldqx;u9U'}i0　　上面的例子中我们新建了一个变量sally，并使它和bill相同，所以bill和sally会在内存中引用了同一个对象。这时候给改变一块它们就会同时发生改变。再看看下面这段代码：

!fi6|9yCzq0 51Testing软件测试网/TE!]8f2t!e{

bill.name = "Bill E Goat";
bill.sayName(); // "Hello Bill E Goat";
var sayName = bill.sayName;
sayName; // function 目前为止一切顺利
sayName(); // "Hello "，为什么这里又不再显示bill的名字了？
51Testing软件测试网@qN_f_

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

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

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

O fm.v'PM y0　　构造函数

T:z ~#[9L(Q)i*SK0　　构造函数是另一个编写面向对象JavaScript代码的方法，当你需要初始化对象的属性、方法，或者需要创建多个属性、方法各不相同的实例时，它将是你最佳的选择。同样我们先从创建一个空对象开始：

D%^+U J"W;Fn|2Vf/V0

function Game() {};

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

var zelda = new Game();
var smb = new Game();
zelda.title = "Legend of Zelda";
smb.title = "Super Mario Brothers";
zelda.title; // "Legend of Zelda"
smb.title; // "Super Mario Brothers"

　　现在这个对象已经有自己的方法了！新创建对象时我们甚至可以传递属性，之后再修改。51Testing软件测试网\p}+Q"dfO

function Game(title) {
this.title = typeof title !== 'undefined' ? title : "";
};
var zelda = new Game("Legend of Zelda");
zelda.title; // "Legend of Zelda"
zelda.title = "Ocarina of Time";
zelda.title; // "Ocarina of Time"
var blank = new Game();
blank.title; // ""

_7|G&u;F0@eH0　　也许你没看明白第二行的内容，其实是使用了三元操作来避免单行的if else，它和下面标准的if else语句是一个意思。

| |"JQBH*\0 51Testing软件测试网(FMJ"@I

if (typeof title !== 'undefined') {
this.title = title;
} else {
this.title = "";
}
// Is the same as
this.title = typeof title !== 'undefined' ? title : "";

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

Ac|\[,M1T0

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

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

51Testing软件测试网9f,u!ClO8b%Y

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

3m4yv9|b0　　后记：当然这只是JavaScript面向对象编程的入门，OO JS还有很多内容可以讲。

收藏举报

TAG:

引用删除 bob123654 / 2013-02-18 13:23:12: 怎么会评1分？
原帖由天天天蓝pqr1于2013-02-18 09:25:37发表

引用删除天天天蓝pqr1 / 2013-02-18 09:25:37: 评 1 分

查看全部评论

bob123654

不要让那些真正对你好的人，慢慢的从你的生活中消失，无论爱情还是友情，都需要用心经营。

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

用户菜单

我的栏目

标题搜索

日历

我的存档

数据统计

RSS订阅