📄 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>第六页：创建你自己的对象</strong>
<p>对象的概念使你能够以一种更易理解的方式去组织你的信息。让<br>
我们从创建一个雇员数据库的简单例子开始，然后利用我们课程<br>
里学到的东西去实现一个比这复杂得多的，和我们的生活有关<br>
的事：编写一个<font face="verdana, arial, geneva, sans-serif">JavaScript</font>虚拟宠物。</p>
<p> <font face="verdana, arial, geneva, sans-serif"></font>为了这个练习，让我们先不管如何把现代资本主义社会工人进行<br>
对象化的方方面面，我们把每一个雇员当作一个具有属性与方法<br>
的对象。每一个雇员有一个名字，职务，薪水，生日，地址等<br>
属性。雇员可以被提升，去休假，换部门或者去下厨等。对象包<br>
括了所有这些信息，而雇员对象就象是一个模板。每个雇员都有<br>
这些属性如姓名，职务等，是属性值的不同使得不同的雇员得以<br>
区分开来。</p>
<p> <font face="verdana, arial, geneva, sans-serif"></font>要创建你自己的对象，你需要从模板开始。在面向对象编程中模<br>
板也称为对象的构造器。一旦你建立了模板，你就可以创建对象<br>
的实例，就象这样：</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>如果这几个实例已被创建，你可以做这些事情：</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>，让首席执行官休上一年的假。</p>
<p> <font face="verdana, arial, geneva, sans-serif"></font>当然你得自己从属性开始编写对象构造器和方法，这里是雇员的<br>
构造器：</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>请注意构造器其实就是一个函数。在函数中我们需要给<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>
赋值，对姓名，职务等也一样。</p>
<p> <font face="verdana, arial, geneva, sans-serif" size="3"></font><font size="3">你可以给构造函数传递参数
，当象下面这个语句这样调用构造函<br>
数时：<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">然后在构造函数中的这条语句：</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>我们就把这个雇员的名字设成了传递给雇员构造函数的参数<br>
的值。</p>
<p> <font face="verdana, arial, geneva, sans-serif"></font>构造函数中使用的 <font face="verdana, arial, geneva, sans-serif">"this"
</font>关键字的原因是你可能一次创建多个雇<br>
员实例。 为了让方法和构造函数正确工作，必须 清楚地告诉它<br>
们到底是在对哪个雇员进行操作。这里的<font face="verdana, arial, geneva, sans-serif">"this"</font>所指的是
<font face="verdana, arial, geneva, sans-serif">is: </font>你<br>
正在创建的实例。下面我们讲讲方法的例子或许能让你理解得<br>
更好。</p>
<p> <font face="verdana, arial, geneva, sans-serif"></font>方法只不过是加在对象上的函数。首先定义函数，然后把函数加<br>
载到对象上（在对象的构造函数中）我们以<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>这个函数计算雇员的新工资并把新工资和新职位赋给雇员。<br>
<font face="verdana, arial, geneva, sans-serif">JavaScript</font>通过使用<font face="verdana, arial, geneva, sans-serif">"this"</font>关键字知道你说的是哪个雇员，所以如<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>这看起来确实有一点怪异，可能要<br>
一段时间去适应它，但是一旦你开始以对象的眼光去思考，你马<br>
上就能养成习惯了。</p>
<p> <font face="verdana, arial, geneva, sans-serif"></font>创建对象的最后一步就是把方法连到对象上。我刚才提到了，你<br>
要在构造函数中做这个。你写完提升方法后，如果要把它连到雇<br>
员对象上，就在构造函数里加上：</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>下面是增加了提升方法的构造函数：</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>的属性。然后如果你想记录雇员换办公室的情况，你就创<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>现在来看看更复杂和重要的面向对象的<font face="verdana, arial, geneva, sans-serif">JavaScript,
</font>去<br>
创建一个虚拟宠物。<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">预装图象 -
是什么<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">预装图象 -
怎么做?</a><font face="verdana, arial, geneva, sans-serif"><br>
</font><font color="#FF3300">第五页 </font><a href="day4_5.html">对象的优点</a><br>
<font color="#FF3300">第六页 </font>创建你自己的对象<br>
<font color="#FF3300">第七页 </font><a href="day4_7.html">你的面向对象的虚拟宠物</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">第四天课程复习</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">本文根据
网猴 相关文章改编，版权归原作者所有。</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>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -