Javasripts

Tìm Hiểu OOP của JavaScript

I.Định nghĩa lớp và đối tượng

Để định nghĩa đối tượng có hai cách .
cách 1 : Dùng new Object(); code demo :

            
var myObject = new Object();  // tạo mới 1 đối tượng rỗng
 function test()
            {
                alert(myObject);
            }

Cách tạo thuộc tính cho đối tượng

      
            function test()
            {
                var myObject = new Object(); // tạo mới 1 đối tượng rỗng
                myObject.name="NgocBD"; // tạo thêm thuộc tích name đồng thời thiết lập giá trị cho    thuộc tính này = "NgocBD"
                myObject.age=27;// tạo thêm thuộc tích ageđồng thời thiết lập giá trị cho thuộc tính này = 27
                alert("Your name :"+myObject.name+"\n Age :"+myObject.age); // hiển thị thông báo
            }

Cách tạo và định nghĩa phương thức cho đối tượng

    
            var myObject = new Object();
                myObject.name="NgocBD";
                myObject.age=27;
                myObject.say= function() // Tạo thêm một method mới - method say đồng thời định nghĩa method
                {
                    alert(this.name+" say Hello !!"); 
                }
            function test()
            {
                myObject.say();        // gọi method của đối tượng     myObject        
            }

cách 2 : Dùng từ khóa function

    
            var Person = function()
            {
                this.name="";
                this.age=0;

            }
            var myObject = new Person();
            myObject.name="NgocBD";

            function test()
            {
               alert("Your name :"+myObject.name+"\n Age :"+myObject.age); 
            }

Có sự khác biệt giữa 2 cách trên . Cách thứ 2 chúng ta không xây dựng một đối tượng từ lớp Object mà tự tạo ra một lớp mới – Lớp Person, sau đó mới tạo một đối tượng myObject từ lớp Person cách thứ giúp chung ta định nghĩa ra một lớp nói chung là Person sau đó có thể tạo ra nhiều đối tượng từ lớp này mà vẫn sự dụng được một số tài nguyên của lớp .
Ví dụ :
Nếu sử dụng cách định nghĩa thứ nhất mà muốn tạo ra 2 đối tượng

    
            var myObject = new Object();
                myObject.name="NgocBD";
                myObject.age=27;
                myObject.say= function()
                {
                    alert(this.name+" say Hello !!"); 
                }
                var myObject2 = new Object();
                myObject2.name="NgocNV";
                myObject2.age=27;

            function test()
            {
                myObject2.say();        //Lỗi do myObject2 không có phương thức say()
            }

Có thể sửa thành

    
            var myObject = new Object();
                myObject.name="NgocBD";
                myObject.age=27;
                myObject.say= function()
                {
                    alert(this.name+" say Hello !!"); 
                }
                var myObject2 = new Object();
                myObject2.name="NgocNV";
                myObject2.age=27;
                myObject2.say= function()
                {
                    alert(this.name+" say Hello !!"); 
                }

            function test()
            {
                myObject2.say();        //OK myObject2 đã có say()
            }

Nhưng rõ ràng việc định nghĩa đối tượng sử dụng lớp Object gặp vấn đề khi phải lặp lại đoạn mã cho phương thức say() , mặc dù code không khác gì phương thức say() của myObject .
Cách định nghĩa thứ 2 giúp chúng ta tận dụng tốt hơn , tiết kiệm mã hơn , chuẩn hơn …

    
            var Person = function()
            {
                this.name="";
                this.age=0;
                this.say=function()
                {
                    alert(this.name+" say Hello !!"); 
                }

            }
            var myObject = new Person();
            myObject.name="NgocBD";
            var myObject2 = new Person();
            myObject2.name="NgocNV";
            function test()
            {
               myObject.say();
               myObject2.say();
            }

Với phương pháp này chúng ta có thể tạo bao nhiêu đối tượng từ lớp Person thì đối tượng này dĩ nhiên đã có phương thức say() .
Trong đoạn mã trên Person được gọi là lớp (Class) (Person cũng tên lớp) myObject và myObject2 được gọi là hiện thực của lớp hay đối tượng (instance of Class or Object) name và age là thuộc tính (properties) và say() là thương thức (method) Để tạo được đối tượng từ lớp ta cần gọi một hàm gọi là hàm dựng hàm dựng này cùng tên với tên lớp
Trong đoạn mã

var Person = function()
{

Đây chính là việc khai báo hàm dựng cho lớp Person
Trong đoạn mã

var myObject = new Person();

Thì new Person() chính là lời gọi hàm dựng . Hàm này có nhiệm vụ tạo ra đối tượng từ lớp Person; Hàm dựng có thể truyền các tham số như các hàm thông thường khác .
Ví dụ :

    
            var Person = function(strName,intAge)
            {
                this.name=strName;
                this.age=intAge;
                this.say=function()
                {
                    alert(this.name+" say Hello !!"); 
                }
            }
            var myObject = new Person("NgocBD",27);
            var myObject2 = new Person("NgocNV",27);
            function test()
            {
               myObject.say();
               myObject2.say();
            }

Cách tham chiếu đến các thành phần của đối tương [tên_đối_tượng].[tên_thuộc_tính_hoặc_phương thức]
vd :

alert(myObject.name) // lấy giá trin thuộc tính name và alert
myObject.say() // Gọi phương thức say

Demo code tạo ra một lớp pixel để tái sử dụng nhiều lần:

    
            var pixel= function(x,y,w,h)
            {
                this.x=x; // Dặt một vài thuộc tính truyền vào từ hàm dựng
                this.y=y;
                this.width=w
                this.height=h;
                this.draw=function(element)
                {
                    var str = document.createElement("div"); // tạo một đối tượng HTML div
                    str.style.background="#FF0000"; // thiết lập thuụoc tính màu
                    str.style.position="absolute"; //  thiết lập thuụoc tính  vị trí là tuyệt đối
                    str.style.height=this.height+"px";//thiết lập thuụoc tính height của div = height của pixel
                    str.style.width=this.width+"px"; // tương tụ
                    // thiết lập thuụoc tính top và left
                    str.style.top=this.x+"px"; 
                    str.style.left=this.y+"px";
                    element.appendChild(str); // đặt và Element
                }
            }
            function test()
            {
               var one= new pixel(100,100,10,10);                   
               one.draw(document.getElementById("content"));
            }

Định nghĩa thuộc tính và phương thức

Để định nghĩa thuộc tính cho lớp ta có hai cách :
Cách 1: Định nghĩa thuộc tính trong khi định nghĩa lớp

    
             var Person=function ()
            {
                this.name="Chua co ten";
            }        
            function test()
            {
               var myObject = new Person();            
               alert(myObject.name);
               myObject.name="NgocBD";
               alert(myObject.name);
            }

        Click here

cú pháp this.[tên_thuộc_tính]=[giá_trị_khởi_tạo_mặc_định];
Cách 2 : Định nghĩa thuộc tính sau khi định nghĩa lớp :

var Person=function()

{

                //Không định nghĩa gì tại đây                        
            }        
            Person.prototype.name="Chua co ten"            
            function test()
            {
               var myObject = new Person();            
               alert(myObject.name);
               myObject.name="NgocBD";
               alert(myObject.name);

            }  

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s