---------
Phần 23.
Căn bản JavaScript (6) Global_OOP
Clip 42. Đối tượng global
Các phương thức và thuộc tính của đối tượng global có thể sử
dụng được ở tất cả các đối tượng JavaScript khác.
Các thuộc tính của đối tượng global:
Thuộc tính
|
Mô tả
|
Infinity
|
Đại diện cho giá trị âm/dương vô cùng
|
NaN
|
Cho biết biểu thức toán học không thực hiện được (not a
number)
|
Undefined
|
Cho biết một biến chưa được gán giá trị
|
Một số phương thức:
Phương thức
|
Mô tả
|
decodeURI()
|
Giải mã chuỗi URI
|
decodeURIComponent()
|
Giải mã chuỗi được mã hóa bằng phương thức
encodeURIComponent()
|
encodeURI()
|
Mã hóa các kí tự đặc biệt trong chuỗi URI (trừ các kí tự:
/ ? : @ & = + $ #)
|
encodeURIComponent()
|
Mã hóa các kí tự đặc biệt trong chuỗi URI
|
escape()
|
Mã hóa các kí tự đặc biệt trong chuỗi
|
unescape()
|
Giải mã các kí tự đặc biệt trong chuỗi
|
eval()
|
Thực hiện biểu thức hoặc các câu lệnh truyền vào
|
Ví dụ:
console.log(escape("!@#$"));
// %21@%23%24
console.log(unescape("%21"));
// !
console.log(encodeURI("http://www.google.com/ my
function?a=1&b=2"));
console.log(encodeURIComponent("http://www.google.com/
my function?a=1&b=2"));
// http%3A%2F%2Fwww.google.com%2F%20my%20function%3Fa%3D1%26b%3D2
Sử dụng eval():
<script>
// const x = 4;
//
alert("Giá trị của x là: " + x);
const str = 'const x = 4;
alert("Giá trị của x là: " + x);';
eval(str);
</script>
Clip 43. Đối
tượng global (tt)
Phương thức
|
Mô tả
|
isFinite()
|
Kiểm tra một giá trị có là số hữu hạn không
|
isNaN()
|
Kiểm tra một giá trị có phải là NaN không
|
Number()
|
Đổi giá trị của đối tượng khác thành giá trị của đối tượng
Number
|
ParseFloat()
|
Đổi giá trị chuỗi thành giá trị số
|
ParseInt()
|
Đổi giá trị chuỗi thành giá trị số
|
String()
|
Đổi giá trị của đối tượng khác thành giá trị của đối tượng
String
|
Clip 44. Lập trình hướng đối tượng trong JavaScript
[Đọc thêm về OOP trong ES6 để cập nhật những khác biệt so
với OOP trong JavaScript truyền thống: https://toidicode.com/classes-trong-es6-340.html]
Theo JavaScript truyền thống, vì không có từ khóa class, nên
sẽ tạo luôn đối tượng, có ba cách để tạo ra một đối tượng.
– Dùng từ khóa function để tạo một hàm (một hàm cũng là một
đối tượng)
– Dùng từ khóa this.tenBien = function() {}; để tạo đối
tượng
– Dùng từ khóa var để khai báo một biến thuộc kiểu đối tượng
(object). var object = {};
Ví dụ tạo đối tượng theo cách 1:
function myValidate(){}
var myObject =
new myValidate();
console.log(typeof
myObject); //object
Ví dụ tạo đối tượng theo cách 2:
this.myValidate2 = function(){};
var myObject =
new myValidate2;
console.log(typeof
myObject); //object
Ví dụ tạo đối tượng theo cách 3:
var myObject = {};
console.log(typeof
myObject); //object
Thuộc tính và truy
cập vào thuộc tính
var student = {
ten
: "Nguyen Van Teo"
};
console.log(student.ten);
Phương thức và truy
cập vào phương thức
var student = {
ten
: "Nguyen Van Teo",
chao(){
alert("hi
Teo");
}
};
console.log(student.ten);
student.chao();
Clip 44. Lập trình hướng đối tượng trong JavaScript (tt)
Tính đóng gói trong
lập trình hướng đối tượng
– JavaScript “cũ” không có thuộc tính kiểu private, tuy
nhiên, có thể giả lập kiểu private bằng từ khóa var, prefixes hoặc clousures. Đọc
thêm: https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Add-on_SDK/Guides/Contributor_s_Guide/Private_Properties
Ví dụ, sử dụng từ khóa var để tạo thuộc tính kiểu private:
this.myValidate = function(){
var
private = "private text";
this.getPrivate
= getPrivate;
function
getPrivate(){
return
private;
}
}
var myObject =
new myValidate();
console.log(myObject.getPrivate());
// thử gọi trực tiếp > không truy
cập được
console.log(myObject.private);
– Một hàm mặc định sẽ có kiểu public
Truyền giá trị cho
thuộc tính qua đối tượng
this.myValidate = function(val1, val2){
this.msg = val1;
this.data = val2;
}
var myObject = new myValidate('test', 100);
console.log(myObject.msg);
console.log(myObject.data);
Truyền giá trị cho
thuộc tính qua phương thức
this.myValidate = function(){
this.msg = 'Gia tri cu';
this.setMsg = setMsg;
function setMsg(val){
this.msg = val;
}
};
var myObject = new myValidate();
console.log(myObject.msg);
myObject.setMsg('Gia tri moi');
console.log(myObject.msg);
Kế thừa
Để kế thừa sử dụng phương thức call() theo cú pháp:
this.lopCon = function(){
lopCha.call(this);
}
this.myValidate = function(){
this.myValue = '';
this.getValue = getValue;
this.setValue = setValue;
function getValue() { return this.myValue; }
function setValue(val) { this.myValue = val; }
};
// myValidateChild kế thừa từ myValidate
this.myValidateChild = function(){
myValidate.call(this);
};
var myObj = new myValidateChild();
myObj.setValue('JavaScript');
console.log(myObj.myValue);
Bài tập về OOP:
Tạo đối tượng box để vẽ các hình trên trang giao diện web,
để vẽ một hình cần truyền các thông tin: chiều rộng, chiều cao, màu chữ, màu
nền và nội dung bên trong. Ví dụ: [“100px”, “100px”, “yellow”, “red”], “Box01”.
this.myBox = function(){
// khai báo thuộc tính
this.text = '';
this.att = '';
// khai báo phương thức
this.createBox = createBox;
var createStyle = createStyle; //var: để tạo phương thức kiểu private
// định nghĩa phương thức
function createBox(att, text){
var result;
var style = createStyle(att);
result = '<div style="' + style + '">' + text + '</div>';
return result;
}
function createStyle(att){
var style = 'text-align: center;';
style += ' width:' + att[0];
style += '; height:' + att[1];
style += '; background-color:' + att[2];
style += '; color:' + att[3];
style += '; line-height:' + att[1];
return style;
}
};
var box = new myBox();
document.write(box.createBox(['100px','100px','yellow','red'],'Box01'));
document.write(box.createBox(['100px','100px','green','blue'],'Box02'));
---------
Cập nhật [3/9/2020]
-----------