📄 day4_6.html
字号:
<td colspan="2"><a href="../../1-backend/cgi_perl/perl_beginner/index.html">-Perl</a>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2">-<a href="../../1-teach/other/index.htm">其它</a> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#666699">
<div align="center"><font color="#FFFFFF">更多教程</font></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="17"><a href="../../1hdml/index.html">-HDML</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="23"><font face="宋体"><a href="../../1-backend/database/course/day1_1.html">-网络数据库</a></font></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="14"><a href="../../1-backend/protocols/ping/index.html"><font face="arial, helvetica, sans-serif">-ping</font></a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="20"><a href="../../1-backend/cgi_perl/search_engine/index.html">-创建搜索引擎</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="16">-<a href="../../1adobe/GoLive/index.html">Adobe GoLive</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2"><a href="../../1-backend/cgi_perl/templates/index.html">-模板</a></td>
</tr>
<tr bgcolor="#666699">
<td colspan="2" align="center"><font color="#FFFFFF">合作伙伴</font></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" align="left">-<a href="http://www.5dmedia.com/" target="_blank">5D精英网</a></td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td colspan="2"> <img src="../../Library/front_monkey.gif" width="59" height="68"></td>
</tr>
</tbody>
</table>
<!-- #EndLibraryItem --> </td>
<!-- End of headlines (column 1: left column) --> <!-- Gutter between columns 1 and 2 -->
<td width="10" height="794"><img src="http://www.sohu.com/images/pixel.gif" width=10></td>
<!-- Search box and directories (columns 2 and 3: middle columns, combined into one) -->
<td align=center valign=top width="558">
<div align="left"><!-- #BeginEditable "1" -->
<title>JavaScrip高级教程</title>
<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>
<!-- #EndEditable --></div>
</td>
<!-- End of search box and directories (columns 2 and 3: middle columns, combined into one) -->
<!-- Gutter between columns 3 and 4 --> <!-- Other stuff (column 4: right column) -->
<!-- End of other stuff (column 4: right column) --> </tr>
</table>
<!-- End of table surrounding page contents -->
<hr noshade size=1 width=700>
<span class=eng><br>
Copyright (C) 1998-2000 Internet Technologies China. All rights reserved.
</span>
</center>
</body>
<!-- #EndTemplate --></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -