Javascript: issue with inheritance test (JS Definitive Guide book supplied code issue)

Question

I'm new to Javascript. Usually write Python/PHP. Currently reading through JavaScript: The Definitive Guide: Activate Your Web Pages (Definitive Guides).

Part of the example code used I'm trying to figure out why it won't work, and the detailed explanation why too if possible, is below over properties getter/setters and inheritance.

The function I'm using:

function inherit(p) {
     if (p == null) throw TypeError(); 
     if (Object.create) return Object.create(p); 
     var t = typeof p; 
     if (t !== "object" && t !== "function") throw TypeError();
     function f() {}; 
     f.prototype = p; 
     return new f();
}

var p = {
    x: 1.0,
    y: 1.0,
    get r() { 
        return Math.sqrt(this.x*this.x + this.y*this.y); 
    },
    set r(newvalue) {
        var oldvalue = Math.sqrt(this.x*this.x + this.y*this.y);
        var ratio = newvalue/oldvalue;
        this.x *= ratio;
        this.y *= ratio;
    },
        get theta() { return Math.atan2(this.y, this.x); }
};

When I run a test. I can't see anything being inherited.

> var q = inherit(p)
undefined
> q
{}
> p
{ x: 1, y: 1, r: [Getter/Setter], theta: [Getter] }

Why is this? I am currently using node v6.11.3 on Mac to run this.

Update:

Discovered how to show all values in an Object. Setting enumerable:True to an object will auto-display all values. What I was trying to figure out how to do. For any who also use Node.js.

The code works as it should. You are not looking at the full results properly. If you log `q`, you will see all the inherited properties. The `{}` that you are seeing is just the way the console tells you that an object was returned from `inherit(p)`. Add `console.log(inherit(p))` to the bottom of your code and run it. Also, see this **[Fiddle](https://jsfiddle.net/vpLu0rkh/3/)** — Scott Marcus, Dec 08 '17 at 21:07
Yep. Or run the whole thing in your browser console for easy clicky click click. — Will, Dec 08 '17 at 21:13
Did not realize I could use the console in Chrome/FF like this with JS snippets of code. Out of curiosity, is there any easy way to get this info in terminal while using `node`? I tried `console.log(inherit(p))` and still gives `{}`. `iPython` I could use 'who' to view all variables and quick look at their variables. — Josh, Dec 08 '17 at 21:23
Use `util.inspect()` as discussed **[here](https://stackoverflow.com/questions/10729276/how-can-i-get-the-full-object-in-node-jss-console-log-rather-than-object)** — Scott Marcus, Dec 08 '17 at 21:29

score 1 · Accepted Answer · answered Dec 08 '17 at 21:07

1

if you use Object.getOwnPropertyDescriptors(Object.getPrototypeOf(q)) you should see the inherited properties from p. If you check equality with Object.getPrototypeOf(), the prototype of q should be equal to p.

answered Dec 08 '17 at 21:07

JusMalcolm

1,431
12
10

This should be a comment as there was no problem in the first place. – Scott Marcus Dec 08 '17 at 21:08
Disagree. The problem is(was) that he couldn't see the full output by simply typing `q` into the console. This solves the problem. – Will Dec 08 '17 at 21:12
@Will This kind of issue is not code related. The problem has nothing to do with the code presented. As such, it is a question that should be closed here on SO (and I have marked it as such). These kinds of questions should only have comments, not answers. – Scott Marcus Dec 08 '17 at 21:15
@JusMalcolm I noticed I can set `enumerate:true` on an object (`Object.defineProperty()`) and this will automatically show the values (using node.js in terminal, Chrome js console). Thanks for pointing me in the right direction. – Josh Dec 11 '17 at 17:10

score 0 · Answer 2 · answered Dec 09 '17 at 06:22

Use strange class definition and instance like inherit function is considered a bad practice, consider use js class ES6 definition, if you can, or function object definition or prototype if you have to use ES5.

Here how to use ES6 class definition

class p {

    constructor() {
        this.x = 1.0;
        this.y = 1.0;
    }    

    get r() { 
        return Math.sqrt(this.x*this.x + this.y*this.y); 
    }

    set r(newvalue) {
        var oldvalue = Math.sqrt(this.x*this.x + this.y*this.y);
        var ratio = newvalue/oldvalue;
        this.x *= ratio;
        this.y *= ratio;
    }

    get theta() { return Math.atan2(this.y, this.x); }

}

var q = new p();
> q
{x: 1, y: 1}
> q.r = 6
> q.theta

Javascript: issue with inheritance test (JS Definitive Guide book supplied code issue)

2 Answers2