To structure my JavaScript code I would like to use classes, the syntactical sugar for prototype inheritance new to ES6. I am having trouble though: it seems my prototype methods are not working as expected, which makes me feel I may have a fundamental misunderstanding of JavaScript classes, and/or how they work.
Take the following code, which declares a traditional constructor Cat
and modifies its prototype, and an ES6 class Dog
with a prototype method defined within it.
// Traditional Cat Constructor
// ===========================
function Cat(name) {
this.name = name;
this.sound = "Meow.";
}
Cat.prototype.speak = function() {
console.log(this.sound || "I don't make a sound.");
};
// Dog via ES6 Class
// =================
class Dog {
constructor(name) {
this.name = name;
this.sound = "Woof!";
}
speak() {
console.log(this.sound);
}
}
var cat = new Cat("Bella");
var dog = new Dog("Sparky");
In NodeJS (tested with 4.4.2 and 6.0.0-pre), when I try to get the prototype of an instance of Dog
, I get an empty object, but I am still able to call the prototype method on the instance.
Object.getPrototypeOf(cat);
// -> Cat { speak: [Function] }
Object.getPrototypeOf(dog);
// -> Dog {}
cat.speak();
// -> Meow.
dog.speak();
// -> Woof!
In Google Chrome, where I expect the result to be the same (since Node uses its engine), I instead get the expected result:
Object.getPrototypeOf(cat);
// -> Object {}
// -> constructor: function Cat(name)
// -> speak: function()
// -> __proto__: Object
Object.getPrototypeOf(dog);
// -> Object {}
// -> constructor: function(name)
// -> speak: function()
// -> __proto__: Object
I was getting an error in Node that said the prototype methods I defined in a class were not functions of instances of their classes, which is the only reason I noticed this, but unfortunately now it seems I cannot reproduce that issue.
Regardless, the above does not seams right, is there any explanation for why this code is behaving in this way?
To structure my JavaScript code I would like to use classes, the syntactical sugar for prototype inheritance new to ES6. I am having trouble though: it seems my prototype methods are not working as expected, which makes me feel I may have a fundamental misunderstanding of JavaScript classes, and/or how they work.
Take the following code, which declares a traditional constructor Cat
and modifies its prototype, and an ES6 class Dog
with a prototype method defined within it.
// Traditional Cat Constructor
// ===========================
function Cat(name) {
this.name = name;
this.sound = "Meow.";
}
Cat.prototype.speak = function() {
console.log(this.sound || "I don't make a sound.");
};
// Dog via ES6 Class
// =================
class Dog {
constructor(name) {
this.name = name;
this.sound = "Woof!";
}
speak() {
console.log(this.sound);
}
}
var cat = new Cat("Bella");
var dog = new Dog("Sparky");
In NodeJS (tested with 4.4.2 and 6.0.0-pre), when I try to get the prototype of an instance of Dog
, I get an empty object, but I am still able to call the prototype method on the instance.
Object.getPrototypeOf(cat);
// -> Cat { speak: [Function] }
Object.getPrototypeOf(dog);
// -> Dog {}
cat.speak();
// -> Meow.
dog.speak();
// -> Woof!
In Google Chrome, where I expect the result to be the same (since Node uses its engine), I instead get the expected result:
Object.getPrototypeOf(cat);
// -> Object {}
// -> constructor: function Cat(name)
// -> speak: function()
// -> __proto__: Object
Object.getPrototypeOf(dog);
// -> Object {}
// -> constructor: function(name)
// -> speak: function()
// -> __proto__: Object
I was getting an error in Node that said the prototype methods I defined in a class were not functions of instances of their classes, which is the only reason I noticed this, but unfortunately now it seems I cannot reproduce that issue.
Regardless, the above does not seams right, is there any explanation for why this code is behaving in this way?
Share Improve this question asked Apr 2, 2016 at 13:58 JacksonHuntJacksonHunt 6021 gold badge8 silver badges21 bronze badges 2- see also Get functions (methods) of a class – Bergi Commented Apr 2, 2016 at 17:47
- I can confirm it is still the same blank output of {} when calling .getPrototypeOf() on NodeJS 14. – laalaguer Commented May 22, 2023 at 3:05
1 Answer
Reset to default 10Why are my class prototypes not working?
Only because the output is not how you expected doesn't mean it is not working. Neither the Node REPL nor console
are standardized. Implementations are pletely free to output whatever they want.
The only way to really know whether something "works" or not is to use it. So try to call dog.speak()
.
Regardless, the above does not seams right, is there any explanation for why this code is behaving in this way?
Class methods are non-enumerable properties, hence they don't show up in the Node output. Simplified example:
> var foo = {};
undefined
> Object.defineProperty(foo, 'bar', {value: 42, enumerable: false});
{}
> console.log(foo);
{}
undefined
> foo.bar
42
>
Regarding the Chrome output, it seems you expanded the object. Chrome always shows enumerable and non-enumerable properties.
> var foo = {};
undefined
> Object.defineProperty(foo, 'bar', {value: 42, enumerable: false});
Object {bar: 42}
> console.dir(foo);
Object
bar: 42
__proto__: Object
undefined
It also seems that the Chrome also shows non-enumerable properties in the summery. However, even though Chrome and Node share the same engine, they probably don't share the same logic for console
or output generation.
发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744768116a4592588.html
评论列表(0条)