reffec.com

properties in .NET Connect PDF-417 2d barcode in .NET properties

properties generate, create none none on none projects EAN/UCC-14 Parasitic inheritance function Works wit h parasite(victim) { objects var that = Uses the object(victim); prototype that.more = 1; chain return that; }. Constructor-like function, creates objects Copies an object; augments and returns the copy [ 197 ]. Inheritance Method Name 11 Example Classification Not es Inherits only own properties Can be combined with #1 to inherit prototype too Easy way to deal with the issues when a child inherits a property that is an object (and therefore passed by reference) Combination of #11 and #4 Allows you to inherit both own properties and prototype properties without calling the parent constructor twice. Borrowing function none none Child() { Works with constructors constructors Parent. apply(this, arguments);. Borrow a constructor and copy the prototype function Child() { none for none Works with constructors Parent. apply(this, Uses the arguments); prototype }. chain extend2(Child, Parent);. Copies properties Given so many opti none none ons, you are probably wondering which is the right one That depends on your style and preferences, your project, task, and team. Are you more comfortable thinking in terms of classes Then pick one of the methods that work with constructors. Are you going to need just one or a few instances of your "class" Then choose an object-based pattern.

Are these the only ways of implementing inheritance No. You can chose a pattern from the table above or you can mix them, or you can think of your own. The important thing is to understand and be comfortable with objects, prototypes, and constructors; the rest is easy.

. Case Study: Drawing Shapes Let"s finish off t none for none his chapter with a more practical example of using inheritance. The task is to be able to calculate the area and the perimeter of different shapes, as well as to draw them, while reusing as much code as possible..

Analysis Let"s have one Sha none for none pe constructor that contains all of the common parts. From there, we can have Triangle, Rectangle and Square constructors, all inheriting from Shape. A square is really a rectangle with same-length sides, so let"s reuse Rectangle when building the Square.

. [ 198 ]. 6 . In order to define a shape, we"ll use points with x and y coordinates. A generic shape can have any number of points. A triangle is defined with three points, a rectangle (to keep it simpler) with one point and the lengths of the sides.

The perimeter of any shape is the sum of its sides" lengths. The area is shape-specific and will be implemented by each shape. The common functionality in Shape would be: A draw() method that can draw any shape given the points A getParameter() method A property that contains an array of points Other methods and properties as needed.

For the drawing pa none none rt we"ll use a <canvas> tag. It"s not supported in IE, but hey, this is just an exercise. Let"s have two other helper constructors Point and Line.

Point will help when defining shapes; Line will ease some calculations, as it can give the length of the line connecting any two given points. You can play with a working example here: http://www.phpied.

com/files/ canvas/. Just open the Firebug console and start creating new shapes as you"ll see in a moment..

Implementation Let"s start by add none for none ing a canvas tag to a blank HTML page:. <canvas height="600" width="800" id="canvas" /> Then, inside <s none none cript> tags, we"ll put the JavaScript code:. <script type="text/javascript"> // ... code goes here </script> Now let"s take a l none for none ook at what"s in the JavaScript part. First, the helper Point constructor. It just can"t get any more trivial than this:.

function Point(x, y) { this.x = x; this.y = y; }.

[ 199 ]. Inheritance Bear in mind that none none the coordinates of the points on the canvas start from x=0, y=0, which is the top left. The bottom right will be x = 800, y = 600..

x=800 y=600 y Next, the Line con none for none structor. It takes two points and calculates the length of the line between them, using the Pythagorean Theorem a2 + b2 = c2 (imagine a right -angled triangle where the hypotenuse connects the two given points)..

function Line(p1, p2) { this.p1 = p1; this.p2 = p2; this.

length = Math.sqrt(Math.pow(p1.

x - p2.x, 2) + Math.pow(p1.

y p2.y, 2)); }. Next comes the Sha none for none pe constructor. The shapes will have their points (and the lines that connect them) as own properties. The constructor also invokes an initialization method, init(), that will be defined in the prototype.

. function Shape() { this.points = []; this.lines = []; this.

init(); }. Now the big part: none for none the methods of Shape.prototype. Let"s define all of these methods using the object literal notation.

Refer to the comments for guidelines as to what each method does.. Shape.prototype = { // reset pointer to constructor constructor: Shape, // initialization, sets this.context to point // to the context of the canvas object init: function() { if (typeof this.

context === "undefined") { var canvas = document.getElementById("canvas"); Shape.prototype.

context = canvas.getContext("2d"); [ 200 ]. 6 } }, // method none none that draws a shape by looping through this.points draw: function() { var ctx = this.context; ctx.

strokeStyle = this.getColor(); ctx.beginPath(); ctx.

moveTo(this.points[0].x, this.

points[0].y); for(var i = 1; i < this.points.

length; i++) { ctx.lineTo(this.points[i].

x, this.points[i].y); } ctx.

closePath(); ctx.stroke(); }, // method that generates a random color getColor: function() { var rgb = []; for (var i = 0; i < 3; i++) { rgb[i] = Math.round(255 * Math.

random()); } return "rgb(" + rgb.join(",") + ")"; }, // method that loops through the points array, // creates Line instances and adds them to this.lines getLines: function() { if (this.

lines.length > 0) { return this.lines; } var lines = []; for(var i = 0; i < this.

points.length; i++) { lines[i] = new Line(this.points[i], (this.

points[i+1]) this.points[i+1] : this.points[0]); } this.

lines = lines; return lines; }, // shell method, to be implemented by children getArea: function(){}, // sums the lengths of all lines getPerimeter: function(){ var lines = this.getLines(); var perim = 0; for (var i = 0; i < lines.length; i++) { perim += lines[i].

length; } return perim; } }. [ 201 ].
Copyright © reffec.com . All rights reserved.