Xây dựng đối tượng javascript Xây dựng đối tượng javascript Bởi: Khoa CNTT ĐHSP KT Hưng Yên Đối tượng thuộc tính Như biết, đối tượng JavaScript có thuộc tính kèm với Bạn truy nhập đến thuộc tính cách gọi : objectName.propertyName Cả tên đối tượng tên thuộc tính nhạy cảm Bạn định nghĩa thuộc tính cách gán cho giá trị Ví dụ, giả sử có đối tượng tên myCar (trong trường hợp giả sử đối tượng tồn sẵn sàng) Bạn lấy thuộc tính có tên make, model year sau: myCar.make = “Ford“ myCar.model = “Mustang“ myCar.year = 69; Có mảng lưu trữ tập hợp giá trị tham chiếu tới biến Thuộc tính mảng JavaScript có quan hệ mật thiết với nhau, thực chúng khác cách giao tiếp với cấu trúc liệu Ví dụ truy nhập tới thuộc tính đối tượng myCar mảng sau: myCar[make] = “Ford“ myCar[model] = “Mustang“ myCar[year] = 69; Kiểu mảng hiểu mảng có khả liên kết phần tử liên kết đến giá trị xâu Để minh hoạ việc mày thực 1/9 Xây dựng đối tượng javascript nào, hàm sau hiển thị thuộc tính đối tượng thông qua tham số kiểu đối tượng tên đối tượng function show_props (obj, obj_name) { var result=”” for (i in obj) result=result+ obj_name + “.”+ i+ “=” + obj[i] + “\n” return result } Khi gọi hàm show_props(myCar,”myCar”) lên: myCar.make = Ford myCar.model = Mustang myCar.year = 69; Tạo đối tượng Cả JavaScript client-side server-side có số đối tượng định nghĩa trước Tuy nhiên, bạn tạo đối tượng riêng bạn Trong JavaScript 1.2, bạn muốn tạo đối tượng kiểu đối tượng, bạn tạo cách sử dụng khởi tạo đối tượng Hoặc bạn muốn tạo nhiều cá thể kiểu đối tượng, bạn tạo hàm xây dựng trước, sau tạo đối tượng có kiểu hàm toán tử new Sử dụng khởi tạo đối tượng Trong phiên trước Navigator, bạn tạo đối tượng cách sử dụng hàm xây dựng chúng sử dụng hàm cung cấp vài đối tượng khác để đạt mục đích Tuy nhiên, Navigator 4.0, bạn tạo đối tượng cách sử dụng khởi tạo đối tượng.Bạn sử dụng cách bạn muốn tạo cá thể đơn lẻ nhiều cá thể đối tượng 2/9 Xây dựng đối tượng javascript Cú pháp để tạo đối tượng cách khởi tạo đối tượng (Object Initializers): objectName={property1: value1, property2: value2, , propertyN: valueN} Trong objectName tên đối tượng mới, propertyI xác minh (có thể tên, số xâu ký tự) valueI biểu thức mà giá trị gán cho propertyI Có thể lựa chọn khởi tạo tên đối tượng khai báo Nếu bạn không cần dùng đến đối tượng chỗ, bạn không cần phải gán cho biến Nếu đối tượng tạo cách khởi tạo đối tượng mức cao nhất, lần đối tượng xuất biểu thức, JavaScript đánh giá lại lần Ngoài ra, sử dụng việc khởi tạo hàm lần gọi hàm, đối tượng khởi tạo lần Giả sử bạn có câu lệnh sau: if (condition) x={hi: ”there.”} Trong trường hợp này, JavaScript tạo đối tượng gắn vào biến x biểu thức condition đánh giá Còn ví dụ sau tạo đối tượng myHonda với thuộc tính: myHonda={color:”red”,wheels:4,engine:{cylinder:4,size:2.2}} Chú ý thuộc tính engine đối tượng với thuộc tính Trong Navigator 4.0, bạn sử dụng khởi tạo để tạo mảng Cú pháp để tạo mảng cách khác với tạo đối tượng: arrayName=[element0, element1, ,elementN] Trong đó, arrayName tên mảng mới, elementI giá trị phần tử vị trí mảng Khi bạn tạo mảng cách sử dụng phương pháp khởi tạo, coi giá trị phần tử mảng, chiều dài mảng số tham số 3/9 Xây dựng đối tượng javascript Bạn không cần phải định rõ tất phần tử mảng Nếu bạn đặt hai dấu phẩy vào hàng, mảng tạo với chốn trống cho phần tử chưa định nghĩa ví dụ đây: Nếu mảng tạo cách khởi tạo(initializer) mức cao nhất, lần mảng xuất biểu thức, JavaScript đánh giá lại lần Ngoài ra, sử dụng việc khởi tạo hàm lần gọi hàm, mảng khởi tạo lần Ví dụ1: Tạo mảng coffees với phần tử độ dài mảng 3: coffees = [“French Roast”,”Columbian”,”Kona”] Ví dụ 2: Tạo mảng với phần tử khởi đầu phần tử rỗng: fish = [“Lion”, ,” Surgeon”] Với biểu thức này, fish[0] “Lion”, fish[2] ” Surgeon”, fish[2] chưa định nghĩa Sử dụng hàm xây dựng(Constructor Function) Bạn tạo đối tượng riêng với hai bước sau: • Định nghĩa kiểu đối tượng cách viết hàm xây dựng • Tạo cá thể đối tượng toán tử new Để định nghĩa kiểu đối tượng, ta phải tạo hàm để định rõ tên, thuộc tính cách thức kiểu đối tượng Ví dụ giả sử bạn muốn tạo kiểu đối tượng ô tô với tên car, có thuộc tính make, model, year color, để thực việc viết hàm sau: function car(make, model, year ) { this.make = make this.model = model this.year = year } 4/9 Xây dựng đối tượng javascript Chú ý việc sử dụng toán tử this để gán giá trị cho thuộc tính đối tượng phải thông qua tham số hàm Ví dụ, bạn tạo đối tượng kiểu car sau: mycar = new car(“Eagle”,”Talon TSi”,1993) Câu lệnh tạo đối tượng mycar liên kết giá trị đưa vào với thuộc tính Khi giá trị mycar.make “Eagle”, giá trị mycar.model “Talon TSi”, mycar.year số nguyên 1993 Cứ bạn tạo nhiều đối tượng kiểu car Một đối tượng có thuộc tính mà thân đối tượng Ví dụ bạn định nghĩa thêm đối tượng khác person sau: function person(name, age, sex) { this.name=name this.age=age this.sex=sex } Và sau ta tạo hai người mới: rank = new person(“Rank McKinnon”,33,”M”) ken = new person(“Ken John”,39,”M”) Bây bạn định nghĩa lại hàm xây dựng car sau: function car(make, model, year,owner ) { this.make = make this.model = model this.year = year 5/9 Xây dựng đối tượng javascript this.owner = owner } Như bạn tạo đối tượng kiểu car mới: car1 = new car(“Eagle”,”Talon TSi”,1993,rank) car2 = new car(“Nissan”,”300ZX”,1992,ken) Như vậy, thay phải qua xâu ký tự hay giá trị số tạo đối tượng, ta cần đưa hai đối tượng tạo câu lệnh vào dòng tham số đối tượng tạo Ta lấy thuộc tính đối tượng owner câu lênh sau: car2.owner.name Chú ý bạn tạo thuộc tính cho đối tượng trước định nghĩa nó, ví dụ: car1.color=”black” Như vậy, thuộc tính color đối tượng car1 gán “black” Tuy nhiên, không gây tác động tới đối tượng kiểu car khác Nếu muốn thêm thuộc tính cho tất đối tượng phải định nghĩa lại hàm xây dựng đối tượng Lập mục lục cho thuộc tính đối tượng Trong Navigator 2.0, bạn gọi thuộc tính đối tượng tên thuộc tính số thứ tự Tuy nhiên từ Navigator 3.0 trở đi, ban đầu bạn định nghĩa thuộc tính tên nó, bạn luôn phải gọi tên, bạn định nghĩa thuộc tính số bạn luôn phải gọi tới số Điều ứng dụng bạn tạo đối tượng với thuộc tính chúng hàm xây dựng (như ví dụ kiểu đối tượng car phần trước) bạn định nghĩa thuộc tính riêng đối tượng (như mycar.color=”red”) Vì bạn định nghĩa thuộc tính đối tượng từ đầu số mycar[5]=”25 mpg”, bạn gọi tới thuộc tính khác mycar[5] Tuy nhiên điều đối tượng tương ứng HTML mảng form Bạn gọi tới đối tượng mảng số thứ tự tên chúng Ví dụ thẻ thứ hai document có thuộc tính NAME “myform” bạn gọi tới form document.form[1] document.form[“myForm”] document.myForm 6/9 Xây dựng đối tượng javascript Định nghĩa thêm thuộc tính cho kiểu đối tượng Bạn thêm thuộc tính cho kiểu đối tượng định nghĩa trước cách sử dụng thuộc tính property Thuộc tính định nghĩa tác dụng đối tượng mà có tác dụng tất đối tượng khác kiểu.Ví dụ sau thực thêm thuộc tính color cho tất đối tượng kiểu car, sau gắn giá trị màu cho thuộc tính color đối tượng car1: car.prototype.color=null car1.color=”red” Định nghĩa cách thức Một cách thức hàm liên kết với đối tượng Bạn định nghĩa cách thức có nghĩa bạn định nghĩa hàm chuẩn Bạn sử dụng cú pháp sau để gắn hàm cho đối tượng tồn tại: object.methodname = function_name Trong object đối tượng tồn tại, methodname tên cách thức function_name tên hàm Bạn gọi cách thức từ đối tượng sau: object.methodname() Bạn định nghĩa cách thức cho kiểu đối tượng cách đưa cách thức vào hàm xây dựng đối tượng Ví dụ bạn định nghĩa hàm định dạng hiển thị thuộc tính đối tượng kiểu car xây dựng phần trước: function displayCar () { var result = “Abeautiful”+this.year+ “ ”+ this.make + “ ”+ this.model document.write(result) } Bạn thêm cách thức vào cho đối tượng car cách thêm dòng lệnh sau vào hàm định nghĩa đối tượng 7/9 Xây dựng đối tượng javascript this.displayCar= displayCar; Như định nghĩa lại đối tượng car sau: function car(make, model, year,owner ) { this.make = make this.model = model this.year = year this.owner = owner this.displayCar= displayCar } Sau đó, bạn gọi cách thức displayCar đối tượng: car1.displayCar() car2.displayCar() Sử dụng cho tham chiếu đối tượng (Object References) JavaScript có từ khoá đặc biệt this mà bạn sử dụng với cách thức để gọi tới đối tượng thời Ví dụ, giả sử bạn có hàm validate dùng để xác nhận giá trị thuộc tính đối tượng nằm khoảng đó: function validate(obj, lowval, hival) { if ( (obj.valuehival) ) alert(“Invalid value!”) } Sau bạn gọi hàm validate từ thẻ kiện onChange: 8/9 Xây dựng đối tượng javascript Khi liên kết với thuộc tính form, từ khoá this gọi tới form cha đối tượng thời Trong ví dụ sau, myForm có chứa đối tượng Text nút bấm Khi người sử dụng kích vào nút bấm, trường text hiển thị tên form Thẻ kiện onClick nút bấm sử dụng this.form để gọi tới form cha myForm Form name: Xoá đối tượng Trong JavaScript cho Navigator 2.0, bạn xoá đối tượng-chúng tồn bạn rời khỏi trang Trong JavaScript cho Navigator 3.0 cho phép bạn xoá đối tượng cách đặt cho trỏ tới giá trị Null (nếu lần cuối gọi tới đối tượng) JavaScript đóng đối tượng thông qua biểu thức gán 9/9 ... 69; Tạo đối tượng Cả JavaScript client-side server-side có số đối tượng định nghĩa trước Tuy nhiên, bạn tạo đối tượng riêng bạn Trong JavaScript 1.2, bạn muốn tạo đối tượng kiểu đối tượng, bạn... thể đối tượng 2/9 Xây dựng đối tượng javascript Cú pháp để tạo đối tượng cách khởi tạo đối tượng (Object Initializers): objectName={property1: value1, property2: value2, , propertyN: valueN} Trong. .. hàm xây dựng( Constructor Function) Bạn tạo đối tượng riêng với hai bước sau: • Định nghĩa kiểu đối tượng cách viết hàm xây dựng • Tạo cá thể đối tượng toán tử new Để định nghĩa kiểu đối tượng,