Internal Implementation of Javascript

user_10368507 0
Viewed 398

I recently started learning JS, main reason - want to learn node and related frameworks. I have started doing some basic tutorials from freecodecamp and referring the docs from Mozilla MDN

I have started with ES6 constructor functions and stuck with something. Below is the details:

class Book {
  constructor(author) {
    this._author = author;
  }
  // getter
  get writer() {
    return this._author;
  }
  // setter
  set writer(updatedAuthor) {
    this._author = updatedAuthor;
  }
}

The invocation of getter and setter is weird, coming from Java, but its okay. Adapt !!

const ALEPH = new Book("Paulo Coelho");
let writtenBy = ALEPH.writer;
ALEPH.writer = "So we changing Authors now !!"

The above code(syntax) makes sense when thinking in terms of :

const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};

And that class is not a real class form OOP concepts, but a template for something called - constructor functions.

It should be noted that the class syntax is just syntax, and not a full-fledged class-based implementation of an object-oriented paradigm, unlike in languages such as Java, Python, Ruby, etc.

This makes sense, how the getters and setters are being called as they are nothing but keys/attributes of the object holding a function against it.

Please correct me if my understanding is wrong or I need to be more technically correct

The question is, I have looking over the internet what the get and set keyword does internally. I have found implementations and how to use them, not what they doing internally.

  • If you can refer me to any docs which talks about what it does internally.

With Java, I can easily refer the internal implementation or in case of a keyword, look up the Java Spec or JVM spec to understand what is happening under the hood. I am looking for something similar for JS. Would be good to have a reference to such official docs.

Question:

  1. How are the get and set keyword implemented internally?
  2. Any official docs for JS like we have for Python or Java.

Thanks.

es6-class ecmascript-6 javascript
2 Answers

You're great!

you've noticed these things about JS and it's True, JS Classes are not real classes, JS has OLOO (object linked to other objects) so we have just the plain object, not any real class, which lead us to the behavior delegation pattern which is simpler and easier than OOP and better suits JS.

I think the internals can be found in EcmaScript 262 standards check it here

And I also would love to mention a great JS book series that take you in real depth called YDKJS and here's the link about getters and setters

user_86677660

Don't get distracted by the ES6 features (class, extends etc...). There is nothing like class or class based inheritance in JavaScript. They are just syntactical sugar on native JavaScript function. The functions are the first class objects in JavaScript.

For example the Book class above will be converted as below in ES5 using babel repl

"use strict";

function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }

function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var Book = /*#__PURE__*/function () {
  function Book(author) {
    _classCallCheck(this, Book);

    this._author = author;
  } // getter


  _createClass(Book, [{
    key: "writer",
    get: function get() {
      return this._author;
    } // setter
    ,
    set: function set(updatedAuthor) {
      this._author = updatedAuthor;
    }
  }]);

  return Book;
}();

See how get and set are converted in ES5.

The MDN docs are good enough to get insights of JavaScript and it's features.

Final words: Try to avoid comparing Java and JavaScript. Learn it as something new.

user_139075950
Related