# prototype vs \_\_proto\_\_: Which statement is correct?

**URL:** <https://forum.kirupa.com/t/prototype-vs-proto-which-statement-is-correct/638528>\
**Category:** web dev\
**Created:** [July 23, 2018, 3:46pm UTC](https://forum.kirupa.com/t/prototype-vs-proto-which-statement-is-correct/638528 "2018-07-23T15:46:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kayut](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@kayut](https://forum.kirupa.com/u/kayut)\
**Post date:** [July 23, 2018, 3:46pm UTC](https://forum.kirupa.com/t/prototype-vs-proto-which-statement-is-correct/638528/1 "2018-07-23T15:46:03Z")

</div>

Hi,  
I’m trying to understand a couple of different things. I read a lot and googled for hours. Now, I need to connect all those infos and hope that you can help me by answering this question.

Looking at this code:

```auto

    function Point(x, y) {
        this.x = x;
        this.y = y;
    }

    var myPoint = new Point();
```

Are the following statements correct?:

1. Point is a Constructor function object.

2. myPoint is an instance of Point object.

3. Point is not the prototype of myPoint.

4. **Point** is the constructor of **myPoint**.

5. myPoint doesn’t have a prototype property, as prototype property is only available on functions.

6. But myPoint has a ` __proto__ ` property like all other objects.

7. The ` __proto__ ` property of myPoint is pointing to its prototype, which is Point.

Thanks

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [July 23, 2018, 4:26pm UTC](https://forum.kirupa.com/t/prototype-vs-proto-which-statement-is-correct/638528/2 "2018-07-23T16:26:46Z")

</div>

You’re mostly right, except for “Point is the prototype of myPoint” and “The ` __proto__ ` property of myPoint is pointing to its prototype, which is Point.” These are not correct. Point is _just_ the constructor of myPoint, and the prototype of myPoint is actually `Point.prototype`.

The biggest thing to be careful of here is **naming**. There are “prototypes” and there are `prototype` properties. These are not the same thing. The prototype of any object is what its ` __proto__ ` property points to - something referred to as “[[Prototype]]” in the spec. The prototype is what an object uses to access shared properties when access is made on a property that it doesn’t have defined on its own instance.

```auto
var shared = { num: 1 };
var instance = { str: "a" };

console.log(instance.str); // "a"
console.log(instance.num); // undefined

Object.setPrototypeOf(instance, shared);

console.log(instance.str); // "a"
console.log(instance.num); // 1 <- coming from its prototype

```

When you create a constructor function like `Point`, it is created with a `prototype` property. This is _not_ the prototype of the `Point` function object. It actually has it’s own prototype which you can access through `Point. __proto__ `, This awkwardly named `prototype` property actually refers to the object which gets set as the prototype (i.e. ` __proto__ ` value) for the instances created from `Point` when used as a constructor with the `new` keyword. The `prototype` property would be better named as `prototypeForInstancesThisConstructorCreates`.

```auto
function Point(x, y) {
    this.x = x;
    this.y = y;
}

var myPoint = new Point();
console.log(myPoint. __proto__ === Point.prototype); // true

```

Notice here that `myPoint`'s prototype is being referenced by a ` __proto__ ` property (not a `prototype` property) and the value in the `prototype` property of `Point` is _not_ `Point`'s prototype. Seems a little backwards, doesn’t it?

Basically what happens is, when `Point` is used as a constructor, internal code in the JavaScript runtime performs this:

```auto
// pseduocode
if (is_called_with_new(current_function)) {
    this = allocate_new_object_instance()
    Object.setPrototypeOf(this, current_function.prototype)
    set_default_return_value_of(current_function, this)
}

```

`Object.setPrototypeOf` is what sets up the ` __proto__ ` link. (Note: generally the use of ` __proto__ ` is discouraged in favor of `Object.setPrototypeOf` and `Object.getPrototypeOf`, though ` __proto__ ` is what you see when debugging objects so its good to know what it means.) So what you get from `new Point` is a new JavaScript object that is mostly like a new `{}` object, but has a prototype refering to the `prototype` property of the function that created it. That and the function gets run with `this` being a reference to that object which in the case of `Point` here, also assigns some `x` and `y` properties to the object.

---

<div class="post-metadata">

**Author:** ![kayut](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@kayut](https://forum.kirupa.com/u/kayut)\
**Post date:** [July 23, 2018, 6:33pm UTC](https://forum.kirupa.com/t/prototype-vs-proto-which-statement-is-correct/638528/3 "2018-07-23T18:33:05Z")

</div>

Oh God! I’m not sure if I understand.

Is ` __proto__ ` the same as [[Prototype]] ?

If funnyGuy object is an instance of Person, is the following diagram correct?

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/f/f3e78968c1ca8da29e23050915d7520571aa9e3e.jpg)

If it’s correct. Is the ` __proto__ ` of funnyGuy the Person object?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [July 23, 2018, 6:41pm UTC](https://forum.kirupa.com/t/prototype-vs-proto-which-statement-is-correct/638528/4 "2018-07-23T18:41:12Z")

</div>

Yeah, the image in that you need to pay attention to, but is easily missed because it happens so early is:

[![](https://www.kirupa.com/html5/images/funnyGuy_Object_prototype_72.png) ](https://www.kirupa.com/html5/images/funnyGuy_Object_prototype_72.png)

The other images that follow, including the one you posted, are kind of a shorthand, especially as the prototype object goes because the prototype object in “Object” in the pictures here, actually refers to what in JavaScript would be `Object.prototype`.

`person` is actually _person_ and not `person.prototype` because `funnyGuy` is created with

```auto
Object.create(person)

```

Which sets the prototype ([[Prototype]] or ` __proto__ `) to the person object directly, not its `prototype` property. The `prototype` property thing is a consequence of using `new SomeConstructorFunction()`. `funnyGuy` and `person` is like `shared` and `instance` in my previous example. But when it comes to `person` and `Object`, its actually `person. __proto__ = Object.prototype` which is not clear in these pictures.

Edit: I should mention the `Something.prototype` association isn’t _solely_ a `new Constructor` thing since (most) all JavaScript objects ultimately point (via prototypes) back to `Object.prototype` and that can happen without `new`, for example with just `{}`. Objects created with `{}` default to having a prototype that points to `Object.prototype`, though this is equivalent to saying `new Object()` which _does_ use `new`. Similarly, array literals like `[1,2,3]` automatically have a prototype pointing to `Array.prototype` and they’re also created not using `new` (though you can also use `new Array()` to create arrays).