New terms from treehouse – Javascript Foundations Part 3 – Functions and Objects

Functions

Arguments

functions are a way to store code for later. Here’s the basic syntax. You start with the JS keyword function, then give it a name, which should be descriptive of what the function is/does. You can name a function using the same rules we used for naming variables. Next, in parentheses you’ll specify the parameters/arguments that the function can take, that will be variables passed in to let us change the behavior of our function each time we call it. If you leave this blank, it just means it takes no arguments. Finally, the curly braces mark the start and end of the function body.

Screen Shot 2014-07-31 at 4.01.04 PM

Now, to call a function, you put parentheses after it. This is also where you would pop in any arguments, if needed. Notice how if you don’t write the parentheses, it doesn’t call the function, but instead just displays it.

Screen Shot 2014-07-31 at 4.02.39 PM

The undefined comes from the console giving us the value of the previous expression given. Every time we call a function, some kind of value is evaluated from it.

Now, we can call this function in our code whenever and however often it’s needed.

Screen Shot 2014-07-31 at 4.05.40 PM Screen Shot 2014-07-31 at 4.06.03 PM

Now, let’s say we wanted this to say a different name each time we called it. That’s what arguments are for. They’re defined in the parentheses after the function name, and are named like normal variables. We’ll call this one name and add it in.

Screen Shot 2014-07-31 at 4.09.26 PM Screen Shot 2014-07-31 at 4.09.30 PM

The undefined’s are because we never defined the name for the argument.  We can fix that by putting something in the parentheses of the function calls.

Screen Shot 2014-07-31 at 4.12.03 PM Screen Shot 2014-07-31 at 4.12.09 PM

We can create as many arguments as needed, just separate them by commas.

Screen Shot 2014-07-31 at 4.13.30 PM Screen Shot 2014-07-31 at 4.13.35 PM

Once again, it’s coming up undefined because we didn’t define the argument in the function.

Screen Shot 2014-07-31 at 4.14.58 PM Screen Shot 2014-07-31 at 4.15.03 PM

If you pass in more values than there are arguments, it will pretty much ignore it. If you call too few, it will set whatever arguments don’t have a value to undefined. What if you didn’t want to pass in a greeting argument? In this case we’ll use an if block. I did it this way, they did it a slightly different way that’s better imo.

Screen Shot 2014-07-31 at 4.20.15 PM Screen Shot 2014-07-31 at 4.20.19 PM

Screen Shot 2014-07-31 at 4.22.01 PM Screen Shot 2014-07-31 at 4.21.57 PM


Return Values

While arguments may be the input to the function, there’s also an output to a function call – the return value. This is the value the function will evaluate to when called. In the example below, we called the sayHello function. The undefined in grey below with the arrow pointed left is the return value for the sayHello function we called. It’s undefined because we did not provide a return value.

Screen Shot 2014-07-31 at 4.36.25 PM

You can define that using the return keyword, then providing a value.

Screen Shot 2014-07-31 at 4.39.09 PM Screen Shot 2014-07-31 at 4.38.56 PM

Or, maybe you don’t want to provide a return value. If you just write return, it will give you undefined again, which is no different than not writing return at all. So, writing that wouldn’t make much sense.

Return values are good when you want it to return something you want to use later. In the example below, we return the length of the value entered for the name argument. So, the return value is dependent on the name being passed in.

Screen Shot 2014-07-31 at 4.43.35 PM Screen Shot 2014-07-31 at 4.43.30 PM

Another thing to note: any code entered after the return call in a function will not be executed. So the console.log entered below after return won’t appear.

Screen Shot 2014-07-31 at 4.46.39 PM Screen Shot 2014-07-31 at 4.46.54 PM

For our function, greeting is optional, but we don’t want name to be because we need it for our return value. If it is blank we get this error, because it’s trying to call the length of undefined.

Screen Shot 2014-07-31 at 4.48.51 PM

So, we’ll use an if block again, and make it so that if an name isn’t entered, and therefore is undefined, we’ll just return 0 and not do any of the rest of the code.

Screen Shot 2014-07-31 at 4.52.00 PM Screen Shot 2014-07-31 at 4.52.35 PM


Scope

Let say we define a variable called color. Then, in a function we define a new variable with the same name, in which we then console.log to see what the value for color is. We end up getting green. This is because we created the second variable in a new scope, which is a new namespace for the variable. If we create a variable in a function, it will not collide with anything in a higher scope, like within the global scope for instance.

Screen Shot 2014-08-01 at 12.50.26 PM Screen Shot 2014-07-31 at 4.52.35 PM

So, the second color variable does not interact with the first in any way. As shown below when we console.log outside of the function.

Screen Shot 2014-08-01 at 12.53.52 PM Screen Shot 2014-08-01 at 12.54.46 PM

Screen Shot 2014-08-01 at 12.56.13 PM Screen Shot 2014-08-01 at 12.56.10 PM

So if you’re in a function, can you reach variables at a higher scope? Yep!

Screen Shot 2014-08-01 at 12.56.13 PM Screen Shot 2014-08-01 at 12.56.10 PM

But what if we wanted to reach the global color variable from within our function, after we defined a new variable color in our function? It’s actually pretty tough to do. Essentially we’ve shadowed the variable by creating a two variables at different scopes with the same name. Avoid this by not giving variables at different scopes the same name.

What if you’re in a function and want to modify a variable at a higher scope, like number here? You can, and it will update the global scoped variable.

Screen Shot 2014-08-01 at 1.02.27 PM Screen Shot 2014-08-01 at 1.02.23 PM

This may be a problem – you’re no longer defining a new variable called number. Instead you’er setting a new value for the global scoped one already created, which can lead to issues and be confusing to debug. So, make sure to include the var keyword, or avoid shadowing your variables altogether.

Now, what if you were to write a variable name and set it to a value, never having used the var keyword, like with shape below?

Screen Shot 2014-08-01 at 1.07.15 PM Screen Shot 2014-08-01 at 1.07.19 PM

In this case, because JS didn’t know what level to define the variable, it created a global variable called shape, and sets its value to “square”. This is kind of bad because what it’s doing isn’t obvious, which can lead to some bugs. If we were to put a var keyword before it, it would change this and only create the variable for that function’s scope level, giving us the expected undefined error when we try to call it globally.

Screen Shot 2014-08-01 at 1.11.19 PM Screen Shot 2014-08-01 at 1.11.11 PM

So, each function creates a brand new scope.


Anonymous functions

You can define functions without names. These are called anonymous functions. Below, we see a function made using the named function syntax. It’s name myFunction acts as a variable that is storing code and can be called by its name when needed.

Screen Shot 2014-08-01 at 1.14.50 PM

There’s a different way we could do this though, by defining a variable and setting it equal to a function. It works exactly the same. However, this is called an anonymous function, a function without a name.

Screen Shot 2014-08-01 at 1.19.54 PM Screen Shot 2014-08-01 at 1.19.49 PM

Let’s say we wanted to create an anonymous function that called a function twice. The argument will be the function being called, and we’ll call it twice within this new function.

Screen Shot 2014-08-01 at 1.25.35 PM

Now, when we pass in the variable into this second function, we DON’T want to include the parentheses because that would actually pass the function (myFunction)’s return value into the second variable callTwice, which we do not want.

Screen Shot 2014-08-01 at 1.28.15 PM

Instead, we don’t include the parentheses there, and they are instead added in CallTwice’s code.

Screen Shot 2014-08-01 at 1.28.34 PM Screen Shot 2014-08-01 at 1.28.29 PM

Had we used the named function syntax, it would work exactly the same.

Screen Shot 2014-08-01 at 1.31.29 PM Screen Shot 2014-08-01 at 1.31.35 PM

So why use a named function over an anonymous one? Let’s say we had an undeclared variable in our myFunction function. We’d get an error as expected, and in the console it would tell us what line it’s on, and if you click on it it actually shows you in the code.

Screen Shot 2014-08-01 at 1.35.49 PMScreen Shot 2014-08-01 at 1.35.57 PM

Screen Shot 2014-08-01 at 1.36.40 PM

But sometimes that’s not enough. If we called myFunction multiple times, sometimes we want to see which instance raised that error. If you click the little triangle to the left of the error it will open what’s called the call stack, which starting at the top is the closest it actually got called. since the error happened in myFunction, it appears at the top. Next we see callTwice, which called it, then the anonymous function on line 23, which put the whole thing into motion. So it lists it with the top being most recent, and the bottom being least recent.

Screen Shot 2014-08-01 at 1.39.35 PM

Now, if you use an anonymous function rather than the named function syntax like below, some older browser wouldn’t know the name for the first line of the call stack. This shouldn’t be an issue in chrome and other modern browsers now though.

Screen Shot 2014-08-01 at 2.06.49 PMScreen Shot 2014-08-01 at 2.06.52 PM

Now, you can use an anonymous function without storing it into a variable. Sometimes you only need to use it one time.

Screen Shot 2014-08-01 at 2.09.36 PM Screen Shot 2014-08-01 at 2.09.29 PM

Now, what if we put the undeclaredVariable in there? We can see now the call stack is slightly less helpful. It can’t give us a name for the first line of the call stack, because there is none, it’s anonymous.

Screen Shot 2014-08-01 at 2.11.00 PM Screen Shot 2014-08-01 at 2.10.34 PM

If we give it a name using the namedFunction syntax, it will tell us in the call stack.Screen Shot 2014-08-01 at 2.13.01 PMScreen Shot 2014-08-01 at 2.13.15 PM

In this case, since we never planned on using it again and we’re only using it inside this one function, you don’t really have to give it a name. However, if this was being passed to several other functions, then things could get confusing when debugging.

Remember that functions create their own scope, and in JS that’s the only way to do that. A self executing anonymous function is when you create a function and call it immediately. Let’s create a function and call it immediately:

Screen Shot 2014-08-01 at 2.19.20 PM

Another way to do this is to wrap it in parentheses, which will not act as a function call but rather a mathematical expression, and will evaluate to whatever the value inside is. Here, they evaluate to the anonymous function object inside, and we can call it immediately with another set of parentheses, which are function execution parentheses, which also means they can take arguments.

Screen Shot 2014-08-01 at 2.24.20 PM Screen Shot 2014-08-01 at 2.24.06 PM

The benefit of this is because you can create all the variables you want, do all the things you need in the function, without having to worry about the variables being leaked to the global scope and being accessible by other code.


Examples

The browser code that we use to interact with a page,even though we interact with it through JavaScript, is a completely different subject than JS the language we’ve been learning.It differs for each browser, which is what can make JS so difficult. The Document Object Model (DOM) is the interface our code can use to interact with the web page. It’s how we would change a style or the contents of a div, for instance.

jQuery is a JS library that’s been written to take into account all of the differences between browsers and provide useful and easy to use functions to manipulate the page. It makes things way easier than the examples we’re about to do.

Let’s say we want to create an object that holds the button on our page. document isn’t part of the JS language but it is part of the JS DOM, which is the environment you’ll be using JS inside the browser. It’s highlighted bc JS recognizes it as part of the DOM. .getElementById is a common method exposed to us by the browser. Since it’s a method, we’ll use parentheses to call it. Just like a normal function, we pass the value of the id of the element we want to get. Once we do that, we’ve stored the button element on the page into our button variable.

Screen Shot 2014-08-01 at 2.39.37 PM

However, if we try calling the variable now we get null, because we didn’t actually store it in there yet.

Screen Shot 2014-08-01 at 2.40.32 PM

The reason for this is the placement of the link to the js file in our html. As soon as it gets to that line, 15 in this case, it runs that code. Since it comes before the button element in the markup, it can’t find it.

Screen Shot 2014-08-01 at 2.42.04 PM

To fix this, just put the script at the bottom.

Screen Shot 2014-08-01 at 2.42.41 PM

Now, when we call the variable it display the html for that element. If you mouse over it, it will show you where it is on the page.

Screen Shot 2014-08-01 at 2.44.15 PM

Now let’s do some stuff. To make something happen when they click the button, you can use .onclick, which sets a property on the button, in this case a function. So, whenever the button is clicked, it runs the function. NOTE: this is old and not the best way to do this.

Screen Shot 2014-08-01 at 2.48.27 PM Screen Shot 2014-08-01 at 2.48.33 PM

 

But what if we wanted two things to happen when we call onclick? If you try just writing it twice it doesn’t work. This is because onclick can only hold one thing.

Screen Shot 2014-08-01 at 2.50.29 PM Screen Shot 2014-08-01 at 2.50.37 PM

A better way to do this is with the method addEventListener. NOTE: it doesn’t work in IE. It takes a few arguments, the first is the event we want to listen for, in this case click, a special event keyword. The second is the function to be called. You can see now both things work, because addEventListener doesn’t interact with onclick at all.

Screen Shot 2014-08-01 at 2.53.59 PM Screen Shot 2014-08-01 at 2.54.05 PM

However, you can use as many addEventListener’s as you’d like, which is preferable here.

Screen Shot 2014-08-01 at 2.55.36 PM Screen Shot 2014-08-01 at 2.55.18 PM

We can also make it interact with the other DOM element, input, and change its value attribute with the setAttribute method.

Screen Shot 2014-08-01 at 2.57.14 PM Screen Shot 2014-08-01 at 2.57.20 PM


Objects

The object is one of the core foundations of JS. It is simply a data type that associates string “keys” and values. First you declare a variable, then you create the object with curly braces, then you have key value pairs, separated by colons. { “key”: “value” }. We can access a value by doing .keyname after the objects name.

Screen Shot 2014-08-01 at 5.09.25 PM Screen Shot 2014-08-01 at 5.09.22 PM

You can assign new values to your keys by doing objectname.keyname = new value.

Screen Shot 2014-08-01 at 5.11.19 PM

So, these keys and values are like variables, only they’re associated with an object.

You can have multiple key value pairs by separating them with a comma. The values don’t have to be strings, they can be anything you can store in a variable, like an array for instance.

Screen Shot 2014-08-01 at 5.14.48 PM Screen Shot 2014-08-01 at 5.14.43 PM

And once again you can change the value for the key.

Screen Shot 2014-08-01 at 5.16.13 PM

The best way to write these is with each key value pair on its own line.

Screen Shot 2014-08-01 at 5.17.28 PM

So long as your key names are valid variable names, you don’t actually need the quotes, though it may be safer with them. If the key name has a space, then you do need the quotes.

Screen Shot 2014-08-01 at 5.20.38 PM

But then how do we access that? We can’t do kyle.favorite color, but there is another way to specify the key we want to set on an object, with square brackets.

Screen Shot 2014-08-01 at 5.22.26 PM Screen Shot 2014-08-01 at 5.22.23 PM

You can use this to assign to the value as well.

Screen Shot 2014-08-01 at 5.24.19 PM


Object Methods

We can create functions on our objects to create methods. You can add a function as a key’s value, just like any other value, then since it’s a method, you call it with parentheses.

Screen Shot 2014-08-01 at 5.28.12 PM Screen Shot 2014-08-01 at 5.28.18 PM

We see this all the time with console.log. console is an object, and log is a key on it that stores a function. What we put in the parentheses is the argument passed to it. A method is a function that is a property of an object. Normally, greet() above would be considered a function, but because it is associated with the object kyle, we consider it a method on the object kyle.

Now, what if we want the “Hello I am Kyle” part of the greet method to pull what’s been entered in the name key, so it auto updates if that key changes? You can do this with kyle.name. Note that we concatenated the two with the + operator.

Screen Shot 2014-08-01 at 5.35.28 PM Screen Shot 2014-08-01 at 5.36.26 PM

But even that might not be good. What if we wanted to make another object for another person? We’d have to change it to nick.name in the function.

Screen Shot 2014-08-01 at 5.44.27 PM

Ideally we’d have the same method for both, relative to the person we’re talking about. We’ll do this by creating an argument “person”, and then calling the name for that argument in our function. Then, we simply pass the name we need into the method.

Screen Shot 2014-08-01 at 5.47.35 PM Screen Shot 2014-08-01 at 5.47.45 PM

Once again, this isn’t ideal. JS provides us a special kind of variable, that acts like one but technically isn’t one. It’s called this. So, instead of using person, we’ll use this.

Screen Shot 2014-08-01 at 5.51.05 PM Screen Shot 2014-08-01 at 5.51.12 PM

Now, since the methods are the same for both, we could even just have the second greet’s value be kyle.greet. Notice we leave off the parentheses, because we don’t want to call it, we just want the code.

Screen Shot 2014-08-01 at 5.52.50 PM Screen Shot 2014-08-01 at 5.52.57 PM

It works because this is always bound to the value at the very last second. This is special because it’s given its value not when we write our method, but when we call our method.

But, what happens when we try to take the greet method and store it into a variable? It won’t display the name, because we’re calling it as a normal function, and not as a property of Kyle. So, this.keyname only works when it’s within the object.

Screen Shot 2014-08-01 at 5.57.33 PM Screen Shot 2014-08-01 at 5.57.37 PM

So what does this look like outside of an object? this actually refers to the global object, known as window, and adds it as a property to it. Anytime you create a global variable, it actually gets added to the global object as a property. So if we do window.kyle, it shows us the object we made earlier. So for the whatIsThis function, this.name is calling the name property of the window object. window actually has a name property, and it is an empty string, which explains why it was blank above.

Screen Shot 2014-08-01 at 6.18.05 PM Screen Shot 2014-08-01 at 6.17.59 PM

But what if we change window.name, by setting a variable called name and giving it a value? It would work. window.name would now be that value, and the kyleGreet function would use that.

Screen Shot 2014-08-01 at 6.19.54 PM

So this can be dangerous. If we call our method in the incorrect way and use this outside of an object, we might accidentally write to the global namespace, which is hard to debug. So, this should only be used within a method (aka a function) in an object, not within a normal function.


Call and Apply Methods

The call and apply methods let you control the value of this.

As we saw above with the variable kyleGreet, as soon as we store a method of an object into a variable, we lose the reference to that object when using this. This results in it being bound to the global window variable. So how do we call a function as though it were a method on an object? We want kyleGreet to be called with the context of the original kyle object.

Screen Shot 2014-08-04 at 5.37.41 PM Screen Shot 2014-08-04 at 5.38.26 PM

We can do that with a special method built onto all JS functions called call. To use it, instead of invoking the function with parentheses, you use the .call method, because a function is actually an object, meaning it has its own key value properties. When you use it, it actually invokes itself. So when you do kyleGreet.call(), it just invokes the function like you’d expect. However, it differs than normally invoking a function, is it takes an extra argument at the beginning of the method call, which is what value should be bound to this in the invocation of this function.

Since we want this to be bound to the object kyle, we’ll pass in kyle.

Screen Shot 2014-08-04 at 5.38.06 PM Screen Shot 2014-08-04 at 5.38.36 PM

This is great, because we can change what we’re referencing on the fly. If we want this to reference nick object instead, we just have to type that in. Or if we pass an empty object, it will give us undefined, because obviously it doesn’t have any keys or values.

Screen Shot 2014-08-04 at 5.41.23 PM Screen Shot 2014-08-04 at 5.41.18 PM

You could even define the object and key value pair right within the argument.

Screen Shot 2014-08-04 at 5.43.02 PM Screen Shot 2014-08-04 at 5.42.58 PM

Also, since call is a method for all objects you could do this. You have the object kyle, and you’re getting what’s in the greet key for that object, which is the function, and since that’s a function you’re calling it with .call, and using the argument to say you actually want to pull from the nick object.

Screen Shot 2014-08-04 at 5.46.14 PM Screen Shot 2014-08-04 at 5.45.58 PM

apply is another method built in to all functions, but differs in how it takes arguments. Let’s modify our function in the kyle object so it takes arguments now. We added two parameters it takes, first is the person you’re greeting, the second our current mood. The || means “or” in JS. So, we’re saying name equals name, which means you put something in there for it it will equal true, and therefore what you put in, or, if you didn’t, name won’t equal anything and will be false, and will therefore be undefined. If that’s the case, it will default to “You”. So we’re saying if this is false, provide this default value. This makes these values optional to enter.

Screen Shot 2014-08-04 at 5.54.07 PM Screen Shot 2014-08-04 at 5.54.43 PM

We can now pass in values like we would for any function.

Screen Shot 2014-08-04 at 5.56.34 PM Screen Shot 2014-08-04 at 5.56.38 PM

For the call method you can just pass in the arguments after the first argument, which is the context of the object you want to reference.

Screen Shot 2014-08-04 at 5.58.53 PM Screen Shot 2014-08-04 at 5.58.57 PM

For the apply method, the first argument is still the context of the object you want to reference, but instead of listing the arguments after with spaces and commas, you do it as an array. So it takes two arguments – the context, then the array of arguments for the function.

Screen Shot 2014-08-04 at 6.01.07 PM Screen Shot 2014-08-04 at 6.01.03 PM

They may seem the same, but apply gives you a useful, dynamic way to call functions. Lets say you needed to call a function with a variable number of arguments, but you’re not sure how many of those there will be. If we tried the example below it wouldn’t work right.

Screen Shot 2014-08-04 at 6.04.23 PM

But, if we did it with apply, it would be expecting an array so it would. We;d just have to make sure to include the object context in the first argument.

Screen Shot 2014-08-04 at 6.05.30 PM Screen Shot 2014-08-04 at 6.05.36 PM


Prototypes 1

Prototypes let us organize our code so objects can share info easier. The greet method we made under the kyle object can be used for any of the other object because this waits until the exact moment its invoked to reference it’s object. We took advantage of this by doing greet: kyle.greet under the nick object. But that and a  lot of the other keys overlapped a bit. It’d be easier if we could just create a generic person object, and just change what we need to from person to person.

This is the foundation of how JS works, and lets us do Object Oriented Programing, which is programming based around creating and using objects. Note that this is different than classic object oriented programming, which other languages use.

You start by creating a prototype object, like personPrototype below, then copy that and just override what you need to. JS has prototypal inheritance, where it will inherit keys from the prototype. You start by creating a constructor function, which is a special function for creating and initializing a new object. It’s good to give it a name starting with a capital letter, as that will clarify what this function is and how it works.

Screen Shot 2014-08-04 at 6.36.43 PM

New we say the new person’s name equals the keyword new, then the Person constructor function, where we pass in the argument we want to change. new actually changes what this is. It creates a new object for us, and binds this to it inside of our constructor function.

Screen Shot 2014-08-04 at 6.39.40 PM

Another special property of this constructor function when you use new, which is what triggers all of this, is that it returns this if we don’t return anything.

Screen Shot 2014-08-04 at 6.42.11 PM

But what is we call jim without the “return this”? We get the name key and value, but not the greet method or species. For jim.greet() it says undefined is not a function because there is not greet key for the jim object at this time.

Screen Shot 2014-08-04 at 6.44.05 PM Screen Shot 2014-08-04 at 6.44.01 PM

Like call and apply, there is another special property on functions called the prototype, which is itself just an object. You call it on the constructor function, then set it equal to the object that’s your prototype. This makes everything fall into place. It updates the key specified in the constructor function, and inherits the rest from the prototype we set up before.

Screen Shot 2014-08-04 at 6.48.17 PM Screen Shot 2014-08-04 at 6.48.30 PM


Prototypes 2

Doing this changes this in the constructor function in a special way. Instead of just being an object, it now has a property that lets it know what its prototype is. To see this, let’s call our new object jim in the console. We can see it has a secret link to our prototype object defined in the constructor method.

Screen Shot 2014-08-04 at 9.00.22 PM

So if we call jim.name, it looks for the name key on the object jim. But, if we call jim.greet, jim doesn’t have any key called greet, but it does have its secret pointer to a prototype that does contain greet. When we call jim.greet, it sees that jim doesn’t have it, so it checks the prototype to see if that has it, and if it does, it returns that instead.

Screen Shot 2014-08-04 at 9.04.59 PM

prototype actually has another special prototype, which is the base Object, which in turn has a few methods defined on itself. This is methods like toString() are defined for everything, because everything eventually links back to this Object. It’s like a chain, we have the object jim, which points to the prototype that made it, which in turn points to the base object.

Screen Shot 2014-08-04 at 9.06.13 PM

So what happened in our code to do this? When we called new, what actually happens is it takes the prototype value of the function we’re calling(Person), and creates a new object based on that prototype. By default it’s just an object that points to Person.prototype. Next, it gives that object to the value this, which let’s you start assigning things to it.

Screen Shot 2014-08-04 at 9.10.03 PM

Now, this only affects things at the top level, so in this case jim and NOT the personPrototype, which is good because you wouldn’t want each new object created from the prototype to affect it, because that would mess us other objects created by the prototype. When looking for keys, JS starts at the top and works its way down, so it would first look for species under the jim object, and if it didn’t find it it, it would go to the prototype.

Note that when you look up jim there are two names listed, but his is higher up so that’s what is used.

Screen Shot 2014-08-04 at 9.14.02 PM

So, now we can create multiple people off the same prototype.

Screen Shot 2014-08-04 at 9.15.08 PM Screen Shot 2014-08-04 at 9.14.02 PM

We can change values too for individual people, without affecting the prototype. nick now has species defined on the object itself, so it doesn’t have to pull it from the prototype.

Screen Shot 2014-08-04 at 9.18.05 PM

Now, personPrototype is just an object like any other, so what happens if we assign to it directly? Like what if we wanted to change species for all people at once? We can do that. This is because the nick and jim objects are linking to the prototype each time one of those keys is called, so it will just use the new value.

Screen Shot 2014-08-04 at 9.18.05 PM

It’s a live pointer. We could even add new keys and values to it. Note, in the example below I’m using Person.prototype, but I could have just as well used personPrototype, because they’re the same thing.

Screen Shot 2014-08-04 at 9.23.14 PM

So what happens if you forget to use the new keyword? jim will be undefined, and it won’t work. this actually calls window.name, which as we saw is undefined. Constructor functions always start with a capital letter, because it reminds you to use new.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s