1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
---
title: 测试你的技能：面向对象的Javascript
slug: 'Learn/JavaScript/Objects/测试你的技能:面向对象的Javascript'
tags:
- JavaScript
- OOJS
- 初学者
- 学习
- 对象
- 测试你的技能
translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript'
---
<div>{{learnsidebar}}</div>
<div>这个测试的目的是为了评估你是否已经理解了我们的<a href="/zh-CN/docs/Learn/JavaScript/Objects/Object-oriented_JS">适合初学者的JavaScript面向对象</a>，<a href="/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes">对象原型</a>，和 <a href="/zh-CN/docs/Learn/JavaScript/Objects/Inheritance">JavaScript 中的继承</a>文章。</div>
<div></div>
<div class="blockIndicator note">
<p><strong>注意</strong>: 你可以尝试在下方的交互编辑器，但是若你下载源码或是使用在线工具例如 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 或 <a href="https://glitch.com/">Glitch</a> 来进行这些项目的话，会更有帮助。</p>
<p>如果你在过程中想不出解决方案，你可以向我们寻求帮助——查看在本页的底部章节 {{anch("Assessment or further help")}}。</p>
</div>
<div class="blockIndicator note">
<p><strong>注意</strong>: 在下方的例子中，如果在你的代码中有错误内容的话，错误内容将在页面的结果面板进行显示，以此来帮助你想出解决方案（若是下载的版本，请进入浏览器的 JavaScript 控制台）。</p>
</div>
<h2 id="OOJS_1">OOJS 1</h2>
<p>In this task we provide you with a constructor. We want you to:</p>
<ul>
<li>Add a new method to the <code>Shape</code> class's prototype, <code>calcPerimeter()</code>, which calculates its perimeter (the length of the shape's outer edge) and logs the result to the console.</li>
<li>Create a new instance of the <code>Shape</code> class called <code>square</code>. Give it a <code>name</code> of <code>square</code> and a <code>sideLength</code> of <code>5</code>.</li>
<li>Call your <code>calcPerimeter()</code> method on the instance, to see whether it logs the calculation result to the browser DevTools' console as expected.</li>
<li>Create a new instance of <code>Shape</code> called <code>triangle</code>, with a <code>name</code> of <code>triangle</code> and a <code>sideLength</code> of <code>3</code>.</li>
<li>Call <code>triangle.calcPerimeter()</code> to check that it works OK.</li>
</ul>
<p>Try updating the live code below to recreate the finished example:</p>
<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs1.html", '100%', 400)}}</p>
<div class="blockIndicator note">
<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/tasks/oojs/oojs1-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
</div>
<h2 id="OOJS_2">OOJS 2</h2>
<p>Next up we want you to take the <code>Shape</code> class you saw in Task #1 (including the <code>calcPerimeter()</code> method) and recreate it using ES class syntax instead.</p>
<p>Test that it works by creating the <code>square</code> and <code>triangle</code> object instances as before (using <code>new Shape()</code> for both), and then calling their <code>calcPerimeter()</code> methods.</p>
<p>Try updating the live code below to recreate the finished example:</p>
<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs2.html", '100%', 400)}}</p>
<div class="blockIndicator note">
<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/tasks/oojs/oojs2-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
</div>
<h2 id="OOJS_3">OOJS 3</h2>
<p>Finally, we'd like you to start with the ES <code>Shape</code> class you created in the last task.</p>
<p>We'd like you to create a <code>Square</code> class that inherits from <code>Shape</code>, and adds a <code>calcArea()</code> method that calculates the square's area. Also set up the constructor so that the <code>name</code> property of <code>Square</code> object instances is automatically set to <code>square</code>, and the <code>sides</code> property is automatically set to <code>4</code>. When invoking the constructor, you should therefore just need to provide the <code>sideLength</code> property.</p>
<p>Create an instance of the <code>Square</code> class called <code>square</code> with appropriate property values, and call its <code>calcPerimeter()</code> and <code>calcArea()</code> methods to show that it works ok.</p>
<p>Try updating the live code below to recreate the finished example:</p>
<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs3.html", '100%', 400)}}</p>
<div class="blockIndicator note">
<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/tasks/oojs/oojs3-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
</div>
<h2 id="Assessment_or_further_help">Assessment or further help</h2>
<p>You can practice these examples in the Interactive Editors above.</p>
<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
<ol>
<li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
<li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include:
<ul>
<li>A descriptive title such as "Assessment wanted for OOJS 1 skill test".</li>
<li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
<li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
<li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
</ul>
</li>
</ol>
|
