Node.js和ES6类错误

Question

I have a small bug in my small coding playground and I just can't find any solution to my error after hours of struggling.

I simply want to create an object of a Post class in a app.js file (required from another Post.js file). (see first snippet)

Here's the code and the error.

--- app.js file below

'use strict';
const bodyParser = require('body-parser'),
mysql            = require('mysql'),
express          = require('express'),
app              = express(),
Post             = require('./Post.js');

app.get('/getposts', (req,res) => {
let sql = 'select * from posts'
let query = db.query(sql, (err,results) => {
    if(err) throw err;

    let id = results[0].id;
    let title = results[0].title;
    let body = results[0].body;

    var post = new Post(id,title,body);


    res.send('BLAH');
});
});

-- Post.js file below

'use strict';


class Post {

constructor(id,title,body) {
    this.id = 'id';
    this.title = 'title';
    this.body = 'body';
}

get id() {
    return this.id;
}

set id(id) {
    this.id = id;
}

get title() {
    return this.title;
}

set title(title) {
    this.title = title;
}

get body() {
    return this.body;
}

set body(body) {
    this.body = body;
}

write() {
    return `${this.id} that is the id, the title is ${this.title} and the body is : ${this.body}`
}
}

module.exports = Post;

--Error

C:\Users\skor\Desktop\app\webbootcamp\Post.js:16
set id(id) {
      ^
at Post.set id [as id] (C:\Users\skor\Desktop\app\webbootcamp\Post.js:16:11)
at Post.set id [as id] (C:\Users\skor\Desktop\app\webbootcamp\Post.js:17:17)
at Post.set id [as id] (C:\Users\skor\Desktop\app\webbootcamp\Post.js:17:17)
at Post.set id [as id] (C:\Users\skor\Desktop\app\webbootcamp\Post.js:17:17)
at Post.set id [as id] (C:\Users\skor\Desktop\app\webbootcamp\Post.js:17:17)
at Post.set id [as id] (C:\Users\skor\Desktop\app\webbootcamp\Post.js:17:17)
at Post.set id [as id] (C:\Users\skor\Desktop\app\webbootcamp\Post.js:17:17)

Thanks so much for help!

Answer 1

You return and set the actual getter and setter of id , rather than changing the id property of the class , so:

get id() {
    return this.id;
}

set id(id) {
    this.id = id;
}

Change your code to this:

get id() {
    return this._id;
}

set id(id) {
    this._id = id;
}

And also change your getters and setters in your whole class like so:

class Post {
  constructor(id, title, body) {
    this._id = id;
    this._title = title;
    this._body = body;
  }

  get id() {
    return this._id;
  }

  set id(id) {
    this._id = id;
  }

  get title() {
    return this._title;
  }

  set title(title) {
    this._title = title;
  }

  get body() {
    return this._body;
  }

  set body(body) {
    this._body = body;
  }

  write() {
    return `${this._id} that is the id, the title is ${this._title} and the body is : ${this._body}`
  }
}

Also make sure in the constructor , when you set the properties to use the values instead of strings, eg: instead of this:

this.id = 'id';

use like this:

this._id = id;

---

It's a common convention to use prefixes to distinguish public and private properties in languages, but since JavaScript doesn't have (yet) private properties, this common technique is used to achieve similar results, eg: and underscore ( _ ) before id , as so: this._id , ie:

class Point {
  constructor(x, y) {
    this._x = x;
    this._y = y;
  }  
}

Helpful resources regarding this technique:

• MDN articles about getters , setters and class
• Why does my javascript getter/setter require underscores?
• An article about JavaScript ES6 class syntax

---

As explained in this blog , another 2 techniques for implementing private members in JS you should be aware of are closer & WeakMap. Each of the 3 different approaches has its own advantages and disadvantages. Short example for closer:

class Person {
  constructor(name, age) {
    this.getAge = function () { return age; }
    this.setAge = function (newAge) { age = newAge; }
    this.getName = function () { return name; }
    this.setName = function (newName) { name = newName; }
  }
}

Advantage:

• Simple implementation of private members, without external access to the private members.

Disadvantages:

• Every object of this class has its own functions and they don't share them on the prototype like in the prefix solution.

• The members are too much inaccessible - Objects of the same class can't access each other's private members, which is not the standard implementation of private members.

Short example of WeakMap:

/** @type {WeakMap<Person, {name: string, age: number}>} */
const internal = new WeakMap();

class Person {
  constructor(name, age) {
    internal.set(this, {name, age});
  }

  get age() {
    return internal.get(this).age;
  }

  set age(val) {
    internal.get(this).age = val;
  }
  // and the same for name
}

Advantages:

• Shared functions on prototype.

• Fully private implementation (objects of the same class can access each other's private members

Disadvantages:

• Not a simple implementation.

The WeakMap is the best approach in general, but not always.

Answer 2

Your setter is called whenever a property of the object is set. The constructor calls the setter. Then because the setter does the following:

this.id = id;

It will call itself recursively and thus it gives an error because the stack will overflow. An solution is to remove your setters and getters and just get and set your properties in the following manner:

 class Post { constructor(id,title,body) { this.id = 'id'; this.title = 'title'; this.body = 'body'; } write() { return `${this.id} that is the id, the title is ${this.title} and the body is : ${this.body}` } } let hey = new Post(1,'foo','bar'); // set something like this: hey.id = 5; // get something like this: const id = hey.id; 

Answer 3

I think the problem with your code is this.

get id() {
    return this._id;
}

set id(id) {
    this._id = id;
}

The change that I have made in your code is putting _ before attribute names.