Builder Objects

Object Builder #

How we define object and attribute correctly

Think like objects #

It’s easy if we abstract everything is object (both of Javascript/Python…). Because it’s modeling the problem and due to escapsulation we can ignore the detail implementation if need.

In Javascript functions is function, but we can think they should be objects also.

function = callable object
function = protoptype (aka class) to init object
function has a prototype object

function may not belong an object. When function belong an object, it called method

function someFunc() {
  this.myValue = 1;
  return "AAA";
}

// Then we can init object by the new keyword on function calling
const obj = new someFunc();
// The object will be create with someFunc class
/*
{
    myValue: 1,
    [[Prototype]]: Object
}
*/

// Only function have prototype object
console.log(someFunc.prototype);

In Python: Everything is object.

Create objects #

By Object literal

let object = {
  firstName: "Ho",
  lastName: "Hai",
};

Object contructor

let obj = new Object();
obj.firstName = "Ho";
obj.lastName = "Hai";

Object in modules #

What’s happend if we import an object from module (js file).

The object will be same in the declared module and imported module
We can modify the object, then the changes will be reflected at all.

// In lib1.js
const myObject = { a: 1 };

// In main.js we will import and print out the object
import { myObject } from "./lib1.js";
console.log(myObject); // {a: 1}

// In lib2.js
// Now we will add new module that try to import the `myObject` from lib1 and change
// this object by adding new attribute
import { myObject } from "./lib1.js";

function changeInMyObject() {
  myObject.b = 2;
}

export { changeInMyObject };

// In main.js
import { myObject } from "./lib1.js";
import { changeInMyObject } from "./lib2.js";

console.log(myObject); // {a: 1}

changeInMyObject();

console.log(myObject); // {{a: 1, b: 2} >> WORKS (refer the same object in lib1, lib2)

Increment buiding object #

We can build and setup properties/attributes of objects by:

Design static properties/attributes by class. From the class we can init new object
Attact new dynamic properties/attributes at runtime.

Design static properties/attributies by class/function #

In class:
- The contructor is function anymore
- this refer to the instance object

class BaseClass {
  contructor(baseValue) {
    this.baseValue = baseValue;
  }
  baseMethod1(a) {}
  baseMethod2(a, b) {}
}
class MyClass extends BaseClass {
  constructor(value) {
    super(value);
  }

  newMethod1() {}
}

const myInstance = new MyClass("HoHai");

// Then we can access the property by: dot notation or dictionary access style
myInstance["baseMethod1"] === myInstance.baseMethod1; // Return True

In function
- this refer to global object (for example window) if we don’t put the new keyword
- this refer to the instance of new object if we put the new keyword

function myClassFunction(a, b) {
  console.log(this);
  this.a = a;
  this.b = b;

  this.baseMethod = function (c) {
    console.log(c);
  };

  return "Some value when calling the myClassFunction";
}

const myInstance = new myClassFunction(1, 2);
myInstance.baseMethod(3);

Attact new `dynamic` properties at runtime #

const emptyObject = {}; // Using object literal (Object.create(null) will be returned the same result)
emptyObject.myValue = 1;
emptyObject.myFunc = function (a, b) {
  return a + b;
};

emptyObject["New Dynamic Property"] = "New Value";

Check a property in object #

Using in:

const obj = {};
console.log("lastName" in obj);

hasOwnProperty method

console.log(obj.hasOwnProperty("greeting"));

Function and object #

const b = {
  b1: 11,
  b2: "AA",
  getb1: function () {
    return this.b1;
  },
};

const a = {
  a1: b.getb1(),
  a2: b.b2,
};

const aFunc = function () {
  return {
    a1: b.getb1(),
    a2: b.b2,
  };
};

console.log(a);

console.log(aFunc());

b.b1 = 22;
b.b2 = "BB";
console.log(a);
console.log(aFunc());