Wednesday, January 3, 2018

JS Concepts : Prototypes














JS Concepts : Prototypes






























































































































var genericPost = {
  x: 0,
  y: 0,
  postNum: undefined,
  connectionsTo: undefined,
  sendRopeTo: function(connectedPost) {
    if (this.connectionsTo == undefined) {
      var postArray = [];
      postArray.push(connectedPost);
      this.connectionsTo = postArray;
    } else {
      this.connectionsTo.push(connectedPost);
    }
  }
};

// create post1 and post2
var post1 = Object.create(genericPost); 
var post2 = Object.create(genericPost);

// modify the post properties
post1.x= -2;
post1.y= 4;
post1.postNum= 1;

post2.x=5;
post2.y= 1;
post2.postNum= 2;
// connect the posts together
post1.sendRopeTo(post2);
post2.sendRopeTo(post1);


--------------------------------------------------------------------------------------------------------------------------


Creation with Prototypes II

It turns out that there are some fence posts that have special properties. Some have weathervanes, some have birdhouses, and some even have emergency lights. Here are the three new posts that we are going to work with:
x: 0,
y: -3,
postNum: 8,
connectionsTo: 10

x: 6,
y: 8,
postNum: 9,
connectionsTo: 10

x: -2,
y: 3,
postNum: 10,
connectionsTo: 8, 9
  1. Use Object.create and pass in genericPost as a prototype to create the new fence posts listed above, and assign them to post8post9, and post10 variables that match their respective postNumproperty.
  2. After the posts have been created, use dot notation to assign all of the property values listed above. You can use xy, and postNumproperties to set the values for each post. Then use the sendRopeTomethod to make the connections between posts.
  3. Now we can add new properties for special fence posts. Posts with an even-numbered y coordinate have a birdhouse, and therefore have a numBirds property initially set to 0.
  4. Posts that are connected to post9, but are not post9, have a property of weathervane initially set to "N".
  5. Posts with an even-numbered postNum have emergency lights, and therefore have a lightsOn property initially set to false.


var genericPost = {
  x: 0,
  y: 0,
  postNum: undefined,
  connectionsTo: undefined,
  sendRopeTo: function(connectedPost) {
    if (this.connectionsTo == undefined) {
      var postArray = [];
      postArray.push(connectedPost);
      this.connectionsTo = postArray;
    } else {
      this.connectionsTo.push(connectedPost);
    }
  }
};

// create post8, post9, and post10
var post8 = Object.create(genericPost);
var post9 = Object.create(genericPost);
var post10 = Object.create(genericPost);
// assign property values and make connections

post8.x = 0;
post8.y = -3;
post8.postNum = 8;
post8.sendRopeTo(post10);

post9.x = 6;
post9.y = 8;
post9.postNum = 9;
post9.sendRopeTo(post10);

post10.x = -2;
post10.y = 3;
post10.postNum = 10;
post9.sendRopeTo(post8);
post9.sendRopeTo(post9);

post9.numBirds = 0;
post10.weathervane = "N";
post8.lightsOn = false;
post10.lightsOn = false;

--------------------------------------------------------------------------------------------------------------------------

Construtor function

function Fencepost(x,y,postNum){
  this.x = x;
  this.y = y;
  this.postNum = postNum;
  this.connectionsTo = [];
  this.sendRopeTo= function(connectedPost) {
      this.connectionsTo.push(connectedPost);
    };
  }

var post18= new Fencepost(-3,4,18); 
var post19= new Fencepost(5,-1,19); 
var post20= new Fencepost(-2,10,20); 
// create post18, post19, and post20
// establish post connections
post18.sendRopeTo(post20) ;
post20.sendRopeTo(post18) ; 
post18.sendRopeTo(post19) ; 

post19.sendRopeTo(post18) ; 

-------------------------------------------------------------------


function Fencepost(x, y, postNum) {
  this.x = x;
  this.y = y;
  this.postNum = postNum;
  this.connectionsTo = [];
  }


Fencepost.prototype ={
  sendRopeTo : function(connectedPost) {
    this.connectionsTo.push(connectedPost);
  };
  removeRope : function(removeTo) {
    var temp = [];
    for (var i = 0; i < this.connectionsTo.length; i++) {
      if (this.connectionsTo[i].postNum != removeTo) {
        temp.push(this.connectionsTo[i]);
      }
    }
    this.connectionsTo = temp;
  };
 movePost : function(x, y) {
    this.x = x;
    this.y = y;
  };

-------------------------------------------------------------------

OVER RIDING OBJECT PROTOTYPE PROPERTIES 








































}


Overriding valueof

Fencepost.prototype.valueOf = function(){
return Math.sqrt(this.x*this.x + this.y*this.y);  

};



function Fencepost(x, y, postNum) {
  this.x = x;
  this.y = y;
  this.postNum = postNum;
  this.connectionsTo = [];
}

Fencepost.prototype = {
  sendRopeTo: function(connectedPost) {
    this.connectionsTo.push(connectedPost);
  },
  removeRope: function(removeTo) {
    var temp = [];
    for (var i = 0; i < this.connectionsTo.length; i++) {
      if (this.connectionsTo[i].postNum != removeTo) {
        temp.push(this.connectionsTo[i]);
      }
    }
    this.connectionsTo = temp;
  },
  movePost: function(x, y) {
    this.x = x;
    this.y = y;
  },
  valueOf: function() {
  return Math.sqrt(this.x * this.x +
                   this.y * this.y);
  }
};
Fencepost.prototype.toString = function() {
  var list = "";
  for (var i = 0; i < this.connectionsTo.length; i++) {
    list += this.connectionsTo[i].postNum + "\n";
  }
  return "Fence post #" + this.postNum + ":\n" +
         "Connected to posts:\n" + list +
         "Distance from ranch: " + this.valueOf() + " yards";
};
// override the toString method















No comments:

Post a Comment