Javascript Object dưới con mắt của Java Developer

Một trong những thách thức lớn nhất đối với Java developer khi tìm hiểu và áp dụng Javascript chính là sự khác biệt giữa việc cách giải thích khác nhau về object giữa hai ngôn ngữ.

Nhìn qua thì Javascript có syntax khá tương tự Java, nhưng về cách tiếp cận lập trình hướng đối tượng của Javascript với prototype-based thì vô cùng khác biệt so với class-based của Java.

Trong bài này, tôi sẽ trình bày về Javascript object dưới góc nhìn của một Java developer, và đưa ra một vài tip cũng như chiến thuật để Java developer có thể sử dụng tốt hơn, cũng như liên kết được concept lập trình hướng đối tượng trong Java và Javascript.

Trong khi Java và một số các ngôn ngữ lập trình khác có một loạt các datatype cũng như collection type thì Javascript chỉ có một số ít primitive type như Boolean, Number, String, Null và Undefined, một loại tương tự collection type là Array, và hỗ trợ các Javascript object khác. Đương nhiên điều này khiến việc học Javascript trở nên đơn giản hơn, nhưng cũng có nghĩa là trong những chức năng cụ thể, chúng ta phải implement những type hay collection mà những ngôn ngữ khác có thể đã cung cấp sẵn.

Bây giờ chúng ta đi vào vấn đề chính, đối với object thì việc đầu tiên là khởi tạo.

Khởi tạo Javascript object.

Có rất nhiều cách để khởi tạo Javascript object. Nhưng dưới con mắt của một Java developer, thông thường sẽ ưa thích việc khởi tạo object bằng cách sử dụng constructor. Một trong những lợi thế đặc biệt quan trọng của việc sử dụng phương thức này đó là object được tạo ra có thể sử dụng bằng nhiều constructor khác nhau, tương ứng với những mục đích khác nhau. Mặt khác, cách thức này cũng là cách thức gần gũi với Java cũng như các ngôn ngữ class-based nhất.

function Person(lastName, firstName) {
   this.firstName = firstName;
   this.lastName = lastName;
}

var person = new Person('Hoang', 'Nguyen');
console.log('The person is ' + person);

Phía trên là cách khởi tạo object bằng phương thức sử dụng constructor, ngoài ra trong Javascript còn có một cách khởi tạo object khác bằng việc sử dụng object initializer.

var person = {}
person.firstName = 'Hoang';
person.lastName = 'Nguyen';

console.log('The person is ' + person);

Phương thức này là phương thức sử dụng một lần duy nhất bởi vì không có function nào được khai báo trước cho việc khởi tạo. Cũng như syntax của nó vô cùng khác biệt so với Java.

Và khi chạy hai đoạn code trên ta được kết quả như sau.

This person is [object Object]
This person is [object Object]

Thêm hàm toString() vào Javascript object.

Tại sao lại là toString()? Tất cả các object trong Java đều được kế thừa từ Object class, toString là một phương thức mà object nào cũng có.

Cũng như Java, tất cả các object trong Javascript đều được extend từ một common object được gọi là Object, và đặc biệt các object tất cả đều được thừa kế những thuộc tính của Object.prototype.

Trong trường hợp này, Object.prototype.toString() cung cấp một chuỗi để đại diện cho tất cả các Javascript object. Trong kết quả ở trên, kết quả hiển thị là dạng ngắn gọn nhất, việc này tương tự với giá trị trả về mặc định của hàm toString() trong Java.

Cũng như việc người ta có thể override hàm toString() trong Java để kết quả trả về những thứ hữu ích hơn, phương thức khởi tạo object bằng constructor trong Javascript cho phép chúng ta có thể override hàm Object.prototype.toString(). Dưới đây là đoạn code cụ thể cho việc đó.

function Person(lastName, firstName) {
   this.firstName = firstName;
   this.lastName = lastName;
}

Person.prototype.toString = function personToString() {
   return this.firstName + ' ' + this.lastName;
}

var person = new Person('Hoang', 'Nguyen');
console.log('The person is ' + person);

Kết quả trả về bây giờ có ích hơn hẳn.

This person is Hoang Nguyen

Từ đó các bạn có thể thấy sự tương đồng giữa java.lang.Object trong Java và Object.prototype trong Javascript.

Tránh sử dụng với global scope trong Javascript

Javascript làm cho việc sử dụng biến ở global scope vô cũng dễ dàng. Các biến trong Javascript function được giới hạn trong function scope mà nó được khai báo bằng từ khóa var. Ngược lại các biến được khai báo mà không nằm trong bất cứ function nào thì không bị giới hạn gì cả và vì thế mỗi thay đổi tác động lên biến đó đều ảnh hưởng lên tất cả các function sử dụng nó. Ý tưởng này trong Javascript làm cho hầu như tất cả các Java developer muốn phát điên.

Từ khóa this thì lại là một sự ngạc nhiên đầy phức tạp khác từ Javascript bởi vì bản thân nó phụ thuộc rất nhiều vào việc nó được sử dụng như thế nào, nó được gọi ở đâu, và nó có nằm trong strict mode hay không. Nói cách khác, việc sử dụng this trong Javascript khó hơn nhiều so với Java, vì trong Java đơn giản là nó reference đến một instance cụ thể của class. Tuy nhiên, khi mà function trong Javascript được sử dụng như là một constructor (với từ khóa new) thì từ khóa this sẽ được bound bằng object đang được tạo ra, đó là lý do vì sao trong function constructor phí trên tôi sử dụng this.

Javascript object hao hao giống như Java Map.

Nhìn qua ví dụ đơn giản dưới đây về cách khai báo một object trong Javascript.

var superhero = {};

superhero.name = 'Superman';  
superhero.strength = 100;

Đối với Java Map.

Map<String, Object> superhero = new HashMap<>();

superhero.put("name","Superman");  
superhero.put("strength", 100);

Rõ ràng là có một sự tương đồng đúng không nào.

Tóm lại.

Mặc dù có những điểm chung về cú pháp, ngay cả cái tên cũng có chung tới bốn chữ cái, nhưng Java và Javascript lại rất khác nhau ở nhiều điểm. Trong thực tế, trong khi cả hai có thể đều được nói là object-oriented hay object-based, nhưng các ứng xử đối với việc tạo object trong mỗi ngôn ngữ lại khác nhau, một bên là class-based (Java) còn bên kia là prototype-based (Javascript).

Việc hiểu một số sự tương đồng cơ bản cũng như sự khác biệt của hai ngôn ngữ có thể giúp developer dễ dàng thay đổi qua lại giữa hai ngôn ngữ. Mặt khác trong ECMAScript 6 (ES6) cũng đã hộ trợ classes với các keyword class, constructor, extend để tạo sự tương đồng, hỗ trợ những developer sử dụng những ngôn ngữ object-oriented khác dễ tiếp cận hơn.

Bài gốc: https://codeaholicguy.wordpress.com/2015/12/22/javascript-object-duoi-con-mat-cua-java-developer/

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hoàng Nguyễn

36 bài viết.
464 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
90 34
Nhu cầu về Javascript developer hiện nay trong thị trường IT là rất lớn. Nếu bạn có kiến thức ở mảng này thì cơ hội nghề nghiệp cũng như thu nhập c...
Hoàng Nguyễn viết hơn 2 năm trước
90 34
White
51 19
Microservices hiện đang nhận được rất nhiều sự chú ý: các bài viết, các blog, các cuộc thảo luận trên phương tiện truyền thông, trên mạng xã hội, v...
Hoàng Nguyễn viết 3 năm trước
51 19
White
46 0
Trong quá trình đi làm, nhất là nếu làm frontend thì chắc chắn sẽ có một lúc nào đó các bạn bị Chrome (trình duyệt nói chung) chửi vô mặt những thứ...
Hoàng Nguyễn viết 3 tháng trước
46 0
Bài viết liên quan
White
10 1
Bài này mình sẽ tổng hợp các cách viết class trong Javascript. Để viết class chúng ta dùng function, còn để tạo singleton thì có thể dùng Object ho...
Mạnh Mẽ lên viết 3 năm trước
10 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
36 bài viết.
464 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!