1. Phương thức trong đối tượng là gì?

Một đối tượng ngoài các thuộc tính ra nó còn chứa hàm gọi là phương thức. Một phương thức là một hàm liên kết với một object. Hoặc có thể nói phương thức là một thuộc tính của object có giá trị là một hàm. Phương thức được định nghĩa giống như cách định nghĩa hàm. Ngoại trừ việc chúng phải được gán như là thuộc tính của một object.

Hiểu nôm na và ngắn gọn thì các phương thức Js là các hành động có thể được thực hiện trên các đối tượng.

Thường các phương thức được định nghĩa qua một hàm khởi tạo đối tượng. Ví dụ:

//Hàm khởi tạo đối tượng
function person(name, age) {
  this.name = name;
  this.age = age;
  this.changeName = function (name) {
    this.name = name;
  }
}

//Tạo đối tượng
var p = new person("Nam", 19);

p.changeName("Thành");
//Giờ p.name bằng "Thành"

Các phương thức bạn cũng có thể định nghĩa bên ngoài hàm khởi tạo. Ví dụ:

function person(name, age) {
  this.name= name;
  this.age = age;
  this.yearOfBirth = bornYear; //Gán phương thức bên ngoài
}

//Hàm bên ngoài hàm tạo, hàm này được gán vào đối tượng qua hàm tạo ở trên
function bornYear() {
  return 2020 - this.age;
}

var p = new person("Thành", 19);
document.write(p.yearOfBirth());

2. Từ khóa this trong JavaScript

Trong Js, từ khóa this đề cập đến một đối tượng. Đối tượng this phụ thuộc vào cách đang được gọi (được sử dụng hoặc được gọi). This đề cập đến các đối tượng khác nhau tùy thuộc vào cách nó được sử dụng:

  • Trong một phương thức đối tượng, this tham chiếu đến đối tượng .
  • Một mình, this đề cập đến đối tượng toàn cục .
  • Trong một hàm, this tham chiếu đến đối tượng toàn cục .
  • Trong một chức năng, trong chế độ nghiêm ngặt, this là undefined .
  • Trong một sự kiện, this đề cập đến phần tử đã nhận sự kiện.
  • Các phương thức như call() , apply() và bind() có thể tham chiếu this đến bất kỳ đối tượng nào .

Để hiểu hơn chúng ta cùng xem ví dụ sau nhé:

//Tạo object person
const person = {
    firstName: "Thành",
    lastName: "Nguyễn",
    id: 5566,
    // Tạo method fullName
    fullName : function() {
        return this.firstName + " " + this.lastName;
    }
};
document.write(person.fullName()); // Thành Nguyễn

Trong ví dụ ở trên, this chính là đối tượng person chủ sở hữu của hàm fullName . Nói cách khác this.firstName là thuộc tính firstName của object person .

3. Truy cập vào phương thức đối tượng

Ta có thể truy cập vào phương thức đối tượng bằng cú pháp sau:

objectName.methodName()

Thông thường, ta sẽ mô tả fullName() như một phương thức của đối tượng person và fullName là một thuộc tính. Thuộc tính fullName sẽ thực thi (dưới dạng một hàm) khi nó được gọi với () . Ví dụ sau truy cập phương thức fullName() của một đối tượng person :

<script>
const person = {
  firstName: "Thành",
  lastName: "Nguyễn",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

document.write(person.fullName());
</script>

Nếu bạn truy cập thuộc tính fullName , không có () , nó sẽ trả về định nghĩa hàm :

<script>
const person = {
  firstName: "Thành",
  lastName: "Nguyễn",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

document.write(person.fullName);
</script>

4. Thêm phương thức vào đối tượng trong JavaScript

Thêm một phương thức mới vào một đối tượng vô cùng đơn giản, nó cũng giống như thêm thuộc tính vào đối tượng

Ví dụ:

<script>
const person = {
  firstName: "Thành",
  lastName: "Nguyễn",
  id: 5566,
};
person.name = function() {
  return this.firstName + " " + this.lastName;
};

document.write
("Tên tôi là " + person.name()); 
</script>

5. Sử dụng các phương pháp tích hợp

Ví dụ này sử dụng phương thức toUpperCase() của đối tượng String để chuyển văn bản thành chữ hoa:

let message = "Hello world!";
let x = message.toUpperCase();

Giá trị của x , sau khi thực thi đoạn mã trên sẽ là:  HELLO WORLD!

<script>
const person = {
  firstName: "Thành",
  lastName: "Nguyễn",
  id: 5566,
};
person.name = function() {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

document.write
("Tên tôi là " + person.name()); 
</script>