😊 Method 😊

Thêm phương pháp vào trong đối tượng trong javascript

Cùng nhau tìm hiễu các cách thêm phương pháp vào trong đối tượng trong js
js_masterJavascript
javascript-lap-trinh.jpg

Chào các bạn

Trong bài viết này mình sẽ hướng dẫn các bạn làm việc với các phương pháp trong object

Để tạo một phương pháp các bạn có thể dùng nhiều cách.

Ví dụ:

1let user = {
2    name: "Hồ Quang Trí"
3}
4
5user.showName = function () { // Thêm một chức năng có tên là showName vào trong user
6    console.log(this.name);
7}

hoặc

1let user = {
2    name: "Hồ Quang Trí",
3    showName: function () { // Thêm một chức năng có tên là showName vào trong user
4        console.log(this.name);
5    },
6};

hoặc chức năng mũi tên arrow function

1let user = {
2    name: "Hồ Quang Trí",
3    showName: () => { // Thêm một chức năng có tên là showName vào trong user
4        console.log(this.name); 
5    },
6};

hoặc cú pháp viết tắt

1let user = {
2    name: "Hồ Quang Trí",
3    showName () { // Thêm một chức năng có tên là showName vào trong user
4        console.log(this.name);
5    },
6};

hoặc

1function showName () { 
2    console.log(this.name); // Hồ Quang Trí
3}
4
5let user = {
6    name: "Hồ Quang Trí",
7    showName: showName // Thêm một chức năng có tên là showName vào trong user
8};

hoặc

1function showName () { 
2    console.log(this.name); // Hồ Quang Trí
3}
4
5let user = {
6    name: "Hồ Quang Trí",
7    showName // Thêm một chức năng có tên là showName vào trong user
8};

Nói chung có rất rất nhiều cách để thêm một phương pháp vào object. Ở trên cũng chỉ là một ít ví dụ cho các bạn dễ hình dung. Sau này các bạn lên cao sẽ tự động hiểu

Cách thức hoạt động thì giống nhau. Nhưng có sự khác biệt nho nhỏ. Đến chương kế thừa mình sẽ nói rõ hơn.

Gọi phương pháp

Để gọi phương pháp trong object các bạn dùng cú pháp object chấm . đến phương pháp cần gọi showName. user.showName()

1let user = {
2    name: "Hồ Quang Trí",
3    showName () { // Thêm một chức năng có tên là showName vào trong user
4        console.log(this.name); // Hồ Quang Trí
5    },
6};
7
8user.showName(); // Gọi phương pháp

hoặc

1let user = {
2    name: "Hồ Quang Trí",
3    showName () { // Thêm một chức năng có tên là showName vào trong user
4        console.log(this.name); // Hồ Quang Trí
5    },
6};
7
8user["showName"](); // Gọi phương pháp

Dấu ngoặc vuông [] ở đây lợi hại hơn dấu chấm . bởi vì chúng ta có thể nhúng biểu thức vào đó.

1let user = {
2    name: "Hồ Quang Trí",
3    showName () { // Thêm một chức năng có tên là showName vào trong user
4        console.log(this.name); // Hồ Quang Trí
5    },
6};
7
8let method = prompt("Nhập phương pháp cần gọi", ""); // Phương pháp nhập cái gì đó
9user[method](); // Gọi phương pháp

Ví dụ ở trên nếu chúng ta nhập showName thì nó sẽ gọi phương pháp và log ra Hồ Quang Trí ngược lại nếu chúng ta nhập cái khác thì lỗi Uncaught TypeError: user[method] is not a function

Tổng kết

Trong bài viết này mình đã hướng dẫn các bạn sơ qua về cách thêm một chức năng gì đó vào trong object.

Các ví dụ ở trên cũng chỉ là phần nỗi của tảng băng chìm thôi. Còn rất rất nhiều thứ để học.

Bài viết tiếp theo mình sẽ nói về this trong object. Các bạn nhớ theo dõi nhé.

Thank..!

  • method
  • phương pháp
  • đối tượng
  • this

OFFJS.COM - Blog học tập giải trí - 🐲

Chia sẻ nhiều kiến thức thú vị trong lập trình cũng như cuộc sống.

Giới thiệu


Trang web này mình sẽ nói về kiến thức lập trình và cuộc sống mà các bạn mới học hay đang dự định học. Có một bước đi đầu đời vững chắc.

Hồ Quang Trí.jpg

Đi kèm với đó là những lý thuyết và các dòng code minh họa. Để các bạn dễ hình dung.

Đơn nhiên cũng không dễ dàng ngày một ngày hai mà học hết được.

Học Tập Là Một Con Đường Dài Vô Tận

Nó sẽ nuốt các bạn vô số thời gian nhưng bù lại khi đã biết thì mọi thứ thật là tuyệt.

1console.log("Hồ Quang Trí");

Nếu có ai nói bạn học lập trình trong vòng 3 đến 6 tháng thì mình xin nói thật không bao giờ có chuyện đó nhé.

Chúc các bạn thành công.

Chân trang

phone-toan-phat.png

0353210168

address-toan-phat.png

Việt Nam