Skip to content

Instantly share code, notes, and snippets.

@ohtangza
Created January 4, 2018 08:01
Show Gist options
  • Save ohtangza/96874011dc353ab56dcc4c76345214a2 to your computer and use it in GitHub Desktop.
Save ohtangza/96874011dc353ab56dcc4c76345214a2 to your computer and use it in GitHub Desktop.
JavaScript Learning Material
/*
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__);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment