@manhnguyenv

Welcome to my blog!

Angular First

September 12, 2018 00:44

Angular First, JavaScript, ES5 and ES6 (edit)

Angular First | Angular development on the Microsoft stack

Extend a class with private protected public fields and methods

https://www.guru99.com/javascript-interview-questions-answers.html

https://rollbar.com/blog/top-10-javascript-errors/

https://blog.mariusschulz.com/2015/01/23/my-favorite-tech-related-books

Angular

https://dzone.com/articles/angular-2-authentication-tutorial

https://dzone.com/articles/angular-2-authentication-tutorial-part-ii

https://dzone.com/articles/angular-4-coming-up-next

https://dzone.com/articles/ngmigrate-helps-you-move-from-angularjs-1x-to-angu

https://dzone.com/articles/building-and-securing-koa-and-angular-2-with-jwt

https://dzone.com/articles/building-angular-2-components-on-the-fly-a-dialog

https://dzone.com/articles/how-to-run-angular-2-in-production-today-1

https://stackoverflow.com/questions/29953198/foreach-loop-in-angularjs

https://stackoverflow.com/questions/12994710/in-angularjs-how-to-access-the-element-that-triggered-the-event

 

https://egghead.io/courses/asynchronous-javascript-with-async-await

https://blog.mariusschulz.com/2014/02/05/passing-net-server-side-data-to-javascript

https://blog.mariusschulz.com/2014/03/25/bootstrapping-angularjs-applications-with-server-side-data-from-aspnet-mvc

https://blog.mariusschulz.com/2014/10/22/asynchronously-bootstrapping-angularjs-applications-with-server-side-data

JavaScript

function Foo(a) {
    var bar = a;                              // private instance data
    this.getBar = function() {return(bar);}   // methods with access to private variable
    this.setBar = function(a) {bar = a;}
}
var x = new Foo(3);
var y = x.getBar();                           // 3
x.setBar(12);
var z = x.getBar();                           // 12
console.log(y);
console.log(z);

ES5 and ES6

// ==============================
// ABSTRACT "CLASS"
// ==============================

var OS = (function (n) {
  // Here "name" is private because it is encapsulated in the IIFE
  var name = "";

  // Constructor
  function OS (n) {
    // If "OS" is called with "new", throw an error
    if (this.constructor === OS) {
      throw new Error('You cannot instantiate an abstract class!');
    }
    name = n;
  }

  // We cannot call this method directly (except with "call" or "apply") because we cannot have direct instances of "OS"
  OS.prototype.boot = function () {
    return name + ' is booting...';
  };

  // This is an abstract method. It will be in the prototype of derived objects but should be overriden to work
  OS.prototype.shutdown = function () {
    throw new Error('You cannot call an abstract method!');
  };

  // Getter for "name"
  OS.prototype.getName = function () {
    return name;
  };

  // The constructor must be returned to be public
  return OS;
})();

// ==============================
// CONCRETE "CLASS"
// ==============================

var LinuxDistro = (function (name) {
  // Constructor
  function LinuxDistro(name) {
    // Here we call the constructor of "OS" without "new", so there will not be any error
    OS.call(this, name);
  }

  // Here "Linux Distro" inherits from "OS"
  LinuxDistro.prototype = Object.create(OS.prototype);
  LinuxDistro.prototype.constructor = LinuxDistro;

  // Private function/method
  function textTransform(str, style) {
    return style === 'lowercase' ? str.toLowerCase() : str.toUpperCase();
  }

  // The parent method is used and overriden
  LinuxDistro.prototype.boot = function () {
    return OS.prototype.boot.call(this) + ' Welcome to ' + textTransform(this.getName());
  };

  // The abstract method is implemented
  LinuxDistro.prototype.shutdown = function () {
    return 'Shutting down... See you soon on ' + textTransform(this.getName());
  };
  
  // The constructor must be returned to be public
  return LinuxDistro;
})();

// ==============================
// CLIENT CODE
// ==============================

var arch = new LinuxDistro('Arch Linux');

console.log(arch.getName());
console.log(arch.boot());
console.log(arch.shutdown());

References:

https://stackoverflow.com/questions/43081398/extend-a-class-with-private-protected-public-fields-and-methods

https://stackoverflow.com/questions/6799103/how-to-set-javascript-private-variables-in-constructor

https://www.sitepoint.com/object-oriented-javascript-deep-dive-es6-classes/

http://crockford.com/javascript/

http://2ality.com/2015/02/es6-classes-final.html

https://philipwalton.com/articles/implementing-private-and-protected-members-in-javascript/

http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/

Categories

Recent posts