Chúng ta cùng tiếp tục khám phá
công dụng của đối tượng.
Ta sẽ quay lại với chương trình đã sử dụng
trong bài hướng dẫn về các hàm.
Chương trình này chứa hàm drawWinston
có khả năng vẽ Winston,
và chứa một cặp x và y nhất định.
Ở dưới đây, ta gọi hàm drawWinston 4 lần.
Mỗi lần gọi với một cặp tọa độ x và y khác nhau.
Các bạn biết tôi mà.
Khi tôi nhìn vào 4 lần gọi drawWinston
gần giống hệt nhau này,
tất cả những gì tôi có thể nghĩ ra là sẽ tốt hơn bao nhiêu
nếu ta sử dụng vòng lặp
và chỉ cần gọi một lần trong vòng lặp,
thay đổi x và y cho mỗi lần lặp.
Để làm được điều đó, ta phải tìm cách
lưu trữ các tọa độ x và y này trong một mảng
để có thể lặp được.
Vậy với bộ giá trị này,
ta có thể tạo 2 mảng:
một mảng cho x, và một mảng cho y.
Như vậy xPostitions, ta có thể có 99, 294,
101, và 294.
Còn yPositions, ta sẽ có 117, 117,
316, 316.
Được rồi, bây giờ ta có thể lặp qua những tọa độ đó
với vòng lặp for, var i = 0,
i < xPositions.length, i++.
Như vậy ta sẽ lặp qua từng phần tử trong xPositions,
và ta nhập drawWinston,
xPositions[i]s,
và yPositions[i].
Được rồi.
Ta thử xóa xem có được không nhé.
Vậy là được rồi.
Bây giờ ta có thể gọi được,
chỉ với một dòng mã
chạy hàm drawWinston, nhưng mỗi lần chạy
với một vị trí khác nhau trong mảng xPositions.
Ta có thể tiếp tục thêm vào
bằng cách nhập 10 rồi cộng thêm 1,
rồi lại cộng thêm 1 và cộng thêm 1,
sau đó là 100 và 1.
Trông bắt đầu lộn xộn rồi,
tôi chẳng thích tí nào vì rất khó có thể
thấy x nào liên quan tới y nào.
Tôi muốn chỉ cần liếc qua
cũng biết mình đang nhìn vào cặp x, y nào.
Thay vì phải đảm bảo
sắp xếp chúng một cách hoàn hảo
như thế này.
Tôi muốn tìm cách khác để lưu trữ những tọa độ này.
Ta có thể lưu trữ chúng dưới dạng đối tượng
vì thử nghĩ mà xem, mỗi vị trí
lại chứa 2 thông tin cơ bản, x và y.
Vì vậy ta có thể có 2 đối tượng mang thuộc tính x và y.
Sau đó ta có thể tạo một mảng đối tượng
với những vị trí x, y này.
Ta cùng làm nhé.
Ta nhập var positions =,
đây cũng sẽ là một mảng,
nhưng mỗi phần tử, thay vì là một số,
sẽ là một đối tượng.
Ta có ngoặc nhọn,
sau đó ta sẽ nhập x 99,
y 117.
Được rồi, bây giờ ta đã có một trong các vị trí ở đây,
ta sẽ thêm một vị trí nữa,
và thêm một vị trí nữa.
Như vậy, x sẽ là 294, 117.
Xong, vị trí thứ ba sẽ là 101, 316.
Và cuối cùng là 294
và 316.
Được rồi, bây giờ ta đã có một mảng đối tượng
trong đó mỗi đối tượng đều chứa thuộc tính x và y.
Ở dưới đây trong vòng lặp for,
ta sẽ chỉ thay đổi cái này để lặp qua positions.length,
sau đó ta sẽ đưa vào đối tượng.
Hiện tại, ta đang đưa vào toàn bộ đối tượng,
nhưng ta chỉ cần đưa vào x và y thôi,
vì vậy ta cần có positions[i].x và positions[i].y.
Ta-dah!
Bây giờ ta có thể xóa chỗ mảng cũ này rồi.
Tuyệt vời!
Tôi thấy đẹp hơn nhiều rồi đấy,
mã dễ đọc hơn nhiều nữa,
cứ có mã dễ đọc hơn là tốt rồi.
Và ta cũng có thể thêm thắt dễ dàng hơn nữa,
nếu tôi muốn thêm,
tôi sẽ thêm luôn một cặp vào đây,
ta có thể nhập x 200, y 200,
cho một Winston nho nhỏ vào giữa đây.
Xong.
Bây giờ tôi muốn cho các bạn xem một thứ còn hay ho hơn nữa.
Hãy chú ý cách hàm của chúng ta tiếp nhận
rồi sử dụng 2 số.
Ta có thể thay đổi hàm
để nó tiếp nhận đối tượng,
rồi ta lấy x và y từ đối tượng đó.
Điều đó có nghĩa là ta có thể đưa vào đối tượng ở dưới đây.
Ta cùng thử nhé.
Ta đưa vào một đối tượng, nó hỏng rồi.
Đó là bởi hàm của ta cần 2 đối tượng,
mà ta lại chỉ đưa vào 1.
Vì thế ta sẽ đổi thành facePosition.
Bây giờ ta lại nhận được một lỗi có nội dung faceX is not defined
vì trước đó, ta đưa vào faceX dưới dạng đối số
nhưng lúc này nó không tồn tại.
Ta chỉ đang đưa vào một đối tượng, vì vậy ta có thể
lưu vị trí x
từ một đối tượng trong biến faceX,
và ta nghĩ, “Được rồi, mình có đối tượng này.
Mình biết đối tượng này có thuộc tính x,
vì vậy mình sẽ lưu nó vào biến faceX.”
Sau đó ta có thể thực hiện tương tự với y,
như vậy faceY = facePosition.y.
Ta-dah!
Và cuối cùng là phần còn lại của hàm sử dụng faceX và faceY.
Bây giờ ta phải đảm bảo đã nhập đúng chính tả.
Nếu nhập xx, chương trình sẽ không hoạt động
vì đó không phải thứ trong mảng đối tượng
mà ta đã đưa vào,
vì vậy ta phải nhập thật chính xác.
NBây giờ khá gọn gàng rồi đấy,
ta có thể có mảng đối tượng,
có các hàm nhận đối tượng,
và các bạn sẽ thấy rằng chương trình của chúng ta
sẽ rất hiệu quả với lối
cấu trúc dữ liệu này.
Ngoài ra vì ta thường muốn
ghép cặp x và y với nhau, tôi nghĩ các bạn sẽ thấy
chúng đặc biệt hữu ích cho tất cả
những chương trình liên quan đến vẽ và hoạt họa.
Chúc các bạn vui vẻ.