|
| 1 | +// Lets create some paintings represented by objects: |
| 2 | +const painting1 = { |
| 3 | + title: 'blue sky', |
| 4 | + painter: 'benjamin', |
| 5 | + year: 2012, |
| 6 | +}; |
| 7 | + |
| 8 | +const painting2 = { |
| 9 | + title: 'green sky', |
| 10 | + painter: 'Yana', |
| 11 | + year: 2012, |
| 12 | +}; |
| 13 | + |
| 14 | +const painting3 = { |
| 15 | + title: 'blue sky', |
| 16 | + painter: 'Omid', |
| 17 | + year: 2012, |
| 18 | +}; |
| 19 | + |
| 20 | +/* |
| 21 | +This takes a lot of code to write out. It is error prone, cause what if i |
| 22 | +misspelled one of the keys. The we will have problems! Therefore we introduce: |
| 23 | +CONSTRUCTOR FUNCTIONS: |
| 24 | +*/ |
| 25 | + |
| 26 | +/* |
| 27 | +Here we create a constructor function for a painting. |
| 28 | +It is a function that returns an object. This function represents a template |
| 29 | +for creating paintings. A painting has a title, painter and a year. |
| 30 | +*/ |
| 31 | + |
| 32 | +function paintingCreator(title, painter, year) { |
| 33 | + return { |
| 34 | + title: title, |
| 35 | + painter: painter, |
| 36 | + year: year, |
| 37 | + }; |
| 38 | +} |
| 39 | + |
| 40 | +/* |
| 41 | +Just like with the painting constructor function we here create a |
| 42 | +constructor function (template) for what a painter object contains. |
| 43 | +*/ |
| 44 | +function paintersCreator(firstname, lastname, age) { |
| 45 | + return { |
| 46 | + firstname: firstname, |
| 47 | + lastname: lastname, |
| 48 | + age: age, |
| 49 | + } |
| 50 | +} |
| 51 | + |
| 52 | +// Now we create a specific painter using the constructor function. |
| 53 | +// This is just an object! |
| 54 | +const benjaminPaintor = paintersCreator('Benjamin', 'Hughes', 31); |
| 55 | +console.log(benjaminPaintor); |
| 56 | + |
| 57 | +// lets create two more objects represented by objects: |
| 58 | +const painting1Constructed = paintingCreator('blue sky', benjaminPaintor, 2012); |
| 59 | +const painting2Constructed = paintingCreator('GREEN sky', benjaminPaintor, 2000); |
| 60 | +console.log(painting1Constructed); |
| 61 | + |
| 62 | +/* |
| 63 | +Now we create the last constructor function. This represents a portfolio. |
| 64 | +A portfolio is represented by an object just like the previous functions. |
| 65 | +The only difference is that the porftfolio object also has methods like getPaintings |
| 66 | +and addPainting. |
| 67 | +*/ |
| 68 | +function portfolioCreator(owner, paintings) { |
| 69 | + return { |
| 70 | + webPage: 'www.portfolio.com', |
| 71 | + getPaintings: function() { |
| 72 | + // This function returns the paintings that are attached to the portfolio |
| 73 | + // It does this using the paintings parameter (that is an array of paintings) |
| 74 | + return paintings; |
| 75 | + }, |
| 76 | + addPainting: function(painting) { |
| 77 | + // Now we add a method that can add a painting to a portfolio. |
| 78 | + // It has a painting as a parameter. |
| 79 | + paintings.push(painting); |
| 80 | + }, |
| 81 | + getWebpage: function() { |
| 82 | + // This keyword eveluates to the object it is being called on. |
| 83 | + return this.webPage; |
| 84 | + } |
| 85 | + } |
| 86 | +} |
| 87 | + |
| 88 | +/* |
| 89 | +Lets create a portfolio: |
| 90 | +It has a owner called Benjamin and it has one painting (painting1Constructed). |
| 91 | +Again newPortfolio is just an object. With some keys. Most of those keys' values are methods but one is a string |
| 92 | +the webPage key. |
| 93 | +*/ |
| 94 | +const newPortfolio = portfolioCreator('Benjamin', [painting1Constructed]); |
| 95 | +// Here we add a painting (painting2Constructed) to the portfolio called newPortfolio. |
| 96 | +newPortfolio.addPainting(painting2Constructed); |
| 97 | +// The paintings array (reached through closure) should now have an extra painting, |
| 98 | +// because we pushed a new painting to the paintings array on line 79. |
| 99 | +console.log(newPortfolio.getPaintings()); |
| 100 | +// YES, we see that the paintings array actually has two painting now! |
| 101 | + |
| 102 | +// Okay. Lets add a new painting. Here we are creating the painter directly. |
| 103 | +newPortfolio.addPainting(paintingCreator('yellow', paintersCreator('bad', 'asd', 12), 2011)); |
| 104 | +console.log(newPortfolio.getPaintings()); |
| 105 | +// Now we have three paintings, awesome! |
| 106 | + |
| 107 | +// Here we get 'www.portfolio.com' because the this keyword evaluates to the object it was called on! |
| 108 | +console.log(newPortfolio.getWebpage()); |
| 109 | + |
0 commit comments