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
+ 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
}
