Chức năng trong lớp JavaScript

JavaScript là một ngôn ngữ hướng đối tượng rất linh hoạt khi nói đến cú pháp. Trong bài viết này, bạn có thể tìm thấy ba cách để xác định và khởi tạo một đối tượng. Ngay cả khi bạn đã chọn cách làm yêu thích của mình, thì việc biết một số lựa chọn thay thế để đọc mã của người khác sẽ giúp ích cho bạn

Điều quan trọng cần lưu ý là không có lớp nào trong JavaScript. Các hàm có thể được sử dụng để mô phỏng phần nào các lớp, nhưng nói chung JavaScript là ngôn ngữ không có lớp. Tất cả mọi thứ là một đối tượng. Và khi nói đến tính kế thừa, các đối tượng kế thừa từ các đối tượng chứ không phải các lớp từ các lớp như trong các ngôn ngữ kiểu "lớp"

1. Sử dụng một chức năng

Đây có lẽ là một trong những cách phổ biến nhất. Bạn định nghĩa một hàm JavaScript thông thường và sau đó tạo một đối tượng bằng cách sử dụng từ khóa

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}
 
// anti-pattern! keep reading...
function getAppleInfo() {
    return this.color + ' ' + this.type + ' apple';
}

4. Để xác định các thuộc tính và phương thức cho một đối tượng được tạo bằng cách sử dụng

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}
 
// anti-pattern! keep reading...
function getAppleInfo() {
    return this.color + ' ' + this.type + ' apple';
}

5, bạn sử dụng từ khóa

var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());

0, như trong ví dụ sau

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}
 
// anti-pattern! keep reading...
function getAppleInfo() {
    return this.color + ' ' + this.type + ' apple';
}

Để khởi tạo một đối tượng bằng hàm tạo của Apple, đặt một số thuộc tính và gọi phương thức, bạn có thể thực hiện như sau

var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());

1. 1. Các phương thức được xác định nội bộ

Trong ví dụ trên, bạn thấy rằng phương thức getInfo() của "lớp" Apple đã được định nghĩa trong một hàm getAppleInfo() riêng biệt. Mặc dù điều này hoạt động tốt, nhưng nó có một nhược điểm - cuối cùng bạn có thể xác định rất nhiều chức năng này và tất cả chúng đều nằm trong "tên cụ thể toàn cầu". Điều này có nghĩa là bạn có thể gặp xung đột về đặt tên nếu bạn (hoặc thư viện khác mà bạn đang sử dụng) quyết định tạo một hàm khác có cùng tên. Cách để ngăn chặn ô nhiễm không gian tên chung, bạn có thể xác định các phương thức của mình trong hàm tạo, như thế này

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = function() {
        return this.color + ' ' + this.type + ' apple';
    };
}

Sử dụng cú pháp này không thay đổi gì trong cách bạn khởi tạo đối tượng và sử dụng các thuộc tính và phương thức của nó

1. 2. Các phương thức được thêm vào nguyên mẫu

Nhược điểm của 1. 1. là phương thức getInfo() được tạo lại mỗi khi bạn tạo một đối tượng mới. Đôi khi đó có thể là điều bạn muốn, nhưng rất hiếm. Một cách rẻ tiền hơn là thêm getInfo() vào nguyên mẫu của hàm tạo

function Apple (type) {
    this.type = type;
    this.color = "red";
}
 
Apple.prototype.getInfo = function() {
    return this.color + ' ' + this.type + ' apple';
};

Một lần nữa, bạn có thể sử dụng các đối tượng mới giống hệt như trong 1. và 1. 1

2. Sử dụng đối tượng chữ

Chữ là cách ngắn hơn để xác định các đối tượng và mảng trong JavaScript. Để tạo một đối tượng trống bằng cách sử dụng, bạn có thể làm.
______01
thay vì cách "thông thường".
______02
Đối với mảng bạn có thể làm.

var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());

3
thay vì.
______04
Vì vậy, bạn có thể bỏ qua những thứ giống như lớp và tạo một thể hiện (đối tượng) ngay lập tức. Đây là chức năng tương tự như được mô tả trong các ví dụ trước, nhưng lần này sử dụng cú pháp nghĩa đen của đối tượng.

var apple = {
    type: "macintosh",
    color: "red",
    getInfo: function () {
        return this.color + ' ' + this.type + ' apple';
    }
}

Trong trường hợp này, bạn không cần (và không thể) tạo một thể hiện của lớp, nó đã tồn tại. Vì vậy, bạn chỉ cần bắt đầu sử dụng ví dụ này

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}
 
// anti-pattern! keep reading...
function getAppleInfo() {
    return this.color + ' ' + this.type + ' apple';
}

0

Một đối tượng như vậy đôi khi còn được gọi là singleton. Trong các ngôn ngữ "cổ điển" như Java, singleton có nghĩa là bạn chỉ có thể có một thể hiện duy nhất của lớp này tại bất kỳ thời điểm nào, bạn không thể tạo thêm các đối tượng của cùng một lớp. Trong JavaScript (không có lớp, nhớ không?), khái niệm này không còn ý nghĩa gì nữa vì tất cả các đối tượng đều bắt đầu bằng các đối tượng đơn lẻ

3. Singleton sử dụng một chức năng

Một lần nữa với singleton, eh?

Cách thứ ba được trình bày trong bài viết này là sự kết hợp của hai cách khác mà bạn đã thấy. Bạn có thể sử dụng một hàm để xác định một đối tượng đơn lẻ. Đây là cú pháp

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}
 
// anti-pattern! keep reading...
function getAppleInfo() {
    return this.color + ' ' + this.type + ' apple';
}

1

Vì vậy, bạn thấy rằng điều này rất giống với 1. 1. đã thảo luận ở trên, nhưng cách sử dụng đối tượng giống hệt như trong 2

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}
 
// anti-pattern! keep reading...
function getAppleInfo() {
    return this.color + ' ' + this.type + ' apple';
}

0

var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());

5 làm hai việc cùng một lúc. định nghĩa một hàm (một hàm tạo ẩn danh) và gọi nó bằng

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}
 
// anti-pattern! keep reading...
function getAppleInfo() {
    return this.color + ' ' + this.type + ' apple';
}

4. Nó có thể trông hơi khó hiểu nếu bạn không quen và nó không quá phổ biến, nhưng này, đó là một tùy chọn, khi bạn thực sự muốn một hàm tạo mà bạn sẽ chỉ sử dụng một lần và không có ý nghĩa gì khi đặt tên cho nó

Tóm lược

Bạn đã thấy ba (cộng thêm một) cách tạo đối tượng trong JavaScript. Hãy nhớ rằng (bất chấp tiêu đề của bài viết) không có thứ gọi là lớp trong JavaScript. Mong muốn bắt đầu viết mã bằng kiến ​​thức mới?

Các lớp JavaScript có thể có chức năng không?

Làm cách nào để tạo một hàm trong lớp trong JavaScript?

Cách gọi hàm trong lớp JavaScript?

một chức năng được gọi là gì trong một lớp học?