Thứ Hai, 4 tháng 8, 2014

Ba cách viết( cách đọc hiểu) Class trong javascript


Vài lời nói đầu: 

     Đầu tiên mình xin lỗi vì bài viết tiếng Việt, tiếng Anh lẫn lộn, do trình độ mình chỉ có nhiêu nên không thể Anh ngữ, hay Việt ngữ hoàn toàn nội dung này.

Ý của mình:

     Bài này mình mong muốn các bạn từng code Javascript(js), hay đọc Javascript của người khác có thể hình dung ra sự tồn tại của ba cách viết một Class trong js
    Ưu điểm và nhược điểm của từng cách.
                                                                                                     HCM ngày 5/8/2014 Trần Viễn

1. Using a function

ví dụ: file  ThreeWays.js
Code bình dân nhất

function Apple(type){
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}
// anti-pattern! keep reading...
function getAppleInfo(){    
    return this.color + '' + this.type + ' apple';
}
--> Cách sử dụng
var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());

=> Cách viết "bình dân" có Hạn chế:  là getAppleInfo() thuộc global namespace, do đó có thể conilicts (other libray, ...)

 + Cách khắc phục 1(phần khắc phục được tô đậm):

function Apple(type){
    this.type = type;
    this.color = "red";
    this.getInfo = function(){
        returnthis.color + ' ' + this.type + ' apple';
    };
}

=> Sau khi khắc phục lại sinh ra hạn chế mới: Cứ mỗi khi tạo ra object mới lại lại chạy getInfo; vì constructor scope, vậy mời xem cách khắc phục tiếp theo.

 + Cách khắc phục tiếp theo
  
function Apple(type){
    this.type = type;
    this.color = "red";
}
Apple.prototype.getInfo = function(){
    return this.color + '' + this.type + ' apple';
};

=> Giải quyết được nhược điểm cách ban đầu, và cách 1 và là cách viết hay nhất (theo tôi)
-------------------------------------------------------------

2. Using object literals

var apple = {
    type: "macintosh",
    color: "red",
    getInfo: function(){
        returnthis.color + '' + this.type + ' apple';
    }
}

+ Cái hay là bạn không cần phải suy nghĩ và tạo ra một instanceof của Class, vì nó thật sự có rồi, nên dùng cũng đơn giản thôi mà
 + Còn cái dỡ là singleton: có nghĩa là bạn không thể có hai instanceof của Class này,

apple.color = "reddish";
alert(apple.getInfo());

3. Singleton using a function

var apple = new function(){
    this.type = "macintosh";
    this.color = "red";
    this.getInfo = function(){
       returnthis.color + '' + this.type + ' apple';
    };
}
Nhìn qua thấy giống "Cách khắc phục 1:" ở trên phải không? Nhưng thật ra nó giống "Using object literals"
apple.color = "reddish";
alert(apple.getInfo());

3. Summary


Cuối cùng có nhiều cách viết lắm, nhưng chung quy về cũng là vậy( cách1, 2, 3), chọn cách 2, 3 nhé đừng chọn cách 1 (chưa cải tiến) not good
Chúc bạn hiểu được code của người khác. :)

Không có nhận xét nào:

Đăng nhận xét