Các Phương thức trong JavaScript cần biết để nâng cao kỹ năng lập trình của bạn

Phương thức trong JavaScript
JavaScript cung cấp một loạt các phương thức mạnh mẽ và linh hoạt để làm việc với đối tượng và mảng, giúp bạn tăng cường kỹ năng lập trình của mình. Hiểu và sử dụng tốt các phương thức này sẽ giúp bạn viết code dễ đọc hơn, hiệu quả hơn và dễ dàng bảo trì hơn. Cùng mình tìm hiểu xem phương thức trong JavaScript là igf? Qua bài viết dưới đây nhé.

Phương thức trong JavaScript là gì?

Trong JavaScript, phương thức là một hành động hoặc một hàm mà một đối tượng có thể thực hiện. Đối tượng trong JavaScript có thể chứa các thuộc tính và phương thức. Khi một phương thức được gọi trên một đối tượng, nó được thực hiện bởi đối tượng đó và có thể truy cập vào các thuộc tính và phương thức khác của đối tượng.
Bài viết liên quan: MySQL là gì? Tổng hợp thông tin MySQL từ cơ bản đến nâng cao
Có hai cách để định nghĩa phương thức trong JavaScript: sử dụng cú pháp hàm hoặc sử dụng cú pháp phương thức của đối tượng.
  1. Định nghĩa phương thức bằng cú pháp hàm:
  1. function methodName() {
  2. // code của phương thức
  3. }
Trong cú pháp này, bạn định nghĩa một hàm và sau đó gán nó cho thuộc tính của đối tượng để tạo thành một phương thức.
  1. Định nghĩa phương thức bằng cú pháp phương thức của đối tượng:
  1. const objectName = {
  2.       methodName: function() {
  3.             // code của phương thức
  4.      }
  5. };
Trong cú pháp này, bạn định nghĩa một thuộc tính có tên là methodName cho đối tượng objectName và gán nó bằng một hàm.
Sau khi bạn đã định nghĩa phương thức, bạn có thể gọi nó bằng cách sử dụng tên của đối tượng, dấu chấm và tên của phương thức. Ví dụ:
  1. objectName.methodName();
Ngoài ra, trong các phương thức, từ khóa this được sử dụng để tham chiếu đến đối tượng hiện tại mà phương thức đang được gọi trên, cho phép truy cập vào các thuộc tính và phương thức khác của đối tượng đó.
Đây là một ví dụ minh họa về việc định nghĩa và sử dụng phương thức trong JavaScript:
  1. const person = {
  2.       name: 'John',
  3.       age: 30,
  4.       greet: function() {
  5.            console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  6.       }
  7. };
  8. person.greet(); // Output: Hello, my name is John and I'm 30 years old.
Trong ví dụ trên, greet là một phương thức của đối tượng person. Khi gọi person.greet(), phương thức greet được thực thi và sử dụng các thuộc tính nameage của đối tượng person thông qua từ khóa this.
Bài viết liên quan: Theme WordPress là gì? Tổng hợp kiến thức về Theme WordPress

Phương thức của Object

Trong JavaScript, đối tượng Object là một đối tượng toàn diện và cung cấp một số phương thức tích hợp sẵn để làm việc với đối tượng. Dưới đây là một số phương thức quan trọng của đối tượng Object:
  1. Object.keys(obj): Phương thức này trả về một mảng chứa tất cả các khóa (keys) của đối tượng obj. Ví dụ:
  1. const person = {
  2.      name: 'John',
  3.      age: 30,
  4.      city: 'New York'
  5. };
  6. const keys = Object.keys(person);
  7. console.log(keys); // Output: ['name', 'age', 'city']
  1. Object.values(obj): Phương thức này trả về một mảng chứa tất cả các giá trị (values) của đối tượng obj. Ví dụ:
  1. const person = {
  2.       name: 'John',
  3.       age: 30,
  4.       city: 'New York'
  5. };
  6. const values = Object.values(person);
  7. console.log(values); // Output: ['John', 30, 'New York']
  1. Object.entries(obj): Phương thức này trả về một mảng chứa các cặp khóa-giá trị (key-value) của đối tượng obj dưới dạng một mảng con. Ví dụ:
  1. const person = {
  2.       name: 'John',
  3.       age: 30,
  4.       city: 'New York'
  5. };
  6. const entries = Object.entries(person);
  7. console.log(entries);
  8. // Output: [['name', 'John'], ['age', 30], ['city', 'New York']]
  1. Object.assign(target, ...sources): Phương thức này được sử dụng để sao chép các thuộc tính từ các đối tượng nguồn (sources) vào đối tượng đích (target). Nó trả về đối tượng đích đã được cập nhật. Ví dụ:
  1. const target = { a: 1, b: 2 };
  2. const source = { b: 4, c: 5 };
  3. const result = Object.assign(target, source); console.log(result);
  4. // Output: { a: 1, b: 4, c: 5 }
Ngoài ra, đối tượng Object còn cung cấp nhiều phương thức khác như Object.create(), Object.defineProperty(), Object.getOwnPropertyDescriptor(), và nhiều phương thức khác để làm việc với đối tượng trong JavaScript. Bạn có thể tìm hiểu thêm về các phương thức này và các tính năng khác của đối tượng Object trong tài liệu JavaScript.
Xem thêm: Map trong Java là gì? Cách dùng Map trong Java đơn giản nhất

Cú pháp ngắn gọn khai báo phương thức

Trong JavaScript ES6 và phiên bản sau đó, có cú pháp ngắn gọn để khai báo phương thức trong một đối tượng. Thay vì sử dụng cú pháp hàm truyền thống, bạn có thể sử dụng cú pháp ngắn gọn sau đây:
  1. const objectName = {
  2.      methodName() {
  3.            // code của phương thức
  4.      }
  5. };
Lưu ý rằng không cần sử dụng từ khóa function và dấu hai chấm sau tên phương thức. Cú pháp này tự động xác định rằng thuộc tính được khai báo là một phương thức.
Dưới đây là một ví dụ về việc sử dụng cú pháp ngắn gọn để khai báo phương thức trong JavaScript:
  1. const person = {
  2.      name: 'John',
  3.      age: 30,
  4.      greet() {
  5.           console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  6.      }
  7. };
  8. person.greet(); // Output: Hello, my name is John and I'm 30 years old.
Trong ví dụ trên, greet là một phương thức của đối tượng person. Bạn có thể thấy rằng không cần sử dụng từ khóa function khi khai báo phương thức greet.

Từ khóa this trong JavaScript

Phương thức trong JavaScript

Trong JavaScript, từ khóa this được sử dụng để tham chiếu đến đối tượng hiện tại mà một phương thức đang được gọi trên. Giá trị của this thay đổi tuỳ thuộc vào ngữ cảnh mà phương thức được gọi.
Cách this được định nghĩa phụ thuộc vào cách phương thức được gọi:
  1. this trong phương thức của một đối tượng: Khi một phương thức được gọi trên một đối tượng, this sẽ tham chiếu đến đối tượng đó. Ví dụ:
  1. const person = {
  2.        name: 'John',
  3.        sayHello() {
  4.             console.log(`Hello, my name is ${this.name}.`);
  5.        }
  6. };
  7. person.sayHello(); // Output: Hello, my name is John.
Trong ví dụ trên, khi phương thức sayHello được gọi trên đối tượng person, this sẽ tham chiếu đến đối tượng person, cho phép truy cập vào thuộc tính name của đối tượng.
  1. this trong hàm thông thường: Trong một hàm thông thường không được gọi từ một đối tượng, giá trị của this sẽ thay đổi tuỳ thuộc vào ngữ cảnh thực thi. Ví dụ:
  1. function sayHello() {
  2.      console.log(`Hello, my name is ${this.name}.`);
  3. }
  4. const person = {
  5.      name: 'John'
  6. };
  7. sayHello(); // Output: Hello, my name is undefined.
  8. person.sayHello = sayHello;
  9. person.sayHello(); // Output: Hello, my name is John.
Trong ví dụ trên, khi hàm sayHello được gọi mà không có đối tượng liên quan, this sẽ tham chiếu đến đối tượng toàn cục (trong trình duyệt là window hoặc global trong Node.js). Trong trường hợp này, khi gọi sayHello() mà không liên kết với đối tượng, thuộc tính name không tồn tại trong đối tượng toàn cục, nên kết quả là undefined. Tuy nhiên, khi phương thức sayHello được gán cho thuộc tính sayHello của đối tượng person và gọi thông qua person.sayHello(), this sẽ tham chiếu đến đối tượng person.
  1. this trong hàm xử lý sự kiện: Khi một hàm xử lý sự kiện được gọi, this sẽ tham chiếu đến phần tử DOM mà sự kiện xảy ra trên. Ví dụ:
  1. const button = document.querySelector('button');
  2. button.addEventListener('click', function() {
  3. console.log(`Button clicked! This:`, this);
Trong ví dụ trên, khi xử lý sự kiện click của nút button, this sẽ tham chiếu đến đối tượng DOM button đó.
Giá trị của this có thể bị thay đổi bằng cách sử dụng các phương thức như bind(), call(), hoặc apply(), để ràng buộc giá trị this cho một hàm cụ thể.

This trong JavaScript không được “bind”

Bạn đúng, trong JavaScript, giá trị của this không được “bind” mặc định cho một hàm, điều này có nghĩa là giá trị của this phụ thuộc vào cách hàm được gọi. Tuy nhiên, có một số phương pháp để ràng buộc (bind) giá trị this cho một hàm.
Một số cách ràng buộc giá trị this trong JavaScript là:
  1. Sử dụng phương thức bind(): Phương thức bind() trả về một hàm mới với giá trị this đã được ràng buộc vào một đối tượng cụ thể. Ví dụ:
  1. const person = {
  2.        name: 'John',
  3.        sayHello() {
  4.              console.log(`Hello, my name is ${this.name}.`);
  5.        }
  6. };
  7. const sayHelloBound = person.sayHello.bind(person);
  8. sayHelloBound(); // Output: Hello, my name is John.
Trong ví dụ trên, chúng ta sử dụng bind(person) để ràng buộc giá trị this của phương thức sayHello với đối tượng person, sau đó gán nó cho biến sayHelloBound. Khi gọi sayHelloBound(), giá trị this trong phương thức đã được ràng buộc với đối tượng person.
  1. Sử dụng phương thức call() hoặc apply(): Phương thức call() hoặc apply() cho phép gọi một hàm với giá trị this đã được ràng buộc và các đối số được truyền vào theo cách không giống nhau. Ví dụ:
  1. const person = {
  2.       name: 'John',
  3.        sayHello(greeting) {
  4.              console.log(`${greeting}, my name is ${this.name}.`);
  5.      }
  6. };
  7. person.sayHello.call(person, 'Hi'); // Output: Hi, my name is John.
  8. person.sayHello.apply(person, ['Hi']); // Output: Hi, my name is John.
  9. Trong ví dụ trên, chúng ta sử dụng call(person, 'Hi') hoặc apply(person, ['Hi']) để gọi phương thức sayHello với giá trị this được ràng buộc vào đối tượng person và đối số 'Hi' được truyền vào.
Lưu ý rằng cả bind(), call()apply() đều trả về một hàm mới và không thay đổi hàm gốc.
Xem thêm: Dịch vụ thiết kế website chuyên nghiệp, uy tín tại WEBBOX

Arrow function không có this

Arrow function trong JavaScript không có một giá trị this riêng của nó và không thể được ràng buộc (bind). Thay vào đó, giá trị this trong một arrow function được thừa kế từ phạm vi xung quanh nó (lexical scope). Điều này có nghĩa là trong một arrow function, this sẽ truy cập được vào giá trị this của phạm vi xung quanh nó.
Dưới đây là một ví dụ minh họa về việc sử dụng arrow function và giá trị this:
  1. const person = {
  2.       name: 'John',
  3.       sayHello: () => {
  4.            console.log(`Hello, my name is ${this.name}.`);
  5.       }
  6. };
  7. person.sayHello(); // Output: Hello, my name is undefined.
Trong ví dụ trên, arrow function sayHello không có giá trị this riêng của nó và nó sẽ thừa kế giá trị this từ phạm vi xung quanh, tức là phạm vi toàn cục. Trong trình duyệt, giá trị this toàn cục là đối tượng window và trong Node.js là đối tượng global. Do đó, khi gọi person.sayHello(), giá trị this.name không tồn tại trong phạm vi toàn cục và kết quả là undefined.
Điều này khác với cách this hoạt động trong các hàm thông thường (non-arrow function) trong JavaScript, vì chúng có giá trị this riêng của mình, được xác định bởi cách hàm được gọi và không bị thừa kế từ phạm vi xung quanh.

Khám phá thế giới của JavaScript và nâng cao kỹ năng lập trình của bạn với các phương thức mạnh mẽ. Để đảm bảo website của bạn luôn hoạt động mượt mà, hãy khám phá ngay dịch vụ chăm sóc website chất lượng tại WEBBOX.

Lời kết

Qua việc làm quen với các phương thức trong JavaScript, bạn sẽ có khả năng xử lý dữ liệu một cách linh hoạt và nhanh chóng, giúp bạn viết mã nguồn chất lượng cao và tiết kiệm thời gian. Hãy thực hành sử dụng các phương thức này và tận dụng sức mạnh của JavaScript để nâng cao kỹ năng lập trình của bạn. Nếu có bất kỳ thắc mắc nào hãy liên hệ với WEBBOX để được giải đáp nhé, chúc các bạn học tốt!
Đọc thêm  Tìm hiểu về Câu lệnh Switch case trong PHP đơn giản nhất

Tags :

Chia sẻ ngay :

0 0 đánh giá
Article Rating
Theo dõi
Thông báo của
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Bài viết liên quan

Bảng Giá Thiết Kế Website Thương Hiệu Cho Doanh Nghiệp
Dịch vụ thiết kế website thương hiệu cho doanh nghiệp tại WEBBOX là một hành trình mang tính chiến lược,...
Set trong Java
Set trong Java là gì? Tất tần tật kiến thức về Set trong Java
Trong lĩnh vực lập trình chắc hẳn các bạn đã từng nghe về Set trong Java, Set là một cấu trúc dữ liệu...
0
Rất thích suy nghĩ của bạn, hãy bình luận.x

Tư vấn giải pháp website tốt nhất cho doanh nghiệp

Chúng tôi luôn sẵn sàng lắng nghe và đưa ra giải pháp phù hợp nhất cho vấn đề của bạn.