javascript - Why are my class prototypes not working? - Stack Overflow

To structure my JavaScript code I would like to use classes, the syntactical sugar for prototype inheri

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
Add a ment  | 

1 Answer 1

Reset to default 10

Why 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

相关推荐

  • javascript - Why are my class prototypes not working? - Stack Overflow

    To structure my JavaScript code I would like to use classes, the syntactical sugar for prototype inheri

    16小时前
    20

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信