📄 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 + -