Advance Javascript (Part 1)
+++ draft = false +++
Advance JS: Primitive Datatype Strings, Numbers, Booleans, undefined, null, Symbols There are object wrappers wrapping these types, then we can access the methods of these objects. Objects Everything (except primitive types) are object Object: a collection of values Functions are objects. The different things are the internal properties such as [[Code]], [[Call]] Functions are objects Function Declaration // Function Declaration function functionName() { // Code block to execute } Function Expression // Function Expression let x = function functionName(val) { // Code block to execute console.log(val); }; // Because the function is object, then we can attact the new property x.userName = "HoHai"; Function contructor // Function contructor let x = new Function("val", "console.log(val);"); 4 ways to invoke a function As a function As a method As a contructor (new) Indirectly using call() and apply() Understand this this refer the object that function current called (executed) NOT declared: may be binding object or global object Determine at EXECUTE TIME, NOT ‘DECLARE TIME’ var name = "global"; var obj1 = { name: "obj1", func1: function () { console.log(this.name); }, }; obj1.func1(); // The object will be binded this time (executed time), not above var obj2 = { name: "obj2", func2: obj1.func1, // Try to refer the func1 }; obj2.func2(); var func6 = function () { console.log("func6"); }; // func6 is object (function), then we can set other attributes func6.nameFunc = "func6"; func6.func7 = function () { console.log(this); console.log(this.nameFunc); }; func6.func7(); Understanding Prototypes Almost Every object is linkedto another object. That linked object is called the prototype Inherits and methods from it’s prototype ancestry (prototype chain) call(), apply() Function methods Why we need to invoke function by these way: because we want to determite value of this let func1 = function () { console.log("Something..."); }; func1.call(); // Something func1.apply(); // Something Using call function.call(obj, arg1, arg2 ): The first argument will be come of value of this. Onr or more arguments to be sent to the function may follow Using apply function.apply(obj, [arg1, arg2]): The first argument will be come of value of this. Onr or more arguments to be sent to the function may follow in single array var user1 = { firstName: "Ho", lastName: "Hai", fullName: function () { return this.firstName + " " + this.lastName; }, }; var user2 = { firstName: "John", lastName: "Henry", fullName: function () { return this.firstName + " " + this.lastName; }, }; var greeting = function (term) { // the term arg only console.log(term + " " + this.firstName); // `this` will be available later }; greeting.call(user1, "Greeting..."); greeting.apply(user1, ["Greeting2."]); // Can invoke (extract method from a object then make a call with other object ) console.log(user1.fullName.call(user2)); bind method bind will create new method attached in the binding object // new method `morningGreet` will be created which attached the `user1` object var morningGreet = greeting.bind(user1, "Morning", "!"); One or more arguments can be included var user1 = { firstName: "Ho", lastName: "Hai", fullName: function () { return this.firstName + " " + this.lastName; }, }; var user2 = { firstName: "John", lastName: "Henry", fullName: function () { return this.firstName + " " + this.lastName; }, }; var greeting = function (term, term2) { // the term arg only console.log(term + " " + this.firstName + " " + term2); // `this` will be available later }; /* this = user1 term = "Morning" term2 = undefined */ var morningGreet = greeting.bind(user1, "Morning"); /* term2 = "!" */ morningGreet("!"); // Morning Ho ! /* The object is refered then all of changes will be affected in the binding method */ user1.firstName = "Kevin"; morningGreet("!"); // Morning Kevin ! /* Try to overwrite the refered object by the argument put in `call` BUT, NOT WORK. The `this` still refer to the binding object */ morningGreet.call(user2, "!"); // Morning Ho ! Invoking Functions as Contructors (using new) Contructor is just a function that is invoked using new Contructor returns an object Contructors are used to create multiple similar objects // function with name uppercase the first letter, indicate function can be used with `new' var Greeting = function () {}; // Create 2 objects var greet1 = new Greeting(); var greet2 = new Greeting(); the method fullName should be put in prototype. If we put in the contructor function then we will have multiple methods (it should be shared) function Users(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; this.fullName = function () { return this.firstName + " " + this.lastName; }; } var user1 = new Users("Ho", "Hai"); var user2 = new Users("Kevin", "Ho"); console.log(user1.fullName()); console.log(user2.fullName()); // Not the same functions console.log(user1.fullName === user2.fullName); // False
