Bạn đang xem : js xác định một lớp

Giới thiệu

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, bạn nên biết một số lựa chọn thay thế để đọc mã của người khác.

Đ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 để phần nào mô phỏng các lớp, nhưng nói chung JavaScript là một ngôn ngữ ít lớp hơn. Mọi thứ đều là một đối tượng. Và khi nói đến 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 ngôn ngữ phương pháp “lớp”.

1. Sử dụng một hàm

Đây có lẽ là một trong những cách phổ biến nhất. Bạn xác định một hàm JavaScript bình thường và sau đó tạo một đối tượng bằng cách sử dụng từ khóa new . Để 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 function () , bạn sử dụng từ khóa this , như trong ví dụ sau.

 

function

Apple

(

loại

)

{

this

.

type

< p class = "hl-code"> =

type

;

this

.

color

< p class = "hl-code"> =

"

red

"

;

this

.

getInfo

< p class = "hl-code"> =

getAppleInfo

;

}

function

getAppleInfo

(

)

{

trả về

cái này

.

color

+

'

'

+

cái này

.

loại

+

'

apple

'

;

}

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

 

var

apple

=

mới

Apple

(

'

macintosh

'

)

;

apple

.

color

< p class = "hl-code"> =

"

hơi đỏ

"

;

alert

(

apple

< p class = "hl-code">.

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 riêng getAppleInfo (). Mặc dù điều này hoạt động tốt, nhưng nó có một nhược điểm – bạn có thể phải xác định rất nhiều hàm này và tất cả chúng đều nằm trong “bảng tên toàn cầu”. Điều này có nghĩa là bạn có thể có xung đột đặt tên nếu bạn (hoặc một 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 khởi tạo, như sau:

 

function

Apple

(

loại

)

{

this

.

type

< p class = "hl-code"> =

loại

;

this

.

color

< p class = "hl-code"> =

"

red

"

;

this

.

getInfo

< p class = "hl-code"> =

hàm

()

{

trả về

cái này

.

color

+

'

'

+

cái này

.

loại

+

'

apple

'

;

}

;

}

Việc 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 cũng như 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

Một hạn chế 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ẻ hơn là thêm getInfo () vào nguyên mẫu của hàm khởi tạo.

 

function

Apple

(

loại

)

{

this

.

type

< p class = "hl-code"> =

type

;

this

.

color

< p class = "hl-code"> =

"

red

"

;

}

Apple

.

nguyên mẫu

< p class = "hl-code">.

getInfo

=

function

(

)

< / p>

{

trả về

cái này

.

color

+

'

'

+

cái này

.

loại

+

'

apple

'

;

}

;

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

2. Sử dụng các ký tự đối tượng

Chữ viết 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:
var o = {};
thay vì cách “bình thường”:
var o = new Object ();
Đối với mảng bạn có thể làm:
var a = [];
thay vì:
var a = new Array ();
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 theo nghĩa đen của đối tượng:

 

var

apple

=

{

loại

:

"

< p class = "hl-string"> macintosh

"

,

color

:

"

< p class = "hl-string"> red

"

,

getInfo

:

function

< p class = "hl-code">

()

{

trả về

cái này

.

color

+

'

'

+

cái này

.

loại

+

'

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 phiên bản này.

 

apple

.

color

=

"

hơi đỏ

"

;

alert

(

apple

< p class = "hl-code">.

getInfo

())

;

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 bất kỳ lúc 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 nào, nhớ không?) Khái niệm này không còn ý nghĩa nữa vì tất cả các đối tượng đều là các đơn nguyên để bắt đầu.

3. Singleton sử dụng một hàm

Một lần nữa với singleton, hả? 🙂

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 singleton. Đây là cú pháp:

 

var

apple

=

mới

hàm

()

{

this

.

type

< p class = "hl-code"> =

"

macintosh

"

;

this

.

color

< p class = "hl-code"> =

"

red

"

;

this

.

getInfo

< p class = "hl-code"> =

chức năng

()

{

trả về

cái này

.

color

+

'

'

+

cái này

.

loại

+

'

apple

'

;

}

;

}

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 tân ngữ hoàn toàn giống như trong 2.

 

apple

.

color

=

"

hơi đỏ

"

;

alert

(

apple

< p class = "hl-code">.

getInfo

())

;

new function () {...} thực hiện hai việc cùng một lúc: xác định một hàm (một hàm tạo ẩn danh) và gọi nó bằng new . Nó có thể 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 khởi tạo mà bạn sẽ chỉ sử dụng một lần và không có cảm giác phải đặt tên cho nó. .

Tóm tắt

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

Nói với bạn bè của bạn về bài đăng này trên
Facebook
Twitter


Xem thêm những thông tin liên quan đến chủ đề js định nghĩa một lớp

Learn JavaScript – Full Course for Beginners

  • Tác giả: freeCodeCamp.org
  • Ngày đăng: 2018-12-10
  • Đánh giá: 4 ⭐ ( 6843 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This complete 134-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript programming language.

    ⭐️Curriculum⭐️
    This is a stand-alone video but it follows the JavaScript curriculum at freecodecamp.org. Access the curriculum here:
    🔗 Basic JavaScript: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript
    🔗 ES6 JavaScript: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6

    ⭐️Code⭐️
    This course was created using scrimba.com. Access the course there along with the code:
    🔗 Basic JavaScript: https://scrimba.com/playlist/pny4ghw
    🔗 ES6 JavaScript: https://scrimba.com/playlist/p7v3gCd

    🐦🐦 Follow course creator Beau Carnes on Twitter: https://www.twitter.com/BeauCarnes

    ⭐️Course Contents⭐️
    0:00:00 Introduction
    0:01:24 Running JavaScript
    0:04:23 Comment Your Code
    0:05:56 Declare Variables
    0:06:15 Storing Values with the Assignment Operator
    0:11:31 Initializing Variables with the Assignment Operator
    0:11:58 Uninitialized Variables
    0:12:40 Case Sensitivity in Variables
    0:14:05 Basic Math
    0:15:30 Increment and Decrement
    0:16:22 Decimal Numbers
    0:16:48 Multiply Two Decimals
    0:17:18 Divide Decimals
    0:17:33 Finding a Remainder
    0:18:22 Augmented Math Operations
    0:21:19 Declare String Variables
    0:22:01 Escaping Literal Quotes
    0:23:44 Quoting Strings with Single Quotes
    0:25:18 Escape Sequences
    0:26:46 Plus Operator
    0:27:49 Plus Equals Operator
    0:29:01 Constructing Strings with Variables
    0:30:14 Appending Variables to Strings
    0:31:11 Length of a String
    0:32:01 Bracket Notation
    0:33:27 Understand String Immutability
    0:34:23 Find the Nth Character
    0:36:28 Word Blanks
    0:40:44 Arrays
    0:41:43 Nest Arrays
    0:42:33 Access Array Data
    0:43:34 Modify Array Data
    0:44:48 Access Multi-Dimensional Arrays
    0:46:30 push()
    0:47:29 pop()
    0:48:33 shift()
    0:49:23 unshift()
    0:50:36 Shopping List
    0:51:41 Write Reusable with Functions
    0:53:41 Arguments
    0:55:43 Global Scope
    0:59:31 Local Scope
    1:00:46 Global vs Local Scope in Functions
    1:02:40 Return a Value from a Function
    1:03:55 Undefined Value returned
    1:04:52 Assignment with a Returned Value
    1:05:52 Stand in Line
    1:08:41 Boolean Values
    1:09:24 If Statements
    1:11:51 Equality Operators
    1:19:17 And / Or Operators
    1:21:37 Else Statements
    1:22:27 Else If Statements
    1:23:30 Logical Order in If Else Statements
    1:24:45 Chaining If Else Statements
    1:27:45 Golf Code
    1:32:15 Switch Statements
    1:41:11 Returning Boolean Values from Functions
    1:42:20 Return Early Pattern for Functions
    1:43:38 Counting Cards
    1:49:11 Build Objects
    1:50:46 Dot Notation
    1:51:33 Bracket Notation
    1:52:47 Variables
    1:53:34 Updating Object Properties
    1:54:30 Add New Properties to Object
    1:55:19 Delete Properties from Object
    1:55:54 Objects for Lookups
    1:57:43 Testing Objects for Properties
    1:59:15 Manipulating Complex Objects
    2:01:00 Nested Objects
    2:01:53 Nested Arrays
    2:03:06 Record Collection
    2:10:15 While Loops
    2:11:35 For Loops
    2:13:56 Odd Numbers With a For Loop
    2:15:28 Count Backwards With a For Loop
    2:17:08 Iterate Through an Array with a For Loop
    2:19:43 Nesting For Loops
    2:22:45 Do…While Loops
    2:24:12 Profile Lookup
    2:28:18 Random Fractions and Whole Numbers
    2:31:46 parseInt Function
    2:33:29 Ternary Operator
    2:34:57 Multiple Ternary Operators
    2:36:57 var vs let
    2:41:32 const Keyword
    2:43:40 Mutate an Array Declared with const
    2:44:52 Prevent Object Mutation
    2:47:17 Arrow Functions
    2:53:04 Default Parameters
    2:54:00 Rest Operator
    2:55:31 Spread Operator
    2:57:18 Destructuring Assignment
    3:06:39 Template Literals
    3:10:43 Simple Fields
    3:12:24 Declarative Functions
    3:12:56 class Syntax
    3:15:11 getters and setters
    3:20:25 import and export

    🎥 Want something shorter? Here’s a 63-second JavaScript course: https://www.youtube.com/watch?v=OXiyLaNo3NE

Định nghĩa lớp

  • Tác giả: hocjava.com
  • Đánh giá: 4 ⭐ ( 9728 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Định nghĩa lớp trong lập trình hướng đối tượng với C++

  • Tác giả: gochocit.com
  • Đánh giá: 5 ⭐ ( 4897 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mỗi đối tượng đều thuộc về một lớp. Khi định nghĩa lớp trong OOP, cần xác định tên lớp, các thuộc tính và các phương thức thuộc về lớp đó.

Bài 13: Lớp và đối tượng

  • Tác giả: vncoder.vn
  • Đánh giá: 3 ⭐ ( 2383 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, chúng ta sẽ tìm hiểu chi tiết 2 trong những thành phần quan trọng nhất khi lập trình hướng đối tượng đó là đối tượng (Object), lớp (Class)

Đối tượng trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 1488 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng trong JavaScript – Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

[Tự học Javascript] Cú pháp cơ bản của lớp trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 5 ⭐ ( 8750 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong lập trình hướng đối tượng, một lớp là một mẫu code trong chương trình để tạo ra các đối tượng, cung cấp các giá trị ban đầu cho trạng thái (biến thành viên) và triển khai hành vi (hàm thành viên hoặc phương thức).

Javascript classes

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 9986 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Javascript classes được giới thiệu trong ECMAScript 2015 (ES6). Các lớp JavaScript cung cấp một cú pháp đơn giản hơn và rõ ràng hơn để tạo các đối tượng và làm việc với sự thừa kế. Định nghĩa class Cá…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Lập trình While Loop trong C với 5 ví dụ hay nhất - ví dụ về vòng lặp while

By ads_php