prototype, this

Question

Hello! if you look at the code below, you will see that the values for the object are passed in the constructor function, and that 'this' is reference not in the constructor function. I wonder if people use prototypes, call, and apply a lot in the real world.

Sorry if this message appears multiple times, the system is giving me problems

THanks

<!doctype html>
<html lang="en">
<head>

  <script>
    window.onload = init;

    function Person( name, job, likes) {

      this.name = name;
      this.job = job;
      this.likes = likes;


    }

    function init() {
      var annie = new Person("Annie", 'cook', [" dancing", " singing"]);


      var div = document.getElementById("show");
      div.innerHTML = annie.name + " is a " + annie.job + ". She likes " + annie.likes;


    }

</script>
</head>
<body>
<h1>about Annie</h1>
  <div id="show">
  </div>       
</body>
</html>

Answer 1 · 2014-05-31T19:59:27Z

May 31, 2014 7:59pm

Prototypes are an integral part of JavaScript. All of so-called object-oriented features of JavaScript couldn't be possible without them.

Because JavaScript really doesn't have classes, both Function.prototype.apply() and Function.prototype.call() (and more recently Function.prototype.bind()) are very important mechanisms.

In class-based object-oriented programming languages, objects are created according to blueprint called a class.

In JavaScript, you can create an object using a literal expressions, without any need for a class. In fact, as I mentioned, JavaScript doesn't have them.

To establish some of object-oriented programming patterns like inheritance, prototypes are crucial because objects can inherit from each other by being linked to each other through prototype properties.

Through the usage of call(), apply() and bind(), generic functions can be made to act as methods on objects, even if those objects don't actually have that particular method.

The this mechanism is also important here, although it's a bit more complex. The value that this points at (what this is bound to) changes depending on where it is used.

When talking about objects, three binding mechanisms of this are important: implicit binding (when this is used in a method on an object), explicit binding (when this is bound to an object through call(), apply() or bind()) and the new binding (when an object is created through a constructor call of a function).

These concepts may seem complicated and maybe even academic at first, but in reality, all these features are a very important and often used part of the language.

Answer 2 · 2014-06-01T04:47:00Z

June 1, 2014 4:47am

OMG, that is so well explained, thank you so much Dino. Anyway, as I was reading your explanation of 'this' something came to mind. It is a bit advanced, but I think I can handle it. You said that the value of this can change depending on where it is used. I would like to shift the focus to event handlers.

Lets say I am calling an anonymous function on an object that has a mouseover event attached to it, a little something like this:

var get = document.getElementsByTagName("link"); get.onmouseover = function(event){ var links= this; }

This event is taken place on a link. I understand this paremeter 'event' in in the anonymous function, refers to the event itself , 'mouseover', in fact it is not needed for this question, but just to give you more background info leading to my question.

As for 'this', when I do a console.log(this), it shows the entire link, for ex: like this: <a href="http://www.w3schools.com">Javascript</a>

When handling events on an object ( var get), should I take it that the value of 'this' will always refer to the given html element that the event is being performed on?

Thank you!!!

Welcome to the Treehouse Community

Looking to learn something new?

orange sky

orange sky

prototype, this

2 Answers

Dino Paškvan

Dino Paškvan

orange sky

orange sky