Skip to content

Instantly share code, notes, and snippets.

View ositowang's full-sized avatar
👨‍💻
10000 hours in progress

Osito_Wang ositowang

👨‍💻
10000 hours in progress
  • Massachusetts
View GitHub Profile
@ositowang
ositowang / prototypeBased.js
Created April 5, 2019 16:49
prototype based inheritance in js
/**
* The hack es5 object.create() gives us. We make a shallow copy of the object
* passed in and returned the new object with prototype linked to the passed in
* object
* 1. still we have the shared reference problems
*/
//simple version of object.create()
function objectCreate(obj) {
function F() {}
F.prototype = obj;
@ositowang
ositowang / combination.js
Created April 5, 2019 16:45
Inheritance based on combination
/**
* Combination inheritance. As the name says, we combine the two ways.
* 1. We have two copies of the superclass properties. One copied from the super
* class constructor. The other we copied from the prototype.
*/
function superDaddy(name) {
this.name = name;
this.dogs = ['teddy', 'cookie', 'variable'];
}
@ositowang
ositowang / constructor.js
Created April 5, 2019 16:40
inheritance based on constructor stealing
/**
* Constructor stealing. As the name says, we steal the constructor from super
* class
* 1. We cant get values and methods from prototype
*/
function daddy(name) {
this.name = name;
}
function son(name) {
@ositowang
ositowang / prototype.js
Created April 5, 2019 16:34
inheritance based on prototype chain
/**
* The most common and buggy prototype chain inheritance.
* You won't use this in production, you swear
* Problems:
* 1. The most famous shared referece bug
*/
function father(name, age) {
this.name = name;
this.age = age;
this.family = ['tommy', 'buddy', 'kathy'];
@ositowang
ositowang / bindUltimate.js
Created April 3, 2019 18:02
a more comprehensive bind() that covers prototype chain and constructor function
/**
* Here comes the hardest parts. Have you considered if the function you are
* going to bind is a constructor function.In this scenario, the this value you
* bind should get ignored.
*
* @param {*} context
*/
Function.prototype.bindUltimate = function(context) {
if (typeof this !== 'function') {
throw new Error('bind is only invoked on functions');
@ositowang
ositowang / bindWithParams.js
Created April 3, 2019 17:57
A simple version of bind() in js.
/**
* Concat the parameters passed in when binding and the parameters when the new
* binded function takes
*
* @param {*} context
* @returns
*/
Function.prototype.bindWithParam = function(context) {
// take the function
let fn = this;
@ositowang
ositowang / myOwnCallUltimate.js
Created April 2, 2019 21:26
Ultimate version of call() in javascript
/**
* By checking the passed in context, we add an wrapper to primitive types or
* reset the this object to global one if null is passed in
*
* @param {*} context
* @returns
*/
Function.prototype.myOwnCallUltimate = function(context) {
// Object will tranform primitive value into wrapper Object,kind of Java.
context = context ? Object(context) : window;
@ositowang
ositowang / myOwnCallSimple.js
Created April 2, 2019 21:23
a simple version of the call() in javascript
/**
* We could get the parameters with arguments in Javacript. With ES6 spread
* operator, you could transform it into a real list. Notes: the first
* parameter is the this object, so we slice it.
* Problems:
* 1. we ignore the case the context passed in is primitive type
* 2. we ignore the case the context passed in is null
*
* @param {Object} [context=window]
* @returns
@ositowang
ositowang / callScenario.js
Created April 2, 2019 21:18
pragmatic way of using call
var domNodeArrays = Array.prototype.slice.call(domNodes);
// now domNodeArrays has the unshift methods
domNodeArrays.unshift("h1");
let test = [1,2,3,4]
// we make a shallow copy of the orignal array, now we are isolated
let shallowCopy = [].slice.call(test)
test[1] = 4
console.log(shallowCopy[1])
@ositowang
ositowang / updatednew.js
Created April 1, 2019 20:15
new operator simulation covering the return value
const objectContructorUltimate = (...args) => {
let constructor = [].shift.call(args);
let obj = Object.create(constructor.prototype);
let result = constructor.apply(obj, args);
// ensure we return an object
return (typeof result === 'object' && result) || obj;
};