Return to Video

Object Types (Video Version)

  • 0:01 - 0:03
    Now that you understand
    the basics of Javascript,
  • 0:03 - 0:06
    I want to teach you
    about a cool way of using Javascript,
  • 0:06 - 0:10
    something we call
    "object-oriented programming."
  • 0:10 - 0:12
    But first we need
    to understand why it's actually useful.
  • 0:12 - 0:16
    So I put together a program
    that will be better once we make it
  • 0:16 - 0:17
    more object-oriented.
  • 0:17 - 0:20
    Now, it's a pretty cool program
    to start with.
  • 0:20 - 0:24
    At the top, I have two variables
    that store simple object literals inside.
  • 0:24 - 0:28
    Now, the object literal is a kind
    of object we learned about before,
  • 0:29 - 0:31
    that we create with two curly braces
  • 0:31 - 0:33
    and then we put all these property names
    and values inside.
  • 0:34 - 0:37
    So we have two of those object
    literal variables, and then down here
  • 0:37 - 0:41
    we have this function drawWinston
    which expects a single argument,
  • 0:41 - 0:45
    and then it draws the argument,
    it draws an image based on the x
  • 0:45 - 0:48
    and y properties of the object
  • 0:48 - 0:53
    and then a caption based on the nickname
    and age properties of that object.
  • 0:53 - 0:56
    And now finally at the bottom,
    we call drawWinston
  • 0:56 - 0:57
    on the teen and on the adult,
  • 0:57 - 1:00
    and that's what makes it show up.
  • 1:01 - 1:06
    Pretty cool. Now, if we go up here,
    and we look at these object literals,
  • 1:06 - 1:11
    notice something about them is
    that they're really similar-looking.
  • 1:11 - 1:16
    Both of them have the same sets
    of properties and both of them can be used
  • 1:16 - 1:17
    by this same drawWinston function.
  • 1:18 - 1:22
    In fact, you know, if you think
    about this, they're really both describing
  • 1:22 - 1:24
    a type of Winston, right?
  • 1:24 - 1:29
    And we can think like maybe there's
    this abstract type of Winston in the world
  • 1:29 - 1:33
    and every Winston has the same set
    of properties like a nickname
  • 1:33 - 1:37
    and an age and an x and a y and here,
  • 1:37 - 1:42
    what we've done is we've just created
    two instances of a Winston
  • 1:42 - 1:45
    to describe a particular Winston.
  • 1:45 - 1:48
    So this is a teenage Winston
    and this is an adult Winston.
  • 1:48 - 1:53
    But they're really, they're really
    both quite similar and there's a lot
  • 1:53 - 1:55
    of things that are similar about them.
  • 1:55 - 1:58
    And if you think about it, that's a lot
    the way the world works too,
  • 1:58 - 2:01
    is that we have these abstract data types
    like humans and people
  • 2:01 - 2:04
    and then we're all just specific
    instances of those
  • 2:04 - 2:06
    with our own little properties.
  • 2:06 - 2:10
    Now, we can actually use
    object-oriented techniques in Javascript
  • 2:10 - 2:17
    so that these Winston variables
    are formal instances of a Winston object,
  • 2:18 - 2:22
    so that they know that they share
    these things in common.
  • 2:22 - 2:25
    So, to do that, the first thing we need
    to do is actually describe
  • 2:25 - 2:30
    this abstract datatype Winston,
    and so we'll do that by making a variable.
  • 2:30 - 2:35
    You will store the datatype in a variable
    so var Winston, and we'll do capital W
  • 2:35 - 2:39
    because we always start
    our object types with a capital,
  • 2:39 - 2:42
    and we'll set it equal to a function.
  • 2:42 - 2:47
    And this function is a special function
    that we call a "constructor function"
  • 2:47 - 2:49
    because this is what's going to get called
    every time we want
  • 2:49 - 2:52
    to create a new Winston instance.
  • 2:52 - 2:55
    So when we want to create a teenage
    Winston, we'll call this function
  • 2:55 - 2:58
    or an adultWinston,
    we'll call this function.
  • 2:58 - 3:03
    So that means that this function
    should take whatever arguments it needs
  • 3:03 - 3:06
    to know about in order
    to make a full Winston.
  • 3:06 - 3:10
    So in this case it needs to know
    a nickname, an age, an x and a y.
  • 3:11 - 3:15
    Now, once we've received those arguments
    we need to do something with them,
  • 3:15 - 3:21
    so we need to actually attach
    that information to the Winston object.
  • 3:21 - 3:27
    So we'll use a new special keyword,
    called "this". And "this" will refer
  • 3:27 - 3:29
    to the current object instance.
  • 3:29 - 3:32
    So we'll say this.nickname,
    so it'll say all right,
  • 3:32 - 3:34
    the nickname property
    of this object is equal to
  • 3:34 - 3:38
    whatever gets passed
    into the constructor function, okay?
  • 3:38 - 3:42
    And this.age is equal to the age
    that gets passed in, this.x is equal
  • 3:42 - 3:44
    to the x that gets passed in,
  • 3:44 - 3:47
    and this.y equals the y
    that gets passed in.
  • 3:47 - 3:53
    All right, so now we have
    this abstract datatype called Winston,
  • 3:53 - 3:56
    and it has a constructor function
    that we can use to create a new Winston.
  • 3:56 - 3:59
    So let's try to use it!
  • 3:59 - 4:03
    We're going to create winstonTeen again,
    but this time we're going
  • 4:03 - 4:05
    to say winstonTeen equals,
  • 4:05 - 4:10
    and instead of curly braces,
    we're gonna say "equals new Winston".
  • 4:11 - 4:14
    So we're saying "we're trying
    to create a new Winston instance,"
  • 4:14 - 4:16
    and then we're going to pass
    in the information that it needs
  • 4:16 - 4:21
    so "Winsteen", 15, 20, 50, okay?
  • 4:22 - 4:26
    And then we can delete this old one
    because we don't need it anymore.
  • 4:26 - 4:30
    All right? And now that's
    created a new Winsteen.
  • 4:31 - 4:36
    And now we can say
    winstonAdult = new Winston()
  • 4:36 - 4:40
    and of course his name is
    "Mr. Winst-a-lot", sweet name,
  • 4:40 - 4:45
    and he's 30, and he's at 229 and 50.
    All right? And then we can delete
  • 4:45 - 4:50
    this object literal,
    and, tada! Our code still works.
  • 4:51 - 4:54
    So what we've done here
    is that we've said okay there's this,
  • 4:54 - 4:57
    this kind of abstract type
    of data which is this Winston
  • 4:58 - 5:03
    and we can create new Winston instances
    that have these properties
  • 5:03 - 5:05
    that are unique to them,
  • 5:05 - 5:09
    and we'll just remember
    those properties inside them.
  • 5:09 - 5:12
    And remembering is really important.
    So you know inside here,
  • 5:12 - 5:14
    we have this.nickname, this.age.
  • 5:14 - 5:20
    If we accidentally didn't have this age,
    notice that now it says "undefined."
  • 5:20 - 5:23
    That's because down here,
    this drawWinston function,
  • 5:23 - 5:28
    it expects whatever object gets passed in
    it expects it to have an age property.
  • 5:28 - 5:31
    And if we didn't say this.age,
  • 5:31 - 5:34
    then it doesn't have an age property.
    We passed it to the construction function
  • 5:34 - 5:37
    but then we didn't do anything with it,
    we have to actually attach it
  • 5:37 - 5:39
    to the object using "this" keyword.
  • 5:40 - 5:42
    So we'll add this back.
  • 5:42 - 5:45
    Now you might be thinking
    like sure, you got your code working
  • 5:45 - 5:50
    but, you know, we're... all we've done is
    accomplished what we had before.
  • 5:50 - 5:54
    But here's the cool thing.
    Now, all of our Winstons go
  • 5:54 - 5:56
    through the same constructor function.
  • 5:56 - 6:00
    So if we want to, we can actually
    change things, change some things
  • 6:00 - 6:01
    about the Winston...
  • 6:01 - 6:04
    all the Winstons, just inside here.
    So maybe age, we actually want
  • 6:04 - 6:06
    to say "years old."
  • 6:06 - 6:10
    We can just put that here,
    and now all of our Winstons say
  • 6:10 - 6:13
    "15 years old," "30 years old," right?
  • 6:13 - 6:15
    So they're taking the part
    that's unique about them,
  • 6:15 - 6:17
    but then they also have things
    that are shared about them.
  • 6:17 - 6:20
    And that's a really cool thing
    about object-oriented programming
  • 6:20 - 6:22
    is this idea that there's
    these kinds of objects
  • 6:22 - 6:26
    in the world, and you can actually
    create instances of these objects,
  • 6:26 - 6:28
    and there's some things
    that are similar about them
  • 6:28 - 6:30
    like they all have the same properties.
  • 6:30 - 6:32
    Then there are things that are different
    like oh, this property is actually
  • 6:32 - 6:36
    a different value
    than this other property, right?
  • 6:36 - 6:39
    But then, you know, we can do
    the same behavior with them
  • 6:39 - 6:41
    like call the same functions
  • 6:41 - 6:43
    and use them in similar ways.
  • 6:43 - 6:46
    So that's some of the cool stuff
    about object-oriented programming
  • 6:46 - 6:49
    but as you're going to see,
    there's tons more too.
  • 6:49 - 6:50
    So, stay tuned!
Title:
Object Types (Video Version)
Description:

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

more » « less
Video Language:
English
Duration:
06:51

English subtitles

Revisions Compare revisions