@manhnguyenv

Welcome to my blog!

Thế giới JavaScript

August 6, 2017 15:56

Cách học tốt nhất là bắt đầu từ khái niệm

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model

https://thachpham.com/

https://thachpham.com/category/web-development/javascript

https://viblo.asia/

https://viblo.asia/p/cac-bai-stackoverflow-ma-lap-trinh-vien-javascript-phai-doc-l5XRBJkWRqPe

https://kipalog.com/

https://kipalog.com/posts/Javascript---Nhung-kho-hieu-trong-cau-lenh-dieu-kien-if-va-phep-toan-so-sanh

https://toidicodedao.com/

https://toidicodedao.com/2016/02/23/series-javascript-sida-oop-trong-javascript/

https://nhungdongcodevui.com/

https://nhungdongcodevui.com/2016/12/11/vuot-qua-cac-bai-phong-van-javascript/

https://freetuts.net/tim-hieu-javascript-hoisting-403.html

1) OOP

Object-oriented-programming-features

+ Class, Object, Variables, Functions

+ Abstract class, interface, inheritance, encapsulation, polymorphism

+ Inheritance: dùng Prototype để viết kế thừa trong JavaScript

+ Polymorphism: dùng Constructor để diễn tả tính đa hình

+ Encapsulation: dùng trang này

/*
  Polymorphism means "many forms" and in programming describes the ability
  for objects to present the same interface for different behaviors. So calling
  man.sayHello() and woman.sayHello() would result in different output, even 
  though the method call is the same.
*/

function Person(gender) {
  this.gender = gender;
  this.sayHello = function () {
    console.log("Hello, I am a " + this.gender);
  }
}

var man = new Person("man");
var woman = new Person("woman");
man.sayHello(); // --> "Hello, I am a man"
woman.sayHello(); // --> "Hello, I am a woman"

2) Design patterns

Prototype pattern:

Module pattern:

Observer pattern: User the .apply() or .call()

Singleton pattern:

https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know

What does it mean that Javascript is a prototype based language?

Prototypal inheritance is a form of object-oriented code reuse. Javascript is one of the only [mainstream] object-oriented languages to use prototypal inheritance. Almost all other object-oriented languages are classical.

In classical inheritance, the programmer writes a class, which defines an object. Multiple objects can be instantiated from the same class, so you have code in one place which describes several objects in your program. Classes can then be organized into a hierarchy, furthering code reuse. More general code is stored in a higher-level class, from which lower level classes inherit. This means that an object is sharing code with other objects of the same class, as well as with its parent classes.

In the prototypal inheritance form, objects inherit directly from other objects. All of the business about classes goes away. If you want an object, you just write an object. But code reuse is still a valuable thing, so objects are allowed to be linked together in a hierarchy. In javascript, every object has a secret link to the object which created it, forming a chain. When an object is asked for a property that it does not have, its parent object will be asked... continually up the chain until the property is found or until the root object is reached.

Each function in JavaScript (which are objects themselves) actually has a member called "prototype", which is responsible for providing values when an object is asked for them. Having this member allows the constructor mechanism (by which objects are constructed from functions) to work. Adding a property to the prototype of a function object will make it available to the constructed object, as well as to all of the objects which inherit from it.

Advantages

There may not be a hard and fast rule as to why prototypal inheritance is an advantageous form of code-reuse. Code reuse itself is advantageous, and prototypal inheritance is a sensible way of going about it. You might argue that prototypal inheritance is a fairly simple model of code reuse, and that code can be heavily reused in direct ways. But classical languages are certainly able to accomplish this as well.

Sidenote: @Andrew Hedges makes a good point, that there are actually many prototypal languages. It's worth noting that these others exist, but also worth noting that none of them are anything close to mainstream. NewtonScript seemed to have some traction for a while, but died with its platform. It's also possible to extend some modern languages in ways which add prototypal capabilities.

3) Function declaration & Function expression

Declare function:

function helloWorld() {
  alert('Hello World');
}

Anonymous function:

var helloWold = function() {
  alert('Hello World');
}

Another anonymous function:

(function() {
  alert('Hello World');
})

Self-Executing Anonymous Functions or How to Write Clean Javascript

http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write

(function() {
	var Person = {
		sayHello: function() {
			alert('Hello World');
		}
	}
})();

(function() {

	var Person = {

		init: function() {
			this.form = $('#form');
			this.bindEvents();
		},

		bindEvents: function() {
			this.form.on('submit', this.showName);
		},

		showName: function(event) {
			event.preventDefault();

			alert(this.form.find('input[type=text]').val());
		}
	}

	Person.init();

})();

Self-executing anonymous function

http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

(function(){ console.log('Hello World!'); })();

(function(window, document, $, undefined){ var foo; console.log(foo === undefined); //Returns 'true' })(window, document, jQuery);

Anonymous function:

(function(){
//Normal code goes here
})

Self-invoking functions in JavaScript (or Immediately Invoked Function Expressions)

http://blog.mgechev.com/2012/08/29/self-invoking-functions-in-javascript-or-immediately-invoked-function-expression/

(function (w, d, $) {
   //body
}(window, document, jQuery));

// Usually the use of self-invoking functions is in the module pattern. It happens when we keep the reference to the function’s return value. Exactly the return value is the public API of the defined module:

var module = (function () {
    //private
    return {
    //public
    }
}());

4) Hoisting

5) Strick mode: "use strick"

6) The "this" keyword and Bind(), Call() Apply()

Việc coi function cũng như là object trong JavaScript

7) Callback function

$(document).ready(function(){});

8) Promise

Việc lạm dụng sử dụng quá nhiều callback function sẽ rất khó để quản lý, Promise ra đời để giải quyết vấn đề đó.

9) Async/Await Javascript

https://viblo.asia/

10) Closure 

11) Data type

ES5: Boolean, Number, String, Object, Array, null, undefined

ES6: Symbol, Reflect, and Proxy

12) Operator

So sánh dùng từ khóa "==" và "==="

13) Href attribute for JavaScript link: "#" OR "javascript:void(0)"?

 

14) How to set default value

function Person(name, age, projs) {

    this.name = name || "Manh"; // String

    this.age = age || 34; // Number

    this.projects = projs || []; // Array

}

Categories