Javascript why cant add method to subclass prototype?

Question

Suppose I have a Person object which I want to inherit from and make another sub-class, as follows:

var Person={
    type:"human",
    greet: function(){
        console.log("hi im a human");
    },
}
Person.prototype.sayName = function(){
    return this.name;
}

And inheriting as follows:

var john = Object.create(Person);
john.walk = function(){
    console.log("john is walking");
}

Why cant I add walk method to johns prototype, like this:

john.prototype.walk = function(){
   console.log("john is walking");
}

`john` isn't a (constructor) function and thus doesn't have a `.prototype` property. (`john` has a prototype object it inherits from, but that's not what `.prototype` is.) — melpomene, Jan 22 '17 at 19:51
It doesn't really differ. Your `Person` code doesn't work either (it's a syntax error). — melpomene, Jan 22 '17 at 19:54
I just ran it and it works. Can you point me to the correct pattern which I should follow? When does the `prototype` is being created? What is the best practice when working with objects creation? — Alex, Jan 22 '17 at 19:55
Your updated code throws `TypeError: Person.prototype is undefined`. — melpomene, Jan 22 '17 at 19:57
My bad. Obviously I didnt fully grasp the `prorotype` idea. `prototype` is being created with the `new` keyword? — Alex, Jan 22 '17 at 19:59
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain — melpomene, Jan 22 '17 at 20:00
How to achieve inheritance is covered in so many online articles. Have a look at [MDN - Object prototypes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes) and [MDN - Inheritance in JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance). — Felix Kling, Jan 22 '17 at 20:06
These many article that god me confused in the first place. Thanks, I will read these you suggested. — Alex, Jan 22 '17 at 20:07
*"`prototype` is being created with the new keyword?"* No. Every **function** has a `prototype` property. The value of that property is used for the prototype of objects created by calling the function as a constructor, i.e. with `new`. In other words, `new Foo()` is basically doing: `var obj = Object.create(Foo.prototype); Foo.call(obj); return obj;` (simplified a bit). — Felix Kling, Jan 22 '17 at 20:09

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Trying to load a HTML page including JavaScript containing the first 2 (implicitly "correct" "intended") paragraphs Google Chrome Browser ("Version 55.0.2883.87 (64-bit)" on Kubuntu 16) already shows errors (try F-12 key and click on console to see).

Since you did not explictly described how the JS-code is intended to be used, this is at least a version without triggering error messages, hope it meets what you are looking for (if not, please specify in detail):

If you create a file test1.js containing:

class Person {
        constructor(name) {
                    this.name = name;
        }
}
Person.prototype.name ="no name";
Person.prototype.type ="human";
Person.prototype.greet = function() {
console.log("hi im a human");
};
Person.prototype.sayName =  function(){
return this.name;
}
var john = new Person("john");
john.walk = function() {
console.log(this.name+" is walking");
}

Then loading a HTML file containing

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="test1.js"></script>
</head>
<body>
<script type="text/javascript">
john.greet();
console.log(john.sayName());
john.walk();
</script>
</body>
</html>

will output on console:

hi im a human

john

john is walking

Javascript why cant add method to subclass prototype?

1 Answers1