Welcome to Comedown's Blog Technology !
Loading...

Object-Oriented Javascript

Người đăng: Unknown Thứ Tư, 15 tháng 7, 2009 Lượt xem: counter

Không thể nào bỏ xuống được khi đọc. Cuốn sách này làm tôi thay đổi quan điểm của mình về Apress - một nhà sách được viết bởi mấy tác giả củ chuối của Ấn Độ, toàn là mấy cái dễ và ko có gì chuyên sâu cả.

Chương này tác giả đánh giá là chương quan trọng nhất trong cuốn sách, bàn về references, scope, closure, context.

Thuật ngữ object-oriented javascript có vẻ thừa thải vì javascript language toàn bộ là object, có cái nào khác object đâu. Nhưng tác giả muốn nhấn mạnh ở đây vì đa số cách sử dụng toàn là functionally, hiểu sai khái niệm và mơ hồ trong việc sử dụng object của hầu hết các developer.

References

Reference là 1 pointer trỏ đến location thật của object. Nếu 2 object có cùng 1 reference thì sửa cái này cái kia cũng bị thay đổi theo (cái này bình thường). Tuy nhiên, một số cái ta có thể ta không để ý:

* Javascript không có khái niệm reference đến 1 reference (Perl có), mà object khi reference sẽ reference đến một object thật sự. Do đó nếu object ban đầu trỏ đến một đối tượng khác thì các object kia reference đến nó sẽ không bị ảnh hưởng.

var items = new Array("one", "two", "three");
// itemsRef reference to item
var itemsRef = items;

// set items to equal a new object
items = new Array("four", "five");

alert(items != itemsRef);

* Chú ý một số tác vụ modify object có thể sinh ra một object mới (như concatenate string trong js)

var item = "test";
var itemRef = item;
item += "ing";
// do tác vụ cộng chuỗi làm cho object item trỏ đến một đối tượng khác, không còn là "test" nữa
alert(item != itemRef);

Scope

Scope được tính bên trong function, không phải bên trong block (vd while, if, for). Trong js, mỗi function được execute như là một method của một object.

Nếu ta khai báo biến và function khơi khơi, không chỉ định 1 scope nào hết thì nó thuộc về global scope, thật ra là thuộc về scope của object window. Xem ví dụ sau:

var foo = "test";

function test() {
var foo = "tele";
}

test();
alert(foo == "tele"); // return false;

do biến foo bên trong hàm test chỉ thuộc scope của hàm test nên nó không làm ảnh hưởng đến biến toàn cục foo bên ngoài.

Closures

Phần closure tác giả viết không hay như trong cuốn Asp.net Ajax in Action (chương 3 - javascript for ajax developers).

Closures là cách thức một inner function có thể tham khảo đến các biến trong một function cha, ngay cả khi function cha đó đã bị terminated. Xem ví dụ sau

function parent(arg) {
var parentVar = "I am a variable of parent";

function child() {
alert(arg + parentVar);
}

child();
}

parent("hello, "); // alert message hello, I am a variable of parent

Hàm child trong ví dụ trên gọi là nested function, được khai báo bên trong hàm cha. Ta thấy nó có thể truy xuất các biết định nghĩa bên ngoài function body của nó. Vấn đề này bình thường. Chuyện gì xảy ra nếu ta thay đổi như sau:


function parent2(arg) {
var parentVar = "I am a variable of parent";

function child() {
alert(arg + parentVar);
}

return child;
}

var theChild = parent2("yes, ");
theChild(); // alert message - yes, I am a variable of parent

Ta thấy rõ ràng sau khi hàm parent2 của nó được gọi và terminated, các variables của nó vẫn còn tồn tại và có thể được truy xuất bởi inner function. Đây gọi là closure.

Context

Là object vùng code mà object đang hoạt động bên trong. Biến this luôn reference đến object này (trong global context, biến this chỉ đến window object). Xem ví dụ sau:

var obj = {
yes: function() {
// this == obj
this.value = true;
},
no: function() {
this.val = false;
}
}

alert(obj.val == null); // ban đầu chưa gọi hàm nên biến val chưa tồn tại

obj.yes();
alert(obj.val == true);

// ta trỏ hàm no của object window vô hàm no của object obj
window.no = obj.no;
window.no(); // hàm no sẽ được execute trong context của window object

alert(obj.val == true); // do đó val của obj không bị thay đổi
alert(window.val == false); // hiển nhiên

Javascript cung cấp một cách set context vào trong function khi gọi hàm, thông qua hàm call. Ví dụ:

function changeColor(color) {
this.style.color = color;
}

var main = document.getElementById("main");
changeColor.call(main, "black"); // this bây giờ trỏ vô biến main

Object Creation

Phần này thấy đơn giản nhưng cũng có nhiều điều thú vị. Trong javascript, không có khái niệm class (nên không thể tạo object với một kiểu class nào đó), chỉ có object. Object này có thể tạo ra object kia và thừa kế từ các object khác (gọi là prototypal inheritance)

Để tạo một object có 1 kiểu nào đó, javascript cung cấp phương pháp khởi tạo function như là một object. Xem ví dụ sau:


function User(name) {
this.name = name;
}

var me = new User("my name"); // khởi tạo object của function đó qua toán tử new (constructor)
alert(me.name == "my name"); // name bây giờ trở thành property của object me, this pointer trỏ vào me
alert(me.constructor == User); // property constructor của me bây giờ chính là User

Ví dụ này chứng tỏ:

* Mỗi object đều có constructor property
* Constructor property trỏ vào function nào đã tạo ra nó.


Nguồn :-Dzinh on tech [Chapter 2 - Prof Javascript Techniques (Apress)]

0 nhận xét

Đăng nhận xét

1. Vui lòng nhập tiếng việt có dấu.
2. Không sử dụng từ ngữ thô tục, trái với thuần phong mỹ tục.
3. Nội dung phải liên quan tới chủ đề bài viết, bạn có thể sử dụng một số thẻ HTML như <b>, <i>, <a>
4. Những nhận xét mang tính chất Đồi trụy, Quảng cáo, Spam hoặc không có tính xây dựng... sẽ bị xóa vĩnh viễn mà không cần báo trước.

Bài đăng Mới hơn Bài đăng Cũ hơn Trang chủ
Blogumulus by Roy Tanck and Amanda FazaniInstalled by CahayaBiru.com

Followers

Cộng đồng Blogger

Comedown's Blog
TruongGTGR - Nơi siêu xe hội tụ
Tư vấn tin học