Javascript instanceof operator confusion

Question

I've read about Javascript's instanceof operator and wanted to test it out. I've written this code:

function first() {};
first.prototype.hello = function hello() {
	console.log("hello");
}

var second = {};


second.prototype = Object.create(first.prototype);

console.log(second instanceof first); //should've output true

second.hello();

This doesn't work as expected (by me). What I thought when writing this fragment:

instanceof takes a function (first in this case) as its right hand operand and an object as its left hand operand. Then it checks whether the given function's prototype appears in any part of the object's prototype chain. first is the function, hello is some function added to first's prototype. second's prototype is assigned a new object which has a prototype link to first.prototype so when second instanceof first is executed, it cannot find link to first.prototype object on second directly so it follows prototype link to second.prototype which has that link.

When I run this in Chrome this is the result:

false

Uncaught TypeError: second.hello is not a function
  at main.js:13

Could you please help me out with this?

what's wrong with second = new first() - isn't that what you're trying to achieve? that patterns seems to be trying to subclass first as class second - but you're "doing it wrong"™ — Jaromanda X
– Jaromanda X, Commented Sep 4, 2018 at 5:13
I don't think there's something wron with the constructor call version but this is not a practical code and it's written just to test what I learned. — Bran Tran
– Bran Tran, Commented Sep 4, 2018 at 5:16
Regarding images, please restrict them to things that really need to be images. We would vastly prefer if you just wrote in your question "second instanceof first returns false, and second.hello() yields Uncaught TypeError: second.hello is not a function", and indicated the corresponding line in your code. — Amadan
– Amadan, Commented Sep 4, 2018 at 5:20

melpomene · Accepted Answer · 2018-09-04 05:28:23Z

3

second's prototype is assigned a new object

No, this part is wrong. You're creating a property called "prototype", but that doesn't mean it is the object's actual prototype.

var second = {};
second.prototype = ...

is equivalent to

var second = { "prototype": ... };

but it's unrelated to inheritance.

Pretty much the only spot where a property called "prototype" is used is on constructor functions (such as your first), and even then it's not used as the prototype of the function itself; it's used as the prototype for any instances created later on from new ThatFunction().

What you can do is

var second = new first;
// What this does:
//   - gets the object from first.prototype
//   - creates a new derived object, like Object.create(first.prototype)
//   - calls first(), passing the new object as 'this',
//      like first.call(Object.create(first.prototype))
//   - assigns the object returned from first() to second
//      (if first doesn't return an object, it automatically uses the new object created in step 2 instead)

or (mostly equivalent, but won't call first)

var second = Object.create(first.prototype);

edited Sep 4, 2018 at 5:28

answered Sep 4, 2018 at 5:12

melpomene

86.2k8 gold badges96 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bran Tran Over a year ago

So the actual prototype cannot be referenced with the expression name.prototype?

melpomene Over a year ago

@BranTran That is correct. You can use Object.getPrototypeOf for that.

Bran Tran Over a year ago

Just to anyone who may read this later: my mistake was not getting the meaning of the prototype property right. It (by default) exists only for functions and is a link to some other object. Using it for non-callable object's property is the same as just adding a new property on it (without any special meaning). Thank you all for your support!

Sagar V · Accepted Answer · 2018-09-04 05:16:08Z

1

Instead of second.prototype, use second

I've edited your code.

function first() {};
first.prototype.hello = function hello() {
    console.log("hello");
}

var second = Object.create(first.prototype);

console.log(second instanceof first); //should've output true

second.hello();

edited Sep 4, 2018 at 5:16

answered Sep 4, 2018 at 5:12

Sagar V

12.5k8 gold badges46 silver badges71 bronze badges

1 Comment

Bran Tran Over a year ago

I've actually tried this too and when it worked I was confused even more

vixrant · Accepted Answer · 2018-09-04 05:15:49Z

0

Object.create () returns the created object which you need to store in second variable, not in second.prototype. It does not return an Object prototype, but the entire Object itself.

 var second = {}
 second = Object.create (first.prototype)

answered Sep 4, 2018 at 5:15

vixrant

1981 gold badge3 silver badges12 bronze badges

Collectives™ on Stack Overflow

Javascript instanceof operator confusion

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related