?? day4_6.html
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312-80">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: #CC0033; text-decoration: underline}
-->
</style>
<title>JavaScript高級教程</title>
<script language="JavaScript">
<!-- hide me
// timedAlert
// this just calls a
function timedAlert()
{
var the_timeout = setTimeout("alertAndRedirect();", 3000);
}
function alertAndRedirect()
{
alert('OK! Exhale!');
window.location.replace("day3_2.html");
}
// show me -->
</script>
</head>
<body topmargin="1" leftmargin="2">
<table border="0" width="591" cellspacing="0">
<tr>
<td bgcolor="#ffff99" width="451">JavaScript高級教程 - 第四課</td>
</tr>
<tr>
<td bgcolor="#FF6600" width="451"><a href="mailto:thau@wired.com">Thau</a></td>
</tr>
</table>
<div align="left">
<table border="0" width="630" cellspacing="0">
<tr>
<td width="458" valign="top" align="left" rowspan="2"><small><small><br>
</small></small><strong>第六頁：創(chuàng)建你自己的對象</strong>
<p>對象的概念使你能夠以一種更易理解的方式去組織你的信息。讓<br>
我們從創(chuàng)建一個雇員數(shù)據(jù)庫的簡單例子開始，然后利用我們課程<br>
里學(xué)到的東西去實(shí)現(xiàn)一個比這復(fù)雜得多的，和我們的生活有關(guān)<br>
的事：編寫一個<font face="verdana, arial, geneva, sans-serif">JavaScript</font>虛擬寵物。</p>
<p> <font face="verdana, arial, geneva, sans-serif"></font>為了這個練習(xí)，讓我們先不管如何把現(xiàn)代資本主義社會工人進(jìn)行<br>
對象化的方方面面，我們把每一個雇員當(dāng)作一個具有屬性與方法<br>
的對象。每一個雇員有一個名字，職務(wù)，薪水，生日，地址等<br>
屬性。雇員可以被提升，去休假，換部門或者去下廚等。對象包<br>
括了所有這些信息，而雇員對象就象是一個模板。每個雇員都有<br>
這些屬性如姓名，職務(wù)等，是屬性值的不同使得不同的雇員得以<br>
區(qū)分開來。</p>
<p> <font face="verdana, arial, geneva, sans-serif"></font>要創(chuàng)建你自己的對象，你需要從模板開始。在面向?qū)ο缶幊讨心?lt;br>
板也稱為對象的構(gòu)造器。一旦你建立了模板，你就可以創(chuàng)建對象<br>
的實(shí)例，就象這樣：</p>
<pre>
<font face="verdana, arial, geneva, sans-serif"></font>
<font face="verdana, arial, geneva, sans-serif">var fred = new Employee("Fred Flintstone", 33, "Surface Miner", 20000);
var barney = new Employee("Barney Rubble", 33, "Slacker", 40000);
var boss = new Employee("Mr. Slate",50, "CEO", 1000000);
</font></pre>
<p> <font face="verdana, arial, geneva, sans-serif"></font>如果這幾個實(shí)例已被創(chuàng)建，你可以做這些事情：</p>
<blockquote>
<pre>
<font face="verdana, arial, geneva, sans-serif"></font>
<font face="verdana, arial, geneva, sans-serif">barney.promotion("Chief Slacker","10");
fred.fired();
boss.vacation(365);
</font></pre>
</blockquote>
<p> <font face="verdana, arial, geneva, sans-serif"></font>這樣就把<font face="verdana, arial, geneva, sans-serif">Barney</font>提升為‘首席懶鬼’并增加<font face="verdana, arial, geneva, sans-serif">10%</font>的薪水，炒掉<br>
<font face="verdana, arial, geneva, sans-serif">Fred</font>，讓首席執(zhí)行官休上一年的假。</p>
<p> <font face="verdana, arial, geneva, sans-serif"></font>當(dāng)然你得自己從屬性開始編寫對象構(gòu)造器和方法，這里是雇員的<br>
構(gòu)造器：</p>
<blockquote>
<pre>
<font face="verdana, arial, geneva, sans-serif"></font>
<font face="verdana, arial, geneva, sans-serif">function Employee(name, age, title, salary)
{
this.name = name;
this.age = age;
this.title = title;
this.salary = salary;
}
</font></pre>
</blockquote>
<p> <font face="verdana, arial, geneva, sans-serif"></font>請注意構(gòu)造器其實(shí)就是一個函數(shù)。在函數(shù)中我們需要給<br>
<font face="verdana, arial, geneva, sans-serif"><tt>this.property_name</tt></font>賦值，我們不直接給<font face="verdana, arial, geneva, sans-serif">age</font>賦值，而是給<font face="verdana, arial, geneva, sans-serif"><tt>this.age</tt></font><br>
賦值，對姓名，職務(wù)等也一樣。</p>
<p> <font face="verdana, arial, geneva, sans-serif" size="3"></font><font size="3">你可以給構(gòu)造函數(shù)傳遞參數(shù)
，當(dāng)象下面這個語句這樣調(diào)用構(gòu)造函<br>
數(shù)時：<br>
<br>
</font><font face="verdana, arial, geneva, sans-serif" size="2">var
barney = new Employee("Barney Rubble", 33, "Slacker",
40000);</font><font face="verdana, arial, geneva, sans-serif" size="3"><br>
</font></p>
<p> <font face="verdana, arial, geneva, sans-serif" size="3">... </font><font size="3">然后在構(gòu)造函數(shù)中的這條語句：</font></p>
<font size="3">
<blockquote>
<pre>
<font face="verdana, arial, geneva, sans-serif"></font>
<font face="verdana, arial, geneva, sans-serif">this.name = name;
</font></pre>
</blockquote>
<p> <font face="verdana, arial, geneva, sans-serif">... </font>我們就把這個雇員的名字設(shè)成了傳遞給雇員構(gòu)造函數(shù)的參數(shù)<br>
的值。</p>
<p> <font face="verdana, arial, geneva, sans-serif"></font>構(gòu)造函數(shù)中使用的 <font face="verdana, arial, geneva, sans-serif">"this"
</font>關(guān)鍵字的原因是你可能一次創(chuàng)建多個雇<br>
員實(shí)例。 為了讓方法和構(gòu)造函數(shù)正確工作，必須 清楚地告訴它<br>
們到底是在對哪個雇員進(jìn)行操作。這里的<font face="verdana, arial, geneva, sans-serif">"this"</font>所指的是
<font face="verdana, arial, geneva, sans-serif">is: </font>你<br>
正在創(chuàng)建的實(shí)例。下面我們講講方法的例子或許能讓你理解得<br>
更好。</p>
<p> <font face="verdana, arial, geneva, sans-serif"></font>方法只不過是加在對象上的函數(shù)。首先定義函數(shù)，然后把函數(shù)加<br>
載到對象上（在對象的構(gòu)造函數(shù)中）我們以<font face="verdana, arial, geneva, sans-serif"><tt>promotion()</tt>
</font>方法<br>
為例：</p>
<blockquote>
<pre>
<font face="verdana, arial, geneva, sans-serif"></font>
<font face="verdana, arial, geneva, sans-serif">function promotion(new_title,percent_raise)
{
var salary_increase = this.salary * percent_raise;
this.salary = this.salary + salary_increase;
this.title = new_title;
}
</font></pre>
</blockquote>
<p> <font face="verdana, arial, geneva, sans-serif"></font>這個函數(shù)計算雇員的新工資并把新工資和新職位賦給雇員。<br>
<font face="verdana, arial, geneva, sans-serif">JavaScript</font>通過使用<font face="verdana, arial, geneva, sans-serif">"this"</font>關(guān)鍵字知道你說的是哪個雇員，所以如<br>
果有這個語句：</p>
<blockquote>
<pre>
<font face="verdana, arial, geneva, sans-serif"></font>
<font face="verdana, arial, geneva, sans-serif">barney.promotion("Chief Slacker",10);
</font></pre>
</blockquote>
<p> <font face="verdana, arial, geneva, sans-serif"></font>那 <font face="verdana, arial, geneva, sans-serif">"this"</font>就是指
<font face="verdana, arial, geneva, sans-serif">is Barney. </font>這看起來確實(shí)有一點(diǎn)怪異，可能要<br>
一段時間去適應(yīng)它，但是一旦你開始以對象的眼光去思考，你馬<br>
上就能養(yǎng)成習(xí)慣了。</p>
<p> <font face="verdana, arial, geneva, sans-serif"></font>創(chuàng)建對象的最后一步就是把方法連到對象上。我剛才提到了，你<br>
要在構(gòu)造函數(shù)中做這個。你寫完提升方法后，如果要把它連到雇<br>
員對象上，就在構(gòu)造函數(shù)里加上：</p>
<blockquote>
<pre>
<font face="verdana, arial, geneva, sans-serif"></font>
<font face="verdana, arial, geneva, sans-serif">this.promotion = promotion;
</font></pre>
</blockquote>
<p> <font face="verdana, arial, geneva, sans-serif"></font>下面是增加了提升方法的構(gòu)造函數(shù)：</p>
<blockquote>
<pre>
<font face="verdana, arial, geneva, sans-serif"></font>
<font face="verdana, arial, geneva, sans-serif">function Employee(name, age, title, salary)
{
this.name = name;
this.age = age;
this.title = title;
this.salary = salary;
this.promotion = promotion;
}
function promotion(new_title,percent_raise)
{
var salary_increase = this.salary * percent_raise;
this.salary = this.salary + salary_increase;
this.title = new_title;
}
</font></pre>
</blockquote>
<p> <font face="verdana, arial, geneva, sans-serif"></font>如要增加其它信息，比如雇員的辦公室，可以增加一個名為<br>
<font face="verdana, arial, geneva, sans-serif">"office"</font>的屬性。然后如果你想記錄雇員換辦公室的情況，你就創(chuàng)<br>
建一個<font face="verdana, arial, geneva, sans-serif"><tt>transfer()</tt></font>方法<font face="verdana, arial, geneva, sans-serif">.
</font></p>
</font>
<p><font size="3"> <font face="verdana, arial, geneva, sans-serif"></font>明白了嗎<font face="verdana, arial, geneva, sans-serif">?
</font>現(xiàn)在來看看更復(fù)雜和重要的面向?qū)ο蟮?lt;font face="verdana, arial, geneva, sans-serif">JavaScript,
</font>去<br>
創(chuàng)建一個虛擬寵物。<a href="day4_7.html">>></a></font></p>
<p align="left"><font face="宋體" size="3" color="#000000"><strong>JavaScript高級教程</strong></font><font color="#FF0000" face="宋體" size="3"><br>
</font><font size="3"><font color="#FF3300">第一頁</font> <a href="day4_1.html"><font face="verdana, arial, geneva, sans-serif">JavaScript</font>高級教程<font face="verdana, arial, geneva, sans-serif">-
</font>第<font face="verdana, arial, geneva, sans-serif">4</font>天</a>
<br>
<font color="#FF3300">第二頁 </font><a href="day4_2.html">圖象映射與<font face="verdana, arial, geneva, sans-serif">JavaScript</font></a><font face="verdana, arial, geneva, sans-serif"><br>
</font><font color="#FF3300">第三頁 </font><a href="day4_3.html">預(yù)裝圖象 -
是什么<font face="verdana, arial, geneva, sans-serif">?</font></a><font face="verdana, arial, geneva, sans-serif"><br>
</font><font color="#FF3300">第四頁 </font><a href="day4_4.html">預(yù)裝圖象 -
怎么做?</a><font face="verdana, arial, geneva, sans-serif"><br>
</font><font color="#FF3300">第五頁 </font><a href="day4_5.html">對象的優(yōu)點(diǎn)</a><br>
<font color="#FF3300">第六頁 </font>創(chuàng)建你自己的對象<br>
<font color="#FF3300">第七頁 </font><a href="day4_7.html">你的面向?qū)ο蟮奶摂M寵物</a><br>
<font color="#FF3300">第八頁 </font><a href="day4_8.html">計算字符串</a><br>
<font color="#FF3300">第九頁 </font><a href="day4_9.html">獲取難以索引的對象</a><br>
<font color="#FF3300">第十頁 </font><a href="day4_10.html">另一種獲取難以索引的對象的手段</a><br>
<font color="#FF3300">第十一頁 </font><a href="day4_11.html">第四天課程復(fù)習(xí)</a></font></p>
<p>[<a href="day1_1.html">第1課</a>][<a href="day2_1.html">第2課</a>][<a href="day3_1.html">第3課</a>][第4課][<a href="day5_1.html">第5課</a>]</p>
<hr align="left">
<!--webbot bot="Include" U-Include="../../copyright.html" TAG="BODY" startspan -->
<p><font face="verdana, arial, geneva, sans-serif" size="2"><a href="http://phtshop.yeah.net" target="_top">本文根據(jù)
網(wǎng)猴 相關(guān)文章改編，版權(quán)歸原作者所有。</a> </font><font color="#000000"><span class="smallfont"></span></font></p>
<!--webbot bot="Include" endspan i-checksum="15926" --> </td>
</tr>
<tr> </tr>
</table>
</div>
</body>
</html>
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -