JavaScript Learning Material

js-class-syntax.js

/*
class Abc {
  instanceProperty() {
    console.log('instanceProperty');
    // this.classProperty();
  }
  
  classProperty = () => {
    console.log('classProperty');
  }
}
*/

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new

console.log('========== Chapter1')
function Parent() {
  this.abc = 123;
  this.publicMethod = function() { console.log('[parent] public instance method is called'); }
  this.publicMethodCallingPrivateMethod = function() { privateMethod(); }
  
  const privateMethod = function() { console.log('[parent] Private instance method is called'); };
  // return {}; // Skipable, then JS will create this automatically
}

Parent.prototype = {}; // All object has this prototype property
Parent.prototype.classMethod = function() { console.log('[Parent] Class method of Parent is called')}

// const parent = new Parent(1); => same as the below codes
/*
const tmpObject = Object.assign(Parent.prototype); // NOTE!!!
const parent = Parent.call(tmpObject, 1);
*/

// 1. Is it working as the MDN documentation says?
console.log('===== Section 1');
const parent = new Parent();
console.log(parent);
console.log(parent.__proto__ === Parent.prototype);

// 2. Public function, private function
console.log('===== Section 2');
parent.publicMethod();
parent.publicMethodCallingPrivateMethod();
// parent.privateMethod(); // cannot call this

// 3. Instance function vs. Class function
console.log('===== Section 3');
console.log(Object.hasOwnProperty.call(parent, 'classMethod'));
console.log(Object.hasOwnProperty.call(parent.__proto__, 'classMethod'));

const parent2 = new Parent();
console.log(parent.__proto__ === parent2.__proto__);
console.log(parent.__proto__.classMethod === parent2.__proto__.classMethod);
console.log(parent.publicMethod === parent2.publicMethod);

// 4. Prototype chain
console.log('===== Section 4');
parent.__proto__.classMethod();
parent.classMethod();

console.log({}.__proto__.__proto__); // Primitive object
console.log(parent.prototype);
console.log(parent.__proto__.__proto__ === {}.__proto__);

// 5. Dynamic prototype chaining
Parent.prototype.classMethod = function() { console.log('[Parent] Changed class method')};
parent.classMethod();

// 6. Override parent's method
parent.classMethod = function() { console.log('[parent] I hate my parent')};
parent.classMethod();
parent.__proto__.classMethod();
// console.log({ abc: 123 } === { abc: 123 })

console.log('========== Chapter2');
/*
class Abc {
  this.crazy = function() {
    
  }
}
*/

class Abc {
  constructor() {
    this.publicMethod = function() { console.log('[abc] Instance public method is called'); }
    this.publicMethodCallingPrivateMethod = function() { privateMethod(); };
    
    function privateMethod() {
      console.log('[abc] Instance private method');
    }
  }
  
  prototypeMethod() {
    console.log('[Abc] Prototype method')
  }
  
  static staticMethod() {
    console.log('[abc] Abc static method');
  }
  
  // babel-plugin-transform-class-properties
  // classMethod = function() { console.log('[Abc] Class method is called'); }
}

const abc = new Abc();
console.log(abc);

Abc.staticMethod();
console.log(Abc.prototype);
console.log(abc.__proto__);