Đối Tượng (Object) Trong Javascript

--- Bài mới hơn ---

  • Thao Tác Với Đối Tượng (Object) Trong Javascript
  • Đối Tượng Date Trong Javascript
  • Tìm Hiểu Promise Trong Javascript
  • Tất Tần Tật Về Promise Và Async/await
  • Prototype Trong Javascript Là Gì, Và Tại Sao Nó Lại Quan Trọng?
  • 1. Đối tượng (Object) là gì ?

    Khởi tạo đối tượng

    Đấy là về mặt lý thuyết, còn về mặt thực hành thì để tạo một đối tượng bạn sẽ có hai cách sau.

    Cách 1: Sử dụng từ khóa new Object()

    var Comment = new Object();

    2. Thuộc tính và phương thức đối tượng

    Mỗi đối tượng sẽ có các thuộc tính và phương thức.

    Thuộc tính

    Thuộc tính là những đặc điểm ( có thể hiểu là biến) cần lưu trữ trong đối tượng. Ví dụ với đối tượng Comment thì mình cần các thuộc tính sau.

    Lúc này ta có thể khai báo bằng ba cách.

    // Khởi tạo var Comment = new Object(); // Thêm thuộc tính Comment.title = ''; Comment.content = ''; Comment.fullname = ''; Comment.email = '';

    Cách 2: Sử dụng từ khóa {} và thêm thuộc tính ngay lúc khai báo

    // Khởi tạo var Comment = { title : "", content : "", fullname : "", email : "" };

    Cách 3: Sử dụng từ khóa {} và thêm thuộc tính sau đó

    // Khởi tạo var Comment = {}; // Thêm thuộc tính Comment.title = ''; Comment.content = ''; Comment.fullname = ''; Comment.email = '';

    Trong ba cách trên thì mình khuyến khích các bạn nên sử dụng cách thứ hai bởi vì nó mạch lạc và dễ quản lý code hơn.

    Phương thức

    Phương thức là những hành động ( có thể hiểu là hàm) của đối tượng. Ví dụ trong đối tượng Comment thì mình cần hai phương thức là:

    Lúc này ta sẽ có ba cách khai báo tương tự như cách khai báo thuộc tính.

    // Khởi tạo var Comment = new Object(); // Thêm phương thức Comment.addComment = function(){ // do some thing }; Comment.validateComment = function(){ // do some thing };

    Sử dụng từ khóa Cách 2: {} và thêm phương thức ngay lúc khai báo

    // Khởi tạo var Comment = { addComment : function(){ // do some thing }, validateComment : function(){ // do some thing } };

    Sử dụng từ khóa Cách 3: {} và thêm phương thức sau đó

    // Khởi tạo var Comment = {}; // Thêm phương thức Comment.addComment = function(){ // do some thing }; Comment.validateComment = function(){ // do some thing };

    Và mình cũng khuyến khích các bạn nên sử dụng cách 2.

    Xem danh sách phương thức và thuộc tính

    Cách nhanh nhất để xem và debug đối tượng thì bạn nên sử dụng Firebug. Ví dụ đối tượng Comment trên thì khi sử dụng Firebug kết hợp hàm console.log() thì sẽ có kết quả như hình sau:

    3. Thao tác với thuộc tính và phương thức đối tượng

    Sau khi tạo xong đối tượng thì ta có hai cách sử dụng căn bản đó là gọi và gán dữ liệu cho thuộc tính và phương thức. Nhưng nếu xem xét mọi khía cạnh thì chúng ta có các thao tác thông thường như sau:

    • Gán giá trị cho thuộc tính
    • Lấy giá trị của thuộc tính
    • Gọi phương thức

    Gán giá trị cho thuộc tính

    Để gán giá trị cho thuộc tính chúng ta chỉ việc thực hiện bằng cách sử dụng toán tử = giống như cách gán giá trị cho biến.

    Nhưng nếu bạn gọi từ một hàm trong đối tượng thì bạn có thể sử dụng từ khóa this.

    var Comment = { title : "", addComment : function(){ } };

    Lấy giá trị của thuộc tính

    Để lấy giá trị thuộc tính thì ta làm tương tự như thao tác với biến.

    var title = Comment.title;

    Nếu gọi từ một hàm trong đối tượng thì bạn có thể sử dụng từ khóa this.

    var Comment = { title : "", addComment : function(){ var title = this.title; } };

    Gọi phương thức

    Tương tự như thuộc tính chúng ta gọi bình thường.

    Gọi trong hàm của đối tượng.

    var Comment = { title : "", addComment : function(){ this.validateComment(); }, validateComment : function(){ // do some thing } };

    4. Mảng chứa đôi tượng - đối tượng chứa đối tượng

    Mỗi đối tượng (object) trong Javascript có thể chứa các đối tượng khác hoặc một mảng có thể chứa các đối tượng.

    Đối tượng chứa đối tượng

    Ví dụ 1: Gom các thuộc tính của Comment vào một đối tượng Info.

    var Comment = { info : { title : "", content : "", email : "", fullname : "" } };

    Ví dụ 2: Gom các phương thức (hàm) của Comment vào đối tượng func.

    var Comment = { func : { addComment : function(){ // Something }, validateComment : function(){ // Something } }, };

    Lúc này để truy xuất tới các thuộc tính và phương thức này ta chỉ việc sử dụng dấu chấm và bổ sung thêm một cấp nữa.

    Comment.info.title = "Comment tại freetuts.net"; Comment.func.addComment();

    Mảng chứa đối tượng

    Để gán giá trị là một đối tượng vào mảng cũng tương tự như gán các giá trị bình thường khác (xem mảng trong Javascript).

    // Đối tượng Comment var Comment = { title : "", content : "", email : "", fullname : "" }; // Khởi tạo mảng var Comments = = Comment; // Gọi tới thuộc tính alert(Comments; // Sử dụng alert(Comment[0].title);

    5. Lời kết

    --- Bài cũ hơn ---

  • Tại Sao Tôi Lại Chọn React +Thay Vì Vue Hay Angular
  • Masonry Layout Trong Thiết Kế Web Là Gì?
  • Minify Javascript/css Là Gì? Công Cụ Nén Js/css Trên WordPress
  • Điều Gì Khiến Meteor Js 1.3 Trở Nên Đặc Biệt?
  • Leaflet.js Là Thư Viện Bản Đồ Đơn Giản Nhất Bạn Sẽ Tìm Thấy / Bộ Công Cụ
  • Arguments Object Trong Javascript Là Gì? Cách Sử Dụng?

    --- Bài mới hơn ---

  • Cách Sử Dụng Đối Tượng (Object) Trong Javascript
  • Hướng Dẫncho Người Mới Bắt Đầu
  • Processing.js Các Phần Mềm Thay Thế Và Phần Mềm Tương Tự
  • Prototype Là Gì? Lập Trình Hướng Đối Tượng (Oop) Trong Javascript
  • 8 Js Frameworks Nhỏ Xinh Cho Bạn Đổi Gió
  • Trong ngôn ngữ JavaScript, việc truyền đối số cho function không giống như các ngôn ngữ khác. JavaScript không quan tâm chúng ta truyền vào bao nhiêu đối số, cũng như kiểu dữ liệu của đối số là gì. Chúng ta có thể tạo ra một hàm có hai đối số nhưng chúng ta có thể chỉ truyền vào một đối số hoặc truyền vào ba, bốn, năm…..đối số cũng không có vấn đề gì cả.

    Để làm điều nói ở trên, Javascript cung cấp một biến cục bộ (biến theo ngữ cảnh) với tên arguments chứa các tham số được truyền vào hàm.

    VD:

    function cong(a, b) { alert(arguments); }

    Đối tượng đối số là một biến cục bộ có sẵn trong tất cả các hàm không phải là mũi tên. Bạn có thể tham chiếu đến các đối số của một hàm bên trong hàm đó bằng cách sử dụng đối tượng đối số của nó. Nó có các mục nhập cho mỗi đối số mà hàm được gọi với, với chỉ mục của mục nhập đầu tiên là 0.

    Ví dụ: nếu một hàm được truyền 3 đối số, bạn có thể truy cập chúng như sau:

    arguments

    arguments

    =

    'new value'

    ;

    Tuy nhiên, nó có thể chuyển đổi thành Array:

    var

    args

    =

    Array

    .

    prototype

    .

    slice

    .

    call

    (

    arguments

    )

    ;

    var

    args

    =

    ;

    Hàm arguments hữu ích cho các hàm được gọi với nhiều đối số hơn chúng được khai báo chính thức để chấp nhận. Kỹ thuật này hữu ích cho các hàm có thể được truyền một số đối số thay đổi, giống như Math.min(). Ví dụ hàm này chấp nhận bất kỳ số lượng đối số chuỗi nào và trả về đối số dài nhất:

    function

    longestString

    (

    )

    {

    var

    longest

    =

    ''

    ;

    for

    (

    var

    i

    =

    0

    ;

    i

    <

    arguments

    .

    length

    ;

    i

    ++

    )

    {

    longest

    =

    arguments

    [

    i

    ]

    ;

    }

    }

    return

    longest

    ;

    }

    Bạn có thể dùng arguments.length để đếm có bao nhiêu đối số mà hàm được gọi với. Thay vào đó, nếu bạn muốn đếm số lượng tham số mà một hàm được khai báo để chấp nhận, hãy kiểm tra hàm length.

    Cập nhật các thông tin tuyển dụng ngành cntt tại Topdev.vn

    --- Bài cũ hơn ---

  • Javascript Đã Tạo Ra Object Từ Function Như Thế Nào?
  • Javascript Data Types And Data Structures
  • Tổng Quan Về Ngôn Ngữ Lập Trình Typescript
  • Cách Sử Dụng Thư Viện Masonry Của Javascript
  • Hướng Dẫn Minify Html, Javascript Và Css Trong WordPress
  • Bàn Về Khái Niệm Object Trong Javascript

    --- Bài mới hơn ---

  • Object Javascript Và Những Điều Bạn Cần Biết
  • Thuật Ngữ Plain Old Java Object (Pojo) Có Nghĩa Chính Xác Là Gì?
  • Thuật Ngữ Plain Old Java Object (Pojo) Có Nghĩa Là Gì?
  • Tìm Hiểu Về Poco (Plain Old Class Object)
  • Object Và Class Trong Java Với Ví Dụ Cụ Thể
  • Nhắc lại về các kiểu dữ liệu trong Javascript, ta có 5 kiểu dữ liệu cơ bản và 1 kiểu dữ liệu phức hợp. 5 kiểu dữ liệu cơ bản bao gồm: Number, String, Boolean, UndefinedNull. Kiểu dữ liệu phức hợp là kiểu dữ liệu Object.

    Kiểu dữ liệu Object được sử dụng rất thường xuyên trong Js vì nó rất biến hoá và mạnh mẽ, đây là khái niệm cơ sở cho hàng loạt các đặc điểm nổi bật khác của Javascript, ta hãy thử xem nó là gì nào.

    1. Khái niệm Object là gì?

    Về mặt định nghĩa, một đối tượng (một object) là một danh sách các item, mỗi item là một cặp name-value, trong đó value có thể là: các kiểu dữ liệu cơ bản, function, hay cũng có thể là một object khác (kiểu dữ liệu phức hợp).

    Ta gọi mỗi item là một property(thuộc tính) của object nếu value của item đó có kiểu dữ liệu là kiểu phức hợp hoặc các kiểu dữ liệu cơ bản, ngược lại nếu value của item nó là một hàm (một function) thì ta gọi nó là method của object (phương thức của object).

    Ta xét một ví dụ sau:

    var myFirstObject = { firstName: "Richard", favoriteAuthor: "Conrad" };

    Ta thấy rằng, đối tượng object này là một danh sách các items, mỗi item (có thể là property hoặc method) được lưu trữ trong object bởi cặp giá trị name-value, trong trường hợp này thì các tên của property là ‘firstName’ và ‘favoriteAuthor’, tương ứng với các tên này là các giá trị “Richard” và “Conrad”.

    Những cách để truy cập tới các thuộc tính của object

    Để lấy được các giá trị của thuộc tính trong object, ta có thể truy cập tới tên của thuộc tính bằng toán tử ngoặc vuông ; //Conrad

    Truy cập tới các thuộc tính không tồn tại của object sẽ cho ta giá trị là undefined.

    Có một trường hợp nên chú ý, nếu tên của thuộc tính là số (tức là number), thì ta chỉ có thể truy cập bằng cách dùng dấu ngoặc vuông ; //test1

    2. Các cách để tạo ra Object

    Thông thường, ta có 2 cách để tạo ra một object: dùng object literals và dùng Object constructor

    Dùng Object literals

    Mình không rõ tiếng Việt gọi literal là gì, nhưng đại khái là sẽ dùng cặp ngoặc nhọn { } để tạo một object. Literal có thể hiểu theo ngữ cảnh nào đó là việc “sử dụng chuỗi thuần tuý”. Đoạn code sau minh hoạ cho điều này:

    var myBook = {10: 'test1'}; //đối tượng có 1 thuộc tính //đối tượng có 1 thuộc tính và 1 phương thức (method) var myCar = { brand: 'Toyota', run: function(){ console.log('running'); } };

    Dùng Object constructor

    Cách này sẽ sử dụng phương thức khởi tạo (constructor) của kiểu dữ liệu Object để tạo ra các object. Phương thức khởi tạo này là một hàm để tạo ra các object mới, ta dùng kèm từ khoá new:

    //Tạo 1 đối tượng mới var myApple = new Object(); //Thêm các thuộc tính cho đối tượng myApple.color = 'red'; myApple.shape = 'round'; myApple.howSweet = function(){ console.log('I am sweet'); };

    Trong Js, thì các thuộc tính của object có thể là các kiểu dữ liệu cơ bản, các phương thức, hay cũng có thể là các object con. Kiểu dữ liệu Object cho ta một cách sử dụng rất linh hoạt và mạnh mẽ.

    Tạo hàng loạt các Object cùng loại như thế nào?

    Ở trên, ta đã biết cách để tạo ra từng object riêng biệt, thế còn việc tạo hàng loạt các object giống nhau (có cùng tên thuộc tính và số lượng thuộc tính) như thế nào? Ta cũng có 2 cách để làm việc này: sử dụng mẫu khởi tạo, và sử dụng prototype.

    Sử dụng mẫu khởi tạo

    Cách này sử dụng từ khoá function để tạo ra một hàm khởi tạo đối tượng, dùng từ khoá this để gán các thuộc tính cho đối tượng:

    function Fruit (_color, _name){ this.color = _color; chúng tôi = _name; this.showName = function(){ console.log(this.name); } };

    Với hàm khởi tạo này, ta có thể tạo hàng loạt các đối tượng kiểu Fruit như sau:

    var mangoFruit = new Fruit('yellow', 'Mango'); var appleFruit = new Fruit('red', 'Apple');

    Con trỏ this là một thứ rất thần thánh và kì quặc trong Javascript, bạn nên cẩn thận khi sử dụng nó. Bạn có thể ôn lại về this ở Link này: Con trỏ this trong Javascript

    Sử dụng prototype

    Thuộc tính prototype là một thứ rất đặc biệt trong Javascript, có thể tìm hiểu thêm ở ĐÂY, ta sẽ sử dụng nó để tạo hàng loạt đối tượng giống nhau như sau:

    function Fruit (_color, _name){ }; Fruit.prototype.color = 'general_color'; chúng tôi = 'general_name'; Fruit.prototype.showName = function(){ console.log(this.name); };

    Với cách này thì ta cũng vẫn sẽ sử dụng hàm Fruit() để tạo ra các đối tượng object như cách ở trên:

    var mangoFruit = new Fruit('yellow', 'Mango'); var appleFruit = new Fruit('red', 'Apple');

    Thuộc tính prototype không chỉ được dùng duy nhất trong tình huống này. Do Javascript không phải là ngôn ngữ class-based (như PHP, C++, C#, …) mà là kiểu object-based, do đó chúng ta không thể thực hiện việc tạo class và kế thừa như các ngôn ngữ hướng đối tượng thuần tuý. Tuy nhiên, thuộc tính prototype cho phép ta thực hiện nhiều việc ‘tương tự’ như class và kế thừa trong Javascript, nhưng thôi, ta sẽ bàn chi tiết về nó ở một topic khác.

    3. Một cái nhìn chi tiết hơn về Object

    Ta biết rằng Object là kiểu dữ liệu phức hợp trong Javascript, bởi vì phức hợp nên nó sẽ có nhiều điều thú vị.

    Kiểu dữ liệu tham trị và tham chiếu

    Sự khác biệt cơ bản giữa kiểu dữ liệu tham trị và kiểu tham chiếu đó là: giá trị của kiểu dữ liệu tham chiếu không được lưu trực tiếp tại biến, mà biến đó sẽ lưu một tham chiếu tới giá trị thực.

    Các kiểu dữ liệu cơ bản trong Javascript là các kiểu dữ liệu tham trị, còn kiểu dữ liệu Object sẽ là kiểu dữ liệu tham chiếu. Minh hoạ kiểu tham trị như sau:

    //Kiểu dữ liệu cơ bản lưu giá trị thực sự (tham trị) var num = 1; var otherNum = num; //bây giờ otherNum có giá trị là 1 //Thử thay đổi giá trị num = 2; console.log(num); // 2 console.log(otherNum); // 1

    Như đã thấy ở trên, các kiểu dữ liệu cơ bản trong Javascript sẽ lưu giá trị theo kiểu tham trị. Ngược lại, kiểu dữ liệu Object sẽ lưu giá trị kiểu tham chiếu:

    //Khai báo 2 đối tượng kiểu Object var person = {name: "John"}; var otherPerson = person; //Thử thay đổi giá trị chúng tôi = "Peter"; console.log(person.name); //Peter console.log(otherPerson.name); //Peter

    Như đã thấy, mặc dù thay đổi giá trị của biến ‘person’, nhưng giá trị của biến ‘otherPerson’ cũng bị thay đổi. Nguyên do của việc này là bởi các đối tượng Object lưu giá trị theo kiểu tham chiếu, tức là 2 biến này cùng tham chiếu tới 1 vùng giá trị.

    Thuộc tính riêng và thuộc tính kế thừa của Object

    Một cách khái quát, thuộc tính riêng (own property) là thuộc tính được định nghĩa tại bản thân của đối tượng (tại bản thân object), thuộc tính kế thừa (inherited property) là những thuộc tính được kế thừa từ đối tượng prototype của object đó. (Tới đây ta lại biết thêm được 1 tính chất nữa của prototype ^^)

    Để kiểm tra một thuộc tính có thuộc object hay không (kể cả thuộc tính riêng và thuộc tính kế thừa), ta dùng toán tử in:

    var school = {schoolName: 'Havard'}; //kiểm tra thuộc tính console.log('schoolName' in school); //true console.log('schoolType' in school); //false

    Để kiểm tra một thuộc tính có phải là thuộc tính riêng hay không, ta có thể dùng phương thức hasOwnProperty của Object.

    //tạo mẫu khởi tạo function Fruit(){}; Fruit.prototype.color = 'general_color'; //tạo đối tượng và thuộc tính riêng var apple = new Fruit(); chúng tôi = 'ownName'; //kiểm tra thuộc tính console.log(apple.hasOwnProperty('color')); //false console.log(apple.hasOwnProperty('name')); //true

    Ta có thể nhận định thêm rằng, các thuộc tính định nghĩa trong prototype sẽ được kế thừa tới mọi object, nhưng ta vẫn có thể thêm các thuộc tính riêng cho từng object khác nhau. Đây là một trong những đặc điểm rất đặc biệt của thuộc tính prototype trong Javascript.

    Các đặc tính của thuộc tính (Property Attributes)

    Ta đã hiểu thế nào là các thuộc tính của object, bây giờ ta hãy xem xét chi tiết hơn về các đặc tính của nó.

    Trong tiếng Anh, người ta gọi các thuộc tính là property, còn đặc tính thì được gọi là attribute. Một thuộc tính sẽ có 4 đặc tính sau đây:

    • Giá trị (value): Đây là đặc tính rõ thấy nhất, bởi vì mỗi thuộc tính đều mang 1 giá trị nào đó, có thể là giá trị cơ bản hoặc method.
    • Tính Enumable: mang giá trị true/false, cho phép một thuộc tính được duyệt qua trong vòng lặp for-in.
    • Tính configable: mang giá trị true/false, nói lên khả năng config như delete thuộc tính, thay đổi các đặc tính khác của thuộc tính, …
    • Tính writable: mang giá trị true/false, cho phép ta thay đổi giá trị của thuộc tính hay không.

    Nói một chút về việc xoá một thuộc tính của object, ta có thể dùng toán tử delete để xoá một thuộc tính của đối tượng. Để lệnh delete được thực thi, ta cần xoá đúng vị trí thuộc tính được định nghĩa, tức là: thuộc tính riêng thì xoá tại đối tượng, thuộc tính kế thừa thì xoá tại đối tượng prototype.

    Hi vọng mọi người sẽ hiểu thêm nhiều thứ về Object trong Javascript. Thân!

    vcttai 26-06-2017

    Nguồn: Bàn về khái niệm Object trong Javascript

    --- Bài cũ hơn ---

  • Gintama Và Jojo Lột Xác Sau Khi Được “tân Trang” Bằng Hiệu Ứng Đồ Họa
  • Generator Function Và Yield Trong Javascript
  • Hướng Dẫn Cài Đặt Webpack Để Viết Reactjs/es6
  • Ethereum Sử Dụng Testnet Và Node Client Web3.js
  • Nếu Bạn Là Một Web Developer, Đừng Bỏ Lỡ 67 Công Cụ, Thư Viện Và Nguồn Tài Nguyên Hữu Ích Này!
  • Bàn Về Khái Niệm Object Trong Javascript.

    --- Bài mới hơn ---

  • Object Methods Trong Javascript Mọi Developers Cần Phải Biết
  • Đối Tượng Và Lớp (Class) Trong Java
  • Một Số Phương Thức Với Object Trong Javascript
  • Các Thuộc Tính Của Object Trong Javascript
  • Pojo: Đồng Bằng Cũ Đối Tượng Java
  • Trong Javascript, một trong những khái niệm cốt lõi và cơ bản nhất của nó là khái niệm về Object, đây cũng chính là một kiểu dữ liệu trong JS – kiểu dữ liệu Object. Bạn cần hiểu được và nắm vững các khái niệm cơ bản của Js trước khi có ý định học các Framework của nó.

    Nhắc lại về các kiểu dữ liệu trong Javascript, ta có 5 kiểu dữ liệu cơ bản và 1 kiểu dữ liệu phức hợp. 5 kiểu dữ liệu cơ bản bao gồm: Number, String, Boolean, Undefined và Null. Kiểu dữ liệu phức hợp là kiểu dữ liệu Object. Kiểu dữ liệu Object được sử dụng rất thường xuyên trong Js vì nó rất biến hoá và mạnh mẽ, đây là khái niệm cơ sở cho hàng loạt các đặc điểm nổi bật khác của Javascript, ta hãy thử xem nó là gì nào.

    Khái niệm Object là gì?

    Về mặt định nghĩa, một đối tượng (một object) là một danh sách các item, mỗi item là một cặp name-value, trong đó value có thể là: các kiểu dữ liệu cơ bản, function, hay cũng có thể là một object khác (kiểu dữ liệu phức hợp).

    Ta gọi mỗi item là một property (thuộc tính) của object nếu value của item đó có kiểu dữ liệu là kiểu phức hợp hoặc các kiểu dữ liệu cơ bản, ngược lại nếu value của item nó là một hàm (một function) thì ta gọi nó là method của object (phương thức của object).

    Ta xét một ví dụ sau:

    var myFirstObject = { firstName: "Richard", favoriteAuthor: "Conrad" };

    Ta thấy rằng, đối tượng object này là một danh sách các items, mỗi item (có thể là property hoặc method) được lưu trữ trong object bởi cặp giá trị name-value, trong trường hợp này thì các tên của property là ‘firstName’ và ‘favoriteAuthor’, tương ứng với các tên này là các giá trị “Richard” và “Conrad”.

    Những cách để truy cập tới các thuộc tính của object

    Để lấy được các giá trị của thuộc tính trong object, ta có thể truy cập tới tên của thuộc tính bằng toán tử ngoặc vuông “; //Conrad

    Truy cập tới các thuộc tính không tồn tại của object sẽ cho ta giá trị là undefined.

    Có một trường hợp nên chú ý, nếu tên của thuộc tính là số (tức là number), thì ta chỉ có thể truy cập bằng cách dùng dấu ngoặc vuông “; //test1

    Các cách để tạo ra Object

    Thông thường, ta có 2 cách để tạo ra một object: dùng “object literals” và dùng “Object constructor”

    Dùng Object literals

    Mình không rõ tiếng Việt gọi ‘literal’ là gì, nhưng đại khái là sẽ dùng cặp ngoặc nhọn “{ }” để tạo một object. ‘Literal’ có thể hiểu theo ngữ cảnh nào đó là việc “sử dụng chuỗi thuần tuý”. Đoạn code sau minh hoạ cho điều này:

    var myBook = {10: 'test1'}; //đối tượng có 1 thuộc tính //đối tượng có 1 thuộc tính và 1 phương thức (method) var myCar = { brand: 'Toyota', run: function(){ console.log('running'); } };

    Dùng Object constructor

    Cách này sẽ sử dụng phương thức khởi tạo (constructor) của kiểu dữ liệu Object để tạo ra các object. Phương thức khởi tạo này là một hàm để tạo ra các object mới, ta dùng kèm từ khoá “new”:

    //Tạo 1 đối tượng mới var myApple = new Object(); //Thêm các thuộc tính cho đối tượng myApple.color = 'red'; myApple.shape = 'round'; myApple.howSweet = function(){ console.log('I am sweet'); };

    Trong Js, thì các thuộc tính của object có thể là các kiểu dữ liệu cơ bản, các phương thức, hay cũng có thể là các object con. Kiểu dữ liệu Object cho ta một cách sử dụng rất linh hoạt và mạnh mẽ.

    Tạo hàng loạt các Object cùng loại như thế nào?

    Ở trên, ta đã biết cách để tạo ra từng object riêng biệt, thế còn việc tạo hàng loạt các object giống nhau (có cùng tên thuộc tính và số lượng thuộc tính) như thế nào? Ta cũng có 2 cách để làm việc này: sử dụng mẫu khởi tạo, và sử dụng prototype.

    Sử dụng mẫu khởi tạo

    Cách này sử dụng từ khoá function để tạo ra một hàm khởi tạo đối tượng, dùng từ khoá để gán các thuộc tính cho đối tượng:

    function Fruit (_color, _name){ this.color = _color; chúng tôi = _name; this.showName = function(){ console.log(this.name); } };

    Với hàm khởi tạo này, ta có thể tạo hàng loạt các đối tượng kiểu ‘Fruit’ như sau:

    var mangoFruit = new Fruit('yellow', 'Mango'); var appleFruit = new Fruit('red', 'Apple');

    Con trỏ this là một thứ rất thần thánh và kì quặc trong Javascript, bạn nên cẩn thận khi sử dụng nó. Có những trò khá vui vẻ với this, bạn có thể xem qua.

    Sử dụng prototype

    Thuộc tính prototype là một thứ rất đặc biệt trong Javascript, ta sẽ bàn về nó sau, ở đây ta sẽ sử dụng nó để tạo hàng loạt đối tượng giống nhau như sau:

    function Fruit (_color, _name){ }; Fruit.prototype.color = 'general_color'; Fruit.prototype.name = 'general_name'; Fruit.prototype.showName = function(){ console.log(this.name); };

    Với cách này thì ta cũng vẫn sẽ sử dụng hàm Fruit() để tạo ra các đối tượng object như cách ở trên:

    var mangoFruit = new Fruit('yellow', 'Mango'); var appleFruit = new Fruit('red', 'Apple');

    Thuộc tính prototype không chỉ được dùng duy nhất trong tình huống này. Do Javascript không phải là ngôn ngữ class-based (như PHP, C++, C#, …) mà là kiểu object-based, do đó chúng ta không thể thực hiện việc tạo class và kế thừa như các ngôn ngữ hướng đối tượng thuần tuý. Tuy nhiên, thuộc tính prototype cho phép ta thực hiện nhiều việc ‘tương tự’ như class và kế thừa trong Javascript, nhưng thôi, ta sẽ bàn chi tiết về nó ở một topic khác.

    Một cái nhìn chi tiết hơn về Object

    Ta biết rằng Object là kiểu dữ liệu phức hợp trong Javascript, bởi vì phức hợp nên nó sẽ có nhiều điều thú vị.

    Kiểu dữ liệu tham trị và tham chiếu

    Sự khác biệt cơ bản giữa kiểu dữ liệu tham trị và kiểu tham chiếu đó là: giá trị của kiểu dữ liệu tham chiếu được lưu trữ như là “một tham chiếu”, tức là giá trị của biến sẽ không được lưu trực tiếp tại biến, mà biến đó sẽ lưu một tham chiếu tới giá trị thực.

    Các kiểu dữ liệu cơ bản trong Javascript là các kiểu dữ liệu tham trị, còn kiểu dữ liệu Object sẽ là kiểu dữ liệu tham chiếu. Minh hoạ kiểu tham trị như sau:

    //Kiểu dữ liệu cơ bản lưu giá trị thực sự (tham trị) var num = 1; var otherNum = num; //bây giờ otherNum có giá trị là 1 //Thử thay đổi giá trị num = 2; console.log(num); // 2 console.log(otherNum); // 1

    Như đã thấy ở trên, các kiểu dữ liệu cơ bản trong Javascript sẽ lưu giá trị theo kiểu tham trị. Ngược lại, kiểu dữ liệu Object sẽ lưu giá trị kiểu tham chiếu:

    //Khai báo 2 đối tượng kiểu Object var person = {name: "John"}; var otherPerson = person; //Thử thay đổi giá trị person.name = "Peter"; console.log(person.name); //Peter console.log(otherPerson.name); //Peter

    Như đã thấy, mặc dù thay đổi giá trị của biến ‘person’, nhưng giá trị của biến ‘otherPerson’ cũng bị thay đổi. Nguyên do của việc này là bởi các đối tượng Object lưu giá trị theo kiểu tham chiếu, tức là 2 biến này cùng tham chiếu tới 1 giá trị, thay đổi giá trị này sẽ thay đổi giá trị thuộc tính của tất cả những đối tượng khác đang tham chiếu tới nó.

    Thuộc tính riêng và thuộc tính kế thừa của Object

    Một cách khái quát, thuộc tính riêng (own property) là thuộc tính được định nghĩa tại bản thân của đối tượng (tại bản thân object), thuộc tính kế thừa (inherited property) là những thuộc tính được kế thừa từ đối tượng prototype của object đó. (Tới đây ta lại biết thêm được 1 tính chất nữa của prototype ^^)

    Để kiểm tra một thuộc tính có thuộc object hay không (kể cả thuộc tính riêng và thuộc tính kế thừa), ta dùng toán tử “in”:

    var school = {schoolName: 'Havard'}; //kiểm tra thuộc tính console.log('schoolName' in school); //true console.log('schoolType' in school); //false

    Để kiểm tra một thuộc tính có phải là thuộc tính riêng hay không, ta có thể dùng phương thức “hasOwnProperty” của Object.

    //tạo mẫu khởi tạo function Fruit(){ }; Fruit.prototype.color = 'general_color'; //tạo đối tượng var apple = new Fruit(); //tạo thuộc tính riêng của object apple.name = 'ownName'; //kiểm tra thuộc tính console.log(apple.hasOwnProperty('color')); //false console.log(apple.hasOwnProperty('name')); //true

    Ta có thể nhận định thêm rằng, các thuộc tính định nghĩa trong prototype sẽ được kế thừa tới mọi object, nhưng ta vẫn có thể thêm các thuộc tính riêng cho từng object khác nhau. Đây là một trong những đặc điểm rất đặc biệt của thuộc tính prototype trong Javascript.

    Các đặc tính của thuộc tính

    Ta đã hiểu thế nào là các thuộc tính của object, bây giờ ta hãy xem xét chi tiết hơn về các đặc tính của nó.

    Trong tiếng Anh, người ta gọi các thuộc tính là ‘property’, còn đặc tính thì được gọi là ‘attribute’. Một thuộc tính sẽ có 4 đặc tính sau đây:

    • Giá trị (value): Đây là đặc tính rõ thấy nhất, bởi vì mỗi thuộc tính đều mang 1 giá trị nào đó, có thể là giá trị cơ bản hoặc method.
    • Tính Enumable: mang giá trị true/false, cho phép một thuộc tính được duyệt qua trong vòng lặp for-in.
    • Tính configable: mang giá trị true/false, nói lên khả năng config như delete thuộc tính, thay đổi các đặc tính khác của thuộc tính, …
    • Tính writable: mang giá trị true/false, cho phép ta thay đổi giá trị của thuộc tính hay không.

    Nói một chút về việc xoá một thuộc tính của object, ta có thể dùng toán tử ‘delete’ để xoá một thuộc tính của đối tượng. Để lệnh delete được thực thi, ta cần xoá đúng vị trí thuộc tính được định nghĩa, tức là: thuộc tính riêng thì xoá tại đối tượng, thuộc tính kế thừa thì xoá tại đối tượng prototype.

    --- Bài cũ hơn ---

  • Marvel Thế Giới Stand User Chương 439: Khắc Đem Đại!
  • Marvel Thế Giới Stand User Chương 212: Học Y Nạp Điện
  • Marvel Thế Giới Stand User Chương 25: The World!
  • Marvel Thế Giới Stand User Chương 315: Stand User Ở Giữa Là Sẽ Lẫn Nhau Hấp Dẫn
  • Marvel Thế Giới Stand User Chương 282: Không Gì Làm Không Được Mộng
  • Các Thuộc Tính Của Object Trong Javascript

    --- Bài mới hơn ---

  • Pojo: Đồng Bằng Cũ Đối Tượng Java
  • Object Và Class Trong Java
  • Lớp Và Đối Tượng Trong Java
  • Static Là Gì? Static Page Và Các Cách Tăng Tốc Độ Website
  • Biến Tĩnh Trong C++ (Static Variables In C++)
  • Các thuộc tính là phần của quan trọng bất của bất kì object nào trong JavaScript

    Thuộc Tính Trong JavaScript

    Thuộc tính là những giá trị đi chung với một object trong JavaScript

    Một object trong JavaScript là tập hợp của các thuộc tính không được sắp xếp theo thứ tự nào.

    Các thuộc tính có thể bị thay đổi, thêm vào, hoặc xóa, tuy nhiên có những thuộc tính chỉ cho phép đọc.

    Truy Cập Vào Các Thuộc Tính Trong JavaScript

    Cú pháp để truy cập vào thuộc tính của một object là:

    objectName.property // person.age

    hoặc

    objectName

    hoặc

    objectName

    Lưu ý: expssion (biểu thức) cần trả về giá trị là tên của một thuộc tính.

    Ví dụ 1

    person.firstname + " is " + chúng tôi + " years old.";

    Truy cập vào thuộc tính (1) Ví dụ 2:

    person + " years old.";

    Truy cập vào thuộc tính (2)

    Vòng Lặp for...in Trong JavaScript

    Vòng lặp for...in trong JavaScript có thể dùng để duyệt qua các thuộc tính của một đối tượng

    Cú pháp:

    for (variable in object) { đoạn mã cần thực thi }

    Đoạn mã bên trong vòng lặp for...in sẽ được thực thi 1 lần với mỗi thuộc tính

    Ví dụ về duyệt các thuộc tính của một đối tượng

    Ví dụ

    var person = {fname:"John", lname:"Doe", age:25}; for (x in person) { txt += person;

    Xóa thuộc tính

    Từ khóa delete xóa cả thuộc tính đó lẫn giá trị của nó

    Sau khi bị xóa, thuộc tính này không thể được sử dụng trừ khi nó được thêm lại.

    Phương thức delete được thiết kế để sử dụng trên thuộc tính của object, nó không thể sử dụng trên biến hay hàm.

    Phương thức delete không nên được sử dụng với các thuộc tính có sẵn của các đối tượng đã được JavaScript định nghĩa trước, điều này có thể gây lỗi.

    Các Đặc Điểm (attributes) Của Thuộc Tính

    Tất cả các thuộc tính đều có tên, và nó cũng có một giá trị đi kèm.

    Giá trị là một trong những đặc điểm (attributes) của thuộc tính.

    Các attributes khác là: enumerable (có thể đếm được), configurable (có thể cấu hình được), và writable (có thể ghi được).

    Các attributes đó định nghĩa cách mà thuộc tính có thể được truy cập (có thể đọc? có thể ghi)

    Trong JavaScript, tất cả các attributes đều có thể đọc, nhưng chỉ có attributes giá trị là có thể thay đổi (đương nhiên là chỉ khi nào thuộc tính đó có thể ghi được).

    (ECMAScript 5 có các phương thức cho việc lấy và cài đặt giá trị của tất cả các attributes của thuộc tính)

    Các Thuộc Tính Của Prototype

    Các object trong JavaScript kế thừa các thuộc tính từ prototype của chúng.

    Từ khóa delete không xóa các thuộc tính được kế thừa, nhưng nếu bạn xóa một thuộc tính của prototype, nó sẽ ảnh hưởng tới tất cả các object kế thừa từ prototype đó.

    --- Bài cũ hơn ---

  • Một Số Phương Thức Với Object Trong Javascript
  • Đối Tượng Và Lớp (Class) Trong Java
  • Object Methods Trong Javascript Mọi Developers Cần Phải Biết
  • Bàn Về Khái Niệm Object Trong Javascript.
  • Marvel Thế Giới Stand User Chương 439: Khắc Đem Đại!
  • Một Số Phương Thức Với Object Trong Javascript

    --- Bài mới hơn ---

  • Các Thuộc Tính Của Object Trong Javascript
  • Pojo: Đồng Bằng Cũ Đối Tượng Java
  • Object Và Class Trong Java
  • Lớp Và Đối Tượng Trong Java
  • Static Là Gì? Static Page Và Các Cách Tăng Tốc Độ Website
  • Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó. Nội dung có gì thiếu sót mong bạn đọc bỏ qua và góp ý.

    Cú pháp

    • nameValuePair1, nameValuePair2, … nameValuePairN: Các cặp tên và giá trị được phân cách với nhau bằng dấu hai chấm.
    • value: Gía trị truyền vào.

    Object constructor tạo ra object wrapper với các giá trị đã cho. Nó trả về object rỗng nêu giá trị truyền vào là dạng null hoặc undifined. Còn với các giá trị khác truyền vào thì sẽ được một object với kiểu tương ứng truyền vào.

    Object.assign()

    Sao chép các gía trị của tất cả các thuộc tính riêng từ một hoặc nhiều object vào một object khác.

    Các thuộc tính của đối tượng đích sẽ được viết đè với các thuộc tính của đối tượng đích nếu chúng có key giống nhau.

    Sao chép nhiều object vào một object:

    Object.create()

    Tạo object mới sử dụng một object hiện có để cung cấp __proto__ của object mới được tạo ra.

    Cú pháp

    Object.create(prototypeObject, propertiesObject)

    • prototypeObject: Object prototype mới được tạo. Nó có thể là object hoặc null.
    • propertiesObject: Các thuộc tính của object mới (tùy chọn).

    Không có prototype Có prototype

    Để thấy rõ hơn prototype được định nghĩa thì hãy mở đoạn code trên trình duyệt.

    Object.entries()

    Trả về mảng thuộc tính đếm được của các cặp [key, value] với object đã cho, tương tự như dùng vặp lặp for...in.

    Cú pháp

    Object.entries(obj)

    Object.keys()

    Trả về một mảng các tên thuộc tính đếm được của một object đã cho.

    Cú pháp

    Object.keys(obj)

    Object.values()

    Trả về một mảng các giá trị của những thuộc tính đếm được trong object đã cho.

    Cú pháp

    Object.values(obj)

    Object.prototype

    Khi một hàm được tạo trong Javascript thì nó sẽ thêm thuộc tính prototype vào hàm đó. Thuộc tính prototype là một object với mặc định có constructor.

    Tất cả các object trong Javascript kế thừa các thuộc tính và phương thức từ prototype.

    Xem ví dụ sau về protype object:

    Object.prototype.constructor

    Trả về tham chiếu hàm constructor tạo nên object. Tất cả các object đều có thuộc tính constructor.

    person.constructor is function Person(name) { chúng tôi = name; }

    Object.prototype.hasOwnProperty()

    Trả về giá trị true/false cho biết object có thuộc tính được đưa ra không.

    Cú pháp

    obj.hasOwnProperty(prop)

    Object.prototype.toString()

    Trả về chuỗi đại diện cho object.

    Cú pháp

    obj.toString()

    Bạn có thể sử dụng prototype để ghi đè phương thức toString().

    Object.prototype.valueOf()

    Trả về giá trị nguyên thủy của một object xác định.

    Cú pháp

    object.valueOf()

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

    All Rights Reserved

    --- Bài cũ hơn ---

  • Đối Tượng Và Lớp (Class) Trong Java
  • Object Methods Trong Javascript Mọi Developers Cần Phải Biết
  • Bàn Về Khái Niệm Object Trong Javascript.
  • Marvel Thế Giới Stand User Chương 439: Khắc Đem Đại!
  • Marvel Thế Giới Stand User Chương 212: Học Y Nạp Điện
  • Thao Tác Với Đối Tượng (Object) Trong Javascript

    --- Bài mới hơn ---

  • Đối Tượng Date Trong Javascript
  • Tìm Hiểu Promise Trong Javascript
  • Tất Tần Tật Về Promise Và Async/await
  • Prototype Trong Javascript Là Gì, Và Tại Sao Nó Lại Quan Trọng?
  • Javascript Prototype Là Gì? Tạo Ra Prototype Như Thế Nào?
  • 1. Thao tác với đối tượng (Object) trong Javascript

    Đề bài: Viết chương trình quản lý sinh viên gồm các thao tác chính như sau:

    • Xem danh sách sinh viên
    • Thêm sinh viên
    • Xóa sinh viên khỏi danh sách
    • Sửa thông tin sinh viên

    Với mỗi sinh viên cần lưu trữ các thông tin sau:

    Hướng dẫn: Trước tiên ta cần xác định danh sách các thuộc tính của đối tượng và đó chính là các thông tin lưu trữ của sinh viên. Ta cần lưu trữ danh sách sinh viên, vì vậy ta cũng cần có thêm một mảng lưu trữ danh sách sinh viên. Từ đó có thể xác định cấu trúc của đối tượng như sau.

    var Student = { data : .id === id) { this.data.email = email; } } }

    Toàn bộ code cho đối tượng sinh viên

    var Student = { data : .id === id) { // nếu là sinh viên cần xóa this.data.splice(i, 1); // thì xóa } } }, editStudent : function(id, name, email){ // Tìm sinh viên cần edit for(var i = 0; i < this.data.length; i++){ // nếu là sinh viên cần edit thì thực hiện edit if (this.data.name = name; this.data[i].email = email; } } } };

    Sử dụng đối tượng sinh viên

    Student.viewStudent();

    Student.addStudent(“sv001”, ‘Nguyễn Văn Cường’, “[email protected]”);

    Student.addStudent(“sv002”, ‘Vũ Thị Thu Tình’, “[email protected]”);

    Student.viewStudent();

    Student.removeStudent(‘sv001’);

    Student.viewStudent();

    Student.editStudent(‘sv002’, “Tên Sinh Viên Mới”, “[email protected]”);

    Student.viewStudent();

    2. Lời kết

    Vậy là ta đã thực hành xong kỹ năng thao tác với Object trong Javascript. Bản thân mình thấy bài này khá hay và có độ khó tương đối cao, hay nói cách khác đây là kiến thức Javascript nâng cao rồi nên sẽ hơi khó hiểu nếu bạn chưa nắm vững các bài trước.

    Ở phần sử dụng đối tượng ban đầu mình tính xây dựng một chương trình kết hợp với HTML luôn nhưng nghĩ lại sẽ tốn thời gian nên mình chỉ đưa ra cách sử dụng rất là đơn giản, vì vậy rất mong các bạn hiểu bài.

    --- Bài cũ hơn ---

  • Đối Tượng (Object) Trong Javascript
  • Tại Sao Tôi Lại Chọn React +Thay Vì Vue Hay Angular
  • Masonry Layout Trong Thiết Kế Web Là Gì?
  • Minify Javascript/css Là Gì? Công Cụ Nén Js/css Trên WordPress
  • Điều Gì Khiến Meteor Js 1.3 Trở Nên Đặc Biệt?
  • Cách Sử Dụng Đối Tượng (Object) Trong Javascript

    --- Bài mới hơn ---

  • Hướng Dẫncho Người Mới Bắt Đầu
  • Processing.js Các Phần Mềm Thay Thế Và Phần Mềm Tương Tự
  • Prototype Là Gì? Lập Trình Hướng Đối Tượng (Oop) Trong Javascript
  • 8 Js Frameworks Nhỏ Xinh Cho Bạn Đổi Gió
  • Tạo Và Xuất Bản Một Jquery Plugin Trong 30 Phút
  • 1) Đối tượng (trong đời sống thực) là gì !?

    – Trong đời sống thực, đối tượng là một vật hữu hình, ví dụ như:

    • Sinh Viên
    • Xe máy
    • Điện thoại
    • Laptop
    • ….

    – Khi đề cập đến đối tượng Sinh Viên thì ta thường quan tâm đến những thông tin như: họ tên, năm sinh, giới tính, mã số, quê quán, …. và đối với những Sinh Viên khác nhau thì các thông tin sẽ có giá trị khác nhau, ví dụ:

    Họ tên

    Lữ Phụng Tiên

    Điêu Thuyền

    Quan Vân Trường

    Năm sinh

    1993

    1995

    1989

    Giới tính

    Nam

    Nữ

    Nam

    Mã số

    001

    002

    003

    Quê quán

    Cần Thơ

    Vĩnh Long

    Sóc Trăng

    – Ngoài ra, đối tượng Sinh Viên còn có thể thực hiện những hành động như: học bài, đi ngủ, xem phim, tập thể dục, …. và đối với những Sinh Viên khác nhau thì những hành động này sẽ được thực hiện vào những thời điểm khác nhau.

    Vậy tóm lại:

    – Trong đời sống thực, đối tượng là một vật hữu hình.

    – Một đối tượng sẽ có các thông tin và hành động

    • Các cá thể đối tượng khác nhau, thông tin sẽ có giá trị khác nhau.
    • Các cá thể đối tượng khác nhau sẽ thực hiện những hành động vào thời điểm khác nhau.

    2) Đối tượng (trong JavaScript) là gì !?

    – Trong JavaScript, đối tượng là một loại biến đặc biệt, nó có thể lưu trữ nhiều giá trị đồng thời.

    – Mỗi giá trị của đối tượng được viết theo dạng cặp tên:giá trị

    – Ví dụ, câu lệnh bên dưới dùng để tạo một đối tượng có tên là SinhVien và nó lưu trữ hai cái tên:

    • name (có giá trị là chuỗi Nhân)
    • year (có giá trị là số 1993)

    var SinhVien = {name:"Nhân", year:1993}

    – Vì vậy, nếu nói chính xác hơn thì:

    “Đối tượng là một loại biến đặc biệt, nó lưu trữ nhiều cái tên và mỗi cái tên sẽ có một giá trị”

    – Giá trị được lưu trong tên không chỉ đơn thuần là chuỗi, số, …. mà nó còn có thể là một hàm.

    – Những cái tên lưu trữ các giá trị đơn thuần như chuỗi, số, …. thì được gọi là thuộc tính

    – Những cái tên lưu trữ giá trị là một hàm thì được gọi là phương thức

    Ví dụ: Câu lệnh bên dưới dùng để tạo một đối tượng có tên là SinhVien, đối tượng SinhVien có hai thuộc tính và một phương thức:

    • Thuộc tính name có giá trị là chuỗi Nhân
    • Thuộc tính year có giá trị là số 1993
    • Phương thức intro có giá trị là hàm function(){alert(“Tên: ” + this.name)}

    var

    SinhVien

    =

    {name:

    “Nhân”

    , year:

    1993

    , intro:

    function

    (){

    alert

    (

    “Tên: “

    +

    this

    .name)}}

    Tổng kết: Tương tự như đối tượng trong đời sống thực, đối tượng trong JavaScript cũng dùng để lưu trữ về một thứ gì đó cụ thể,

    nó có các thông tin và hành động giống như đối tượng trong đời trong thực. Tuy nhiên, trong JavaScript thì các thông tin được gọi là thuộc tính,

    còn các hành động thì được gọi là phương thức.

    3) Cách khai báo (khởi tạo) một đối tượng trong JavaScript

    – Một đối tượng có thể có “không hoặc nhiều thuộc tính”“không hoặc nhiều phương thức”.

    – Để khai báo một đối tượng, ta sử dụng cú pháp như sau:

    var

    tên đối tượng = { tên thuộc tính thứ nhất:giá trị, tên thuộc tính thứ hai:giá trị, tên thuộc tính thứ ba:giá trị, tên phương thức thứ nhất:

    function

    (){

    //Danh sách các câu lệnh của phương thức này

    }, tên phương thức thứ hai:

    function

    (){

    //Danh sách các câu lệnh của phương thức này

    }, tên phương thức thứ ba:

    function

    (){

    //Danh sách các câu lệnh của phương thức này

    }
    }

    Lưu ý:

    • Quy tắc đặt tên đối tượng, tên thuộc tính, tên phương thức giống với quy tắc đặt tên biến.
    • Giá trị của thuộc tính có thể là: chuỗi, số, biến, ….

    Ví dụ:

    – Đoạn mã bên dưới dùng để tạo một đối tượng có tên là SinhVien.

    – Đối tượng SinhVien có ba thuộc tính và một phương thức:

    • Thuộc tính

      name

      có giá trị là chuỗi Nguyễn Thành Nhân

    • Thuộc tính

      year

      có giá trị là số 1993

    • Thuộc tính

      city

      có giá trị bằng với giá trị của biến thanhpho

    • Phương thức

      intro

      có chức năng hiển thị các thông tin trên.

    var SinhVien = {

    name:”Nguyễn Thành Nhân”,

    year:1993,

    city:thanhpho,

    intro:function(){

    document.write(“- Sống tại: ” + this.city);

    }

    }

    Xem ví dụ

    4) Cách truy cập vào “thuộc tính” của đối tượng

    – Việc truy cập vào thuộc tính của đối tượng sẽ trả về giá trị của thuộc tính đó.

    – Để truy cập vào thuộc tính của đối tượng, ta sử dụng cú pháp như sau:

    tên đối tượng.tên thuộc tính

    Ví dụ:

    Để lấy họ tên của sinh viên thì ta dùng cú pháp SinhVien.name

    var SinhVien = {

    name:”Nguyễn Thành Nhân”,

    year:1993

    }

    document.write(“Họ tên của sinh viên là: ” + SinhVien.name);

    Xem ví dụ

    5) Cách truy cập vào “phương thức” của đối tượng

    – Việc truy cập vào phương thức của đối tượng sẽ giúp các câu lệnh trong phương thức được thực thi.

    – Để truy cập vào phương thức của đối tượng, ta sử dụng cú pháp như sau:

    tên đối tượng.tên phương thức()

    Ví dụ:

    Để thực thi các câu lệnh trong phương thức intro thì ta dùng cú pháp SinhVien.intro()

    var SinhVien = {

    name:”Nguyễn Thành Nhân”,

    year:1993,

    intro:function(){

    }

    }

    SinhVien.intro();

    Xem ví dụ

    Lưu ý: Nếu các câu lệnh trong phương thức trả về một giá trị thì ta có thể truy cập vào phương thức đó để sử dụng nó như một giá trị.

    Ví dụ:

    var SinhVien = {

    name:”Nguyễn Thành Nhân”,

    year:1993,

    intro:function(){

    return “Cần Thơ”;

    }

    }

    var hello = “Tôi sống tại ” + SinhVien.intro();

    Xem ví dụ

    --- Bài cũ hơn ---

  • Arguments Object Trong Javascript Là Gì? Cách Sử Dụng?
  • Javascript Đã Tạo Ra Object Từ Function Như Thế Nào?
  • Javascript Data Types And Data Structures
  • Tổng Quan Về Ngôn Ngữ Lập Trình Typescript
  • Cách Sử Dụng Thư Viện Masonry Của Javascript
  • Object Methods Trong Javascript Mọi Developers Cần Phải Biết

    --- Bài mới hơn ---

  • Đối Tượng Và Lớp (Class) Trong Java
  • Một Số Phương Thức Với Object Trong Javascript
  • Các Thuộc Tính Của Object Trong Javascript
  • Pojo: Đồng Bằng Cũ Đối Tượng Java
  • Object Và Class Trong Java
  • Object javascript là gì? Thật ra hầu hết mọi thứ trong javascript đều là object. Nhưng ở bài post này thì, chúng ta sẽ tìm hiểu những method object được sử dụng nhiều và rộng rãi nhất, đến nỗi dự án nào cũng phải sử dụng đến. Bên cạnh đó còn kể đến những “Array method in javascript”

    Object javascript là gì?

    Để hiểu hết tối đa bài viết này thì trước tiên bạn phải hiểu “Object javascript là gì?” và hơn hết bạn phải hiểu cách creating, modifying, và working một object. Ở những hướng dẫn trước của tipjs, đã nói nhiều về Object bạn có thể xem qua. Ở bài trước “Array method in javascript” chúng tôi đã nói rất nhiều về cách sử dụng method của Array.

    Object trong javascript là một collection key/value. Trong đó các giá trị có thể bao gồm các properties và methods và có thể chứa tất cả các loại dữ liệu JavaScript khác, chẳng hạn như String, NumberBooleans.

    Object có nhiều method được tích hợp hữu ích mà chúng ta có thể sử dụng và truy cập để làm việc với các Object riêng lẻ một cách đơn giản. Hướng dẫn củ bài post này sẽ đi qua các method Object tích hợp quan trọng, và kèm theo đó là những ví dụ minh hoạ cho từng trường hợp cụ thể khi sử dụng object.

    Object.create()

    // Initialize an object with properties and methods const job = { position: 'cashier', type: 'hourly', isAvailable: true, showDetails() { const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications"; console.log(`The ${this.position} position is ${this.type} and ${accepting}.`); } }; // Use Object.create to pass properties const barista = Object.create(job); barista.position = "barista"; barista.showDetails(); Output The barista position is hourly and is accepting applications.

    Trên đó ta cũng thấy là chúng ta có thể thay đổi gia trị của một properties của Object mới mà ta vừa sử dụng Object.create() .

    Object.keys()

    Object.keys() là một method dùng để tạo ra một Array với tất cả key của một Object. Và theo kinh nghiệm của tipjs thì có lẽ đây là một method rất hay. Vì tipjs đã sử dụng rất nhiều.

    // Initialize an object const employees = { boss: 'Michael', secretary: 'Pam', sales: 'Jim', accountant: 'Oscar' }; // Get the keys of the object const keys = Object.keys(employees); console.log(keys); Output ; console.log(`${key}: ${value}`); }); Output boss: Michael secretary: Pam sales: Jim accountant: Oscar

    Object.values()

    Object.values() là một method ngược lại với Object.keys() thì nó tạo một new Array với tất cả những giá trị của một object.

    // Initialize an object const session = { id: 1, time: `26-July-2018`, device: 'mobile', browser: 'Chrome' }; // Get all values of the object const values = Object.values(session); console.log(values); Output ]

    Object.assign()

    // Initialize an object const name = { firstName: 'Philip', lastName: 'Fry' }; // Initialize another object const details = { job: 'Delivery Boy', employer: 'Planet Expss' }; // Merge the objects const character = Object.assign(name, details); console.log(character); Output {firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Expss"}

    // Initialize an object const name = { firstName: 'Philip', lastName: 'Fry' }; // Initialize another object const details = { job: 'Delivery Boy', employer: 'Planet Expss' }; // Merge the object with the spad operator const character = {...name, ...details} console.log(character); Output {firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Expss"}

    Object.freeze()

    Object.freeze() dùng để ngăn chặn một hành vi sử đổi thuộc tính giá trị của một object, ngoài ra cũng có thể ngăn chặn một hành vi như xoá or add thêm thuộc tính.

    // Initialize an object const user = { username: 'AzureDiamond', password: 'hunter2' }; // Freeze the object const newUser = Object.freeze(user); newUser.password = '*******'; newUser.active = true; console.log(newUser); Output {username: "AzureDiamond", password: "hunter2"}

    Object.seal()

    Object.seal() thì hơi ngược lại với Object.freeze() đó là dùng để ngăn chặn hành vi add thêm một new properties nhưng lại cho phép modification những thuộc tính đã tồn tại trước đó. Ví dụ:

    // Initialize an object const user = { username: 'AzureDiamond', password: 'hunter2' }; // Seal the object const newUser = Object.seal(user); newUser.password = '*******'; newUser.active = true; console.log(newUser); Output {username: "AzureDiamond", password: "*******"}

    Kết luận và rút ra bài học

    Điều tuyệt vời nhất là mang đến cho bạn một cách nhìn, hiểu và sử dụng các method object trong javascript một cách hiệu quả và đầy tinh tế. Mỗi ví dụ, chúng tôi cố gắng truyền đến những bài viết để đi sâu hơn nữa. Bạn đừng bỏ qua nó một cách lãng phí. Vì mỗi bài viết đều chứa đựng nhiều kiến thức hơn nữa. Ngoài ra, bạn cũng nên tìm hiểu về “Array method in javascript”.

    Resource: digitalocean.com

    --- Bài cũ hơn ---

  • Bàn Về Khái Niệm Object Trong Javascript.
  • Marvel Thế Giới Stand User Chương 439: Khắc Đem Đại!
  • Marvel Thế Giới Stand User Chương 212: Học Y Nạp Điện
  • Marvel Thế Giới Stand User Chương 25: The World!
  • Marvel Thế Giới Stand User Chương 315: Stand User Ở Giữa Là Sẽ Lẫn Nhau Hấp Dẫn
  • Convert Form Data To Javascript Object With Jquery

    --- Bài mới hơn ---

  • Hướng Dẫn Và Ví Dụ Jquery
  • Di Chuyển Trong Dom Với Jquery
  • Khái Quát Về Jquery? Jquery Selector Là Gì?
  • Css Selector (Bộ Chọn) Là Gì Và Cách Sử Dụng?
  • Các Thuộc Tính Và Phương Thức Tĩnh(Static) Trong Javascript
  • I had the same problem lately and came out with this .toJSON jQuery plugin which converts a form into a JSON object with the same structure. This is also expecially useful for dynamically generated forms where you want to let your user add more fields in specific places.

    How cool would it be to have a JSON object out of this which would repsent this exact structure so you’ll be able to either:

    • Store this object as it is in any CouchDB-like database
    • Read it from your $_POST" like name inside the form and everything is ptty, simple and semantic.

      Now we want this form to be converted into a JSON object which will look like this:

      {'places':{ 'place':'); if (!$kids.length) { return $(this).val(); } $kids.each(function () { var $el = $(this), name = $el.attr('name'); if ($el.siblings(".push($el.toJSO()); } } else { obj[name] = $el.toJSO(); } }); return obj; };

      I also made this one blog post to explain this more.

      This converts everything in a form to JSON (even radio and check boxes) and all you’ll have left to do is call

      $.post('script.php',('form').toJSO(), ...);

      I know there’s plenty of ways to convert forms into JSON objects and sure .serialize() and .serializeArray() work great in most cases and are mostly intended to be used, but I think this whole idea of writing a form as an XML structure with meaningful names and converting it into a well-formed JSON object is worth the try, also the fact you can add same-name input tags without worrying is very useful if you need to retrive dynamically generated forms data.

      I hope this helps someone!

      --- Bài cũ hơn ---

    • Asp.net – Serialize Đối Tượng .net Thành Json Và Ngược Lại
    • Bộ Hẹn Giờ Settimeout() Và Setinterval() Trong Javascript
    • Phương Thức Settimeout() Và Setinterval() Trong Javascript
    • Giới Thiệu Về Nodejs + Sailsjs
    • Các Hàm Render & Jsx — Vue.js
  • Web hay
  • Links hay
  • Push
  • Chủ đề top 10
  • Chủ đề top 20
  • Chủ đề top 30
  • Chủ đề top 40
  • Chủ đề top 50
  • Chủ đề top 60
  • Chủ đề top 70
  • Chủ đề top 80
  • Chủ đề top 90
  • Chủ đề top 100
  • Bài viết top 10
  • Bài viết top 20
  • Bài viết top 30
  • Bài viết top 40
  • Bài viết top 50
  • Bài viết top 60
  • Bài viết top 70
  • Bài viết top 80
  • Bài viết top 90
  • Bài viết top 100