导读:经常看到一些JavaScript的代码脏乱得无法理解,到处都是属性和方法,或者一个循环套着一个循环。但如果使用面向对象就能很好的理清代码,并方便理解和修改代码。如果你不希望自己的代码只有上帝理解的话,就请尽量考虑使用面向对象的模式。
\p4vwAs!da0译文正文:51Testing软件测试网'Q9?THeH0o
51Testing软件测试网Ob;P&c3I)b
到处都是属性、方法,代码极其难懂,天哪,我的程序员,你究竟在做什么?仔细看看这篇指南,让我们一起写出优雅的面向对象的JavaScript代码吧!51Testing软件测试网/hp,w^,C;|jt3C~
51Testing软件测试网/g-Q }&kSB1_
作为一个开发者,能否写出优雅的代码对于你的职业生涯至关重要。随着像Node.js这类技术的发展,你甚至可以在服务器端使用JavaScript了。同样的,你也可以使用JavaScript来控制MongoDB的持续数据存储。.lH4^,l[)h5{0
51Testing软件测试网;Y P|
iNvQ0]LH
文本标记X"ps `H-\&p#[x0
I7tg^#m&q3g0 文本标记只是JavaScript里创建对象的一种方法,当然这里肯定不止这一种,但它是你在只打算创建一个对象实例时的首选方法。"QTS9MU0
51Testing软件测试网l.jYWBR
51Testing软件测试网&H,z3B|"G~;^4f"Rvarbill = {};
T#VfyU0 上面的代码并不实用,它只是一个空对象。接下来我们动态地向这个对象中添加一些属性和方法。51Testing软件测试网2\.M%vp;UnV
51Testing软件测试网M%ryWl#pslY
51Testing软件测试网'v9iJV F1_ebill.name ="Bill E Goat";
bill.sound = function() {
console.log( 'bahhh!');
};
\3o/[C:q9nUcO0 这里添加了属性name,并且给它分配了值"Bill E Goat"。我们并不需要先创建一个空对象,而可以把所有代码直接写在一对括号里。0p8@J`*yy9x&b:T7g0
51Testing软件测试网t7Y]l5D|]qz
8?8o$^$\M/n.RS0varbill = {
name: "Bill E Goat",
sound: function() {
console.log( 'bahhh!');
}
};
b+[(PY9K H0 是不是很美观?访问它的属性和方法就像呼吸一样简单、自然。h&c7nu&SW0
` sO1k'{,~2jB03P$r V gRva0bill.name;// "Bill E Goat"
bill.sound(); // "bahhh"
*eE'd] Q+PwEjCP0 如果属性名不是一个合法的标志符,我们还可以这样访问它:51Testing软件测试网"^^,?!AAz7b
51Testing软件测试网?w-JA2GK.k[
51Testing软件测试网by[!x0t`Ubill['name'];// "Bill E Goat"
h7ia9AT3G]j0 注意:我在调用方法时在其后添加了圆括号。现在,我们再重写一下当前的sound方法,并添加一个参数。51Testing软件测试网'e{9zFM_WyR~]
gP Xw]:cW}2C0$]HW Su:?0bill.sound =function(noise) {
console.log(noise);
};
bill.sound("brrr!");// "brrr!" He's cold :)
51Testing软件测试网W_'Z:iXlPa9L
很好,我们已经传入参数了,并且在方法定义中访问了它。接下来,向对象中增加一个新方法来访问name属性。51Testing软件测试网2?"u(z4GW@+I)Z
51Testing软件测试网)[fbv$K8B@9?.F
51Testing软件测试网P8oag)y.YGSsjmbill.sayName =function() {
console.log( "Hello "+this.name );
};
bill.sayName(); // "Hello Bill E Goat"
51Testing软件测试网.IN#w0z_7J
我们可以使用this.propertyName(在本例中即this.name)在方法内访问属性。51Testing软件测试网w3p'K`r/H/j8]_}H
51Testing软件测试网(\#MQ.wZ0y
51Testing软件测试网'rnEQ3^3sbill.sayName;// function
51Testing软件测试网&ud.OK7U
怎么回事?访问sayName方法返回了一个方法定义。现在让我们再深入些。c]W6v3|0
51Testing软件测试网Zo!iiY;e$a.D
Ml{
e.]%{0varsound = bill.sound;
sound('moo!');// "moo!"
;oQF!qcp0 现在我们指定了sound方法为一个局部函数,可以调用这个函数并且传递参数。你认为在复制bill的时候会发生什么?(类比下克隆羊Dolly)bcaw.Vj9f3M$_0
_&j@]R`v1z\g0
51Testing软件测试网Do%B[uLb5Cvarsally = bill;
sally.name; // "Bill E Goat",可它的名字是Sally
sally.name = "Sally";
sally.name; // "Sally",好些了
bill.name; // "Sally",问题又转移到bill身上了
51Testing软件测试网
d5K"eG8~ Wu EI
上面的例子中我们新建了一个变量sally,并使它和bill相同,所以bill和sally会在内存中引用了同一个对象。这时候给改变一块它们就会同时发生改变。再看看下面这段代码:51Testing软件测试网N[ psHf1C2Rd)r
}9lO#z#G?b[*y1oq?}b0
51Testing软件测试网E5BR`-Hj2v
bill.name ="Bill E Goat";
bill.sayName(); // "Hello Bill E Goat";
varsayName = bill.sayName;
sayName; // function 目前为止一切顺利
sayName(); // "Hello ",为什么这里又不再显示bill的名字了?
51Testing软件测试网L(tA1~7Q(ZSb'x
bill的name是一个本地实例变量,只对bill可得。当sayName方法被创建为全局变量时,当它碰到this.name声明时,它会在全局查找name的值。唯一的问题在于name还没有被定义。现在让我们在全局定义name,看看会发生什么:
51Testing软件测试网%AX:c OTm
51Testing软件测试网GSr#LUvarname ="Bearded Octo";
sayName(); // "Hello Bearded Octo"
51Testing软件测试网CzS{9G-cE*m"C
这里我们在全局范围内定义了name变量,并且赋予了值"Bearded Octo"。当我们在调用sayHello方法时它会在全局范围内查找name变量,最终会获得值"Bearded Octo"。我们为什么不为这几个对象建立一个共同的“类”呢?7Oem+?N*EhV U0
VjI~#F$u
o0构造函数(tj|v;V4iC0
(PO A-t#UN0 构造函数是另一个编写面向对象JavaScript代码的方法,当你需要初始化对象的属性、方法,或者需要创建多个属性、方法各不相同的实例时,它将是你最佳的选择。同样我们先从创建一个空对象开始:O4?ZF1Qv.ck0
51Testing软件测试网`A{rX/O)lk
-v~&G:xx1`DK0functionGame() {};
|6B'|4vGJxv{0 这个对象包括自己的属性,你甚至可以在创建对象时传入属性,然后再对其进行修改。51Testing软件测试网)[w)nF#J
|8k'bZ5nf_0{-j+d2mHY%s'f0varzelda =newGame();
varsmb =newGame();
zelda.title = "Legend of Zelda";
smb.title = "Super Mario Brothers";
zelda.title; // "Legend of Zelda"
smb.title; // "Super Mario Brothers"
*Ik
o%V1E(`$`3aS y0 现在这个对象已经有自己的方法了!新创建对象时我们甚至可以传递属性,之后再修改。51Testing软件测试网ReB5K?$au
R:w l&m@7p ?)_0
51Testing软件测试网KfZ.hpZa(ffunctionGame(title) {
this.title =typeoftitle !=='undefined'? title :"";
};
varzelda =newGame("Legend of Zelda");
zelda.title; // "Legend of Zelda"
zelda.title = "Ocarina of Time";
zelda.title; // "Ocarina of Time"
varblank =newGame();
blank.title; // ""
x-tAYZn2r0 也许你没看明白第二行的内容,其实是使用了三元操作来避免单行的if else,它和下面标准的if else语句是一个意思。51Testing软件测试网1m3i&S$me ]E\
51Testing软件测试网t|0]KH
|v
51Testing软件测试网y)^-`;I o5ng4YMZif(typeoftitle !=='undefined') {
this.title = title;
} else{
this.title ="";
}
// Is the same as
this.title =typeoftitle !=='undefined'? title :"";
_'Q+Py{\z v,^0 如果title变量在对象被创建时传入,title实例变量将会指定为title的值。如果没有值传入,那么title将会被初始化为默认值""。我们同样可以创建一个方法来访问这个属性:51Testing软件测试网!mk-F.EY_*p
2N&[s#wk0+Y@8s5ZRR/q7?0zelda.loveTitle =function() {
console.log( "I love "+this.title );
};
zelda.loveTitle(); // "I love Ocarina of Time"
yP`3H Q!FFm)S0 这样就很整洁了,但是我们还能做得更好。我们可以在Game类中添加一个方法,这样所有Game类的实例将都能使用此方法。8d:[]P3b:gj~0
q)V2{5]-E*dS4j/J0
51Testing软件测试网Cl&Ujb0a0bGame.prototype.heartIt =function() {
console.log( "I heart "+this.title );
};
zelda.heartIt(); // "I heart Ocarina of Time"
smb.heartIt(); // "I heart Super Mario Brothers"
51Testing软件测试网]8WY-iicPz
后记:当然这只是JavaScript面向对象编程的入门,OO JS还有很多内容可以讲。![j
G.f)@f6@0