Skip to content
name / valueother objectsfunctions
Assing them to var, pass around, create on the flyproperty: name / valuesobjectsfunction coninvocable (có thể gọi được)có code bên trong
ĐỂ TÁCH BIỆT NHỮNG FILE JS CÓ BIẾN RIÊNG, CHẠY ĐỘC LẬP, TRẢ VỀ KẾT QUẢ XONG RỒI BIẾN MẤTKHÔNG ẢNH HƯỞNG ĐẾN NHỮNG FILE JS TRÊN HAY DƯỚI, không ảnh hưởng đến Global Objectcó thể tùy chọn access những biến global nếu thích, nhưng sẽ an toàn
gọi là closure: sử dụng IIFEsử dụng let trong ES6callback là ứng dụng của closurebind có thể thực hiện với object để thay đổi bối cảnh ‘this’bind có thể thực hiện với ‘this’ để thay đổi param mặc định (’this’ không đổi)bind không thực thi, call và apply thực thi
youhoc
- Pages
Objects & Functions
Object can contain:
Create an object:
// reserve in memory
var person = new Object();
// set properties
person["name"] = "Tony";
person["country"] = "Vietnam";
// access object properties
console.log(person)
console.log(person.name)
console.log(person.country)
var nameProperty = "name";
console.log(person["nameProperty"])
// set other object inside object
person.address = new Object();
person.address.street = "Yen Do";
person.address.city = "Ho Chi Minh";
// access object inside object
console.log(person.address.street);
console.log(person["address"]["street"];
Thường chỉ nên dùng DOT để truy cập giá trị của Object
console.log(person.name)
Chỉ nên dùng STRING ARRAY khi cần truy cập giá trị bằng tên động
var nameProperty = "name";
console.log(person["nameProperty"])
Object Literals
// new Object(), reserve in memory
var person = {};
var Tony = {
name: 'Tony',
country: 'Vietnam',
address: {
street: 'Yen Do',
city: 'Ho Chi Minh'
}
};
// function to call an object
function greet(person) {
console.log('hi ' + person.name)
}
greet(Tony); // 'hi Tony'
// create object on the fly
greet( {name:'Mary',country:'US'} ); // 'hi Mary'
JSON & Object Literals
// object
var objectName = {
name: 'Tony',
country: 'Vietnam',
address: {
street: 'Yen Do',
city: 'Ho Chi Minh'
}
};
// convert to JSON string
console.log( JSON.stringlify(objectName) )
// JSON
{
"name": "Tony",
"country": "Vietnam",
"address": {
"street": "Yen Do",
"city": "Ho Chi Minh"
}
}
// convert string to JSON
var jsonVar = JSON.parse( '{ "street": "Yen Do", "city": "Ho Chi Minh"}' )
Function & Object Literals
Functions are Objects
First-class Functions: everything you can do with other types, you can do with funtion.
Function cũng có:
Function có thêm:
Function Expression: một đoạn mã trả lại một giá trị
Function Statement: một đoạn mã chỉ thực hiện một hành động (so sánh IF hay in ra log)
By Value & By Reference
MUTATE vs NEW OBJECT
‘this’
Seem like a bug in JS, but this is an unusual scenario:
Arrays
arguments and SPREAD
là những gì bạn truyền vào bên trong một function
SPREAD
Function Overloading
Một cách hay để chia nhỏ function, không truyền quá nhiều arguments
Lưu ý Syntax Parser
Nên tự hết dòng bằng dấu chấm phẩy, vì nếu để JS tự thêm chấm phẩy thì sẽ có nhiều bug khó track
Whitespace: xuống hàng, spacing, tabbing
Immediate Invoking Function
Phong cách viết này rất dễ gặp trong các framework nổi tiếng say này.
Tình huống kinh điển:
Closures
Ngay cả khi 1 hàm đã chạy xong, thì những biến và hàm bên trong hàm đó vẫn còn hiệu lực
Ngay cả khi greet() đã chạy xong thì các biến và hàm bên trong greet vẫn còn hiệu lực.
Tình huống kinh điển: chắc để tạo ra 1 mớ hàm
Nếu muốn lưu biến i chạy vòng lặp và thu gọn các dòng code:
Tạo ra factory function
Closure & Callback
call(), apply(), bind()
Function Borrowing
Mượn hàm của object này, chạy cho object khác
Function Currying
Copy hàm với một bộ giá trị param chỉ định
Tổng kết:
Functional Programming
Code đẹp để tạo ra 1 hàm xử lý mảng
// ví dụ, có 1 mảng, map thành 1 mảng mới với một điều kiện nhất định
var arr1 = [1,2,3];
// ví dụ muốn xử lý mảng rồi tạo ra 1 mảng mới
var arr2 = [];
// đây là cách thường làm
for(var i=0; i < arr1.length; i++) {
// map giá trị của mảng 2 tương ứng với mỗi giá trị của mảng 1...
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.