Phương thức là một hàm thuộc về một đối tượng và được thực thi với đối tượng đó dưới dạng ngữ cảnh.

Bạn đang xem : phương thức trong javascript là gì

1. Phương thức là gì

Hãy định nghĩa và gọi một hàm thông thường:

 

javascript

hàm

chào

(

ai

) {

quay lại

`Xin chào,

$ {

ai

}

! `

;

}

chào

(

'Thế giới'

);

// = & gt; 'Xin chào, Thế giới!'

Từ khóa function theo sau là tên, params và body: function welcome (ai) {...} tạo một định nghĩa hàm thông thường.

welcome ('World') là lệnh gọi hàm thông thường. Hàm welcome ('World') chấp nhận dữ liệu từ đối số.

Điều gì xảy ra nếu who là thuộc tính của một đối tượng? Để dễ dàng truy cập các thuộc tính của một đối tượng, bạn có thể đính kèm hàm vào đối tượng đó, hay nói cách khác là tạo một phương thức.

Hãy đặt welcome () một phương thức trên đối tượng world :

 

javascript

const

< / p>

thế giới

= {

ai:

< p>

'Thế giới'

,

< p>

chào

() {

quay lại

`Xin chào,

$ {

này

.

ai

}

! `

;

}

}

thế giới

.

chào

();

// = & gt; 'Xin chào, Thế giới!'

welcome () {...} hiện là một phương thức thuộc đối tượng world . world.greet () là một lệnh gọi phương thức.

Bên trong của phương thức welcome () this trỏ đến đối tượng mà phương thức thuộc về – world . Đó là lý do tại sao biểu thức this.who truy cập thuộc tính ai .

Lưu ý rằng this cũng được đặt tên theo ngữ cảnh.

Ngữ cảnh là tùy chọn

Trong khi trong ví dụ trước, tôi đã sử dụng this để truy cập đối tượng mà phương thức thuộc về – Tuy nhiên, JavaScript không áp đặt phương thức để sử dụng this .

Vì lý do này, bạn có thể sử dụng một đối tượng làm không gian tên của các phương thức:

 

javascript

const

không gian tên

= {

xin chào

(

ai

) {

trả lại

`Xin chào,

$ {

ai

}

! '

< p>;

},

chia tay

(

ai

) {

return

`Xin chào,

$ {

ai

}

! `

;

}

< / p>

}

không gian tên

.

chào

(

'Thế giới'

);

// = & gt; 'Hello, World!'

không gian tên

.

tạm biệt

(

'Thế giới'

);

// = & gt; 'Tạm biệt, Thế giới!'

namespace là một đối tượng chứa 2 phương thức: namespace.greet () namespace.farewell () .

Các phương thức không sử dụng this không gian tên đóng vai trò là nơi chứa các phương thức giống nhau.

2. Phương thức ký tự đối tượng

Như đã thấy trong chương trước, bạn có thể xác định một phương thức trực tiếp trong một đối tượng theo nghĩa đen:

 

javascript

const

< / p>

thế giới

= {

ai:

< p>

'Thế giới'

,

< p>

chào

() {

quay lại

`Xin chào,

$ {

này

.

ai

}

! `

;

}

};

thế giới < /p>

.

chào

();

// = & gt; 'Xin chào, Thế giới!'

hello () {....} là một phương thức được định nghĩa trên một đối tượng theo nghĩa đen. Loại định nghĩa như vậy được đặt tên là định nghĩa phương pháp viết tắt (khả dụng bắt đầu từ ES2015).

Ngoài ra còn có một cú pháp dài hơn về định nghĩa phương thức:

 

javascript

const

< / p>

thế giới

= {

ai:

< p>

'Thế giới'

,

< p>

chào

:

hàm

() {

quay lại

`Xin chào,

$ {

cái này

.

ai

}

! `

;

}

}

world

.

chào

();

// = & gt; 'Xin chào, Thế giới!'

welcome: function () {...} là một định nghĩa phương thức. Lưu ý sự hiện diện bổ sung của dấu hai chấm và từ khóa function .

Tự động thêm các phương thức

Phương thức chỉ là một hàm được lưu trữ như một thuộc tính trên đối tượng. Đó là lý do tại sao bạn có thể thêm động các phương thức vào một đối tượng:

 

javascript

const

thế giới

= {

ai:

'Thế giới'

,

< / p>

chào

() {

quay lại

`Xin chào,

$ {

cái này

.

ai

}

! `

;

}

};

// Thuộc tính mới chứa một hàm

world

.

vĩnh biệt

=

hàm

() {

trả về

`Xin tạm biệt,

$ {

điều này

.

ai

}

! `

;

}

world

.

chia tay

();

// = & gt; 'Tạm biệt, Thế giới!'

Đối tượng

world lúc đầu không có phương thức goodbye . Nó được thêm động.

Phương thức được thêm động có thể được gọi như một phương thức mà không gặp vấn đề gì: world.farewell () .

3. Phương thức lớp

Trong JavaScript, cú pháp class xác định một lớp sẽ phục vụ như một khuôn mẫu cho các bản sao của nó.

Một lớp cũng có thể có các phương thức:

 

javascript

class

< / p>

Greeter

{

hàm tạo

(

ai

) {

cái này

.

ai

=

ai

;

}

chào

() {

bảng điều khiển

.

log

(

this

===

myGreeter

);

// nhật ký đúng

trả về

`Xin chào,

$ {

cái này

.

ai

}

! `

;

}

}

const

myGreeter

=

mới

Greeter

(

'Thế giới'

);

myGreeter

.

chào < / p>

();

// = & gt; 'Chào thế giới!'

welcome () {...} là một phương thức được định nghĩa bên trong một lớp.

Mỗi khi bạn tạo một phiên bản của lớp bằng toán tử new (ví dụ: myGreeter = new Greeter ('World') ), các phương thức có sẵn để gọi trên ví dụ.

myGreeter.greet () là cách bạn gọi phương thức welcome () trên phiên bản. Điều quan trọng là this bên trong phương thức bằng với chính phiên bản: this = myGreeter bên trong welcome () {...} .

4. Cách gọi một phương thức

4.1 Gọi phương thức

Điều đặc biệt thú vị về JavaScript là việc xác định một phương thức trên một đối tượng hoặc lớp là một nửa công việc. Để duy trì ngữ cảnh của phương thức, bạn phải đảm bảo gọi phương thức như một … phương thức.

Hãy để tôi cho bạn biết lý do tại sao điều này lại quan trọng.

Nhớ lại đối tượng world có phương thức welcome () trên đó. Hãy kiểm tra xem giá trị nào có this khi welcome () được gọi dưới dạng một phương thức và như một hàm thông thường:

javascript

const

thế giới

= {

ai:

'Thế giới '

,

xin chào < / p>

() {

bảng điều khiển

.

< p> nhật ký

(

này

===

thế giới

);

quay lại

`Xin chào,

$ {

này

.

ai

}

! `

; < / p>

}

};

// Gọi phương thức

world < /p>

.

chào

();

// nhật ký đúng

const

welcomeFunc

=

thế giới

.

xin chào

; < / p>

// Gọi hàm thông thường

welcomeFunc

< p> ();

// = & gt; nhật ký sai

world.greet () là một lệnh gọi phương thức. Đối tượng world , theo sau là dấu chấm . , và cuối cùng là chính phương thức – đó là điều tạo nên phương thức gọi.

welcomeFunc có cùng chức năng với world.greet . Nhưng khi được gọi dưới dạng hàm thông thường welcomeFunc () , thì this bên trong welcome () không bằng với world đối tượng, mà là đối tượng chung (trong trình duyệt, đây là window ).

Tôi đặt tên cho các biểu thức như welcomeFunc = world.greet tách một phương thức khỏi đối tượng của nó. Sau đó, khi gọi phương thức được phân tách welcomeFunc () sẽ làm cho this bằng đối tượng toàn cục.

Việc tách một phương thức khỏi đối tượng của nó có thể có các dạng khác nhau:

 

jsx

// Phương thức được phân tách! cái này bị mất!

const

myMethodFunc

=

myObject

.

myMethod

;

< p class = "line">

// Phương thức được tách ra! cái này bị mất!

setTimeout

(

myObject

.

myMethod

,

1000

);

// Phương thức được tách ra! cái này bị mất!

myButton

.

addEventListener

(

'click'

,

myObject

.

myMethod

)

// Phương thức được tách ra! cái này bị mất!

& lt; nút

onClick

= < /p>

{

myObject

.

MyMethod

}

>

Nút React của tôi

& lt; / button & gt;

Để tránh làm mất ngữ cảnh của phương thức, hãy đảm bảo sử dụng lệnh gọi phương thức world.greet () hoặc liên kết phương thức theo cách thủ công với đối tượng welcomeFunc = world.greet.bind (this) .

4.2 Lời kêu gọi hàm gián tiếp

Như đã nêu trong phần trước, một lệnh gọi hàm thông thường đã this được giải quyết dưới dạng đối tượng toàn cục. Có cách nào để một hàm thông thường có giá trị tùy chỉnh của this không?

Chào mừng bạn với lệnh gọi hàm gián tiếp, có thể được thực hiện bằng cách sử dụng:

 

javascript

myFunc

. < / p>

gọi

(

thisArg

,

arg1

,

arg2

, ...,

argN

);

myFunc

.

áp dụng

(

thisArg

, [

< p> arg1

,

arg2

, ...,

argN

]); < / p>

các phương thức có sẵn trên đối tượng hàm.

Đối số đầu tiên của myFunc.call (thisArg) myFunc.apply (thisArg) là ngữ cảnh (giá trị của this ) của lời gọi gián tiếp. Nói cách khác, bạn có thể chỉ ra giá trị this sẽ có bên trong hàm theo cách thủ công.

Ví dụ: hãy xác định welcome () là một hàm thông thường và một đối tượng aliens có thuộc tính who :

 

javascript

hàm

chào

() {

quay lại

`Xin chào,

$ {

cái này

.

ai

}

! `

;

}

const

người ngoài hành tinh

= {

ai:

'Người ngoài hành tinh'

};

chào

.

cuộc gọi

(

người ngoài hành tinh

);

// = & gt; 'Xin chào, Người ngoài hành tinh!'

chào

.

đăng ký

(

người ngoài hành tinh

);

// = & gt; 'Xin chào, Người ngoài hành tinh!'

welcome.call (người ngoài hành tinh) welcome.apply (người ngoài hành tinh) đều là lệnh gọi phương thức gián tiếp. Giá trị this bên trong hàm welcome () bằng đối tượng aliens .

Lệnh gọi gián tiếp cho phép bạn mô phỏng lệnh gọi phương thức trên một đối tượng!

4.3 Gọi hàm ràng buộc

Cuối cùng, đây là cách thứ ba để bạn có thể gọi một hàm như một phương thức trên một đối tượng. Cụ thể, bạn có thể ràng buộc một hàm để có ngữ cảnh cụ thể.

Bạn có thể tạo một hàm liên kết bằng một phương pháp đặc biệt:

 

javascript

const

myBoundFunc

=

myFunc

.

ràng buộc

(

thisArg

,

arg1

,

arg2

, ...,

argN

);

Đối số đầu tiên của myFunc.bind (thisArg) là ngữ cảnh mà hàm sẽ bị ràng buộc.

Ví dụ: hãy sử dụng lại welcome () và liên kết nó với ngữ cảnh người ngoài hành tinh :

 

javascript

hàm

chào

() {

quay lại

`Xin chào,

$ {

cái này

.

ai

}

! `

;

}

const

người ngoài hành tinh

= {

ai:

'Người ngoài hành tinh'

};

const

< / p>

welcomeAliens

=

xin chào

.

ràng buộc

(

người ngoài hành tinh

);

welcomeAliens

();

// = & gt; 'Xin chào, Người ngoài hành tinh!'

Gọi welcome.bind (aliens) sẽ tạo ra một hàm mới trong đó this được liên kết với đối tượng aliens .

Sau đó, khi gọi hàm liên kết welcomeAliens () , this bằng người ngoài hành tinh bên trong hàm đó.

Một lần nữa, bằng cách sử dụng một hàm liên kết, bạn có thể mô phỏng lệnh gọi phương thức.

5. Hàm mũi tên như các phương thức

Sử dụng hàm mũi tên như một phương pháp không được khuyến khích và đây là lý do tại sao.

Hãy xác định phương thức welcome () dưới dạng một hàm mũi tên:

 

javascript

const

thế giới

= {

ai:

'Thế giới'

,

< / p>

chào

:

()

= & gt;

{

quay lại

`Xin chào,

$ {

< p> cái này

.

ai

}

! `

;

}

};

world

.

chào

();

// = & gt; 'Xin chào, không xác định!'

Rất tiếc, world.greet () trả về 'Hello, undefined!' thay vì 'Hello, World!' như mong đợi. < / p>

Vấn đề là giá trị this bên trong của hàm mũi tên bằng this của phạm vi bên ngoài. Luôn luôn. Nhưng những gì bạn muốn là này bằng đối tượng world .

Đó là lý do tại sao this bên trong hàm mũi tên bằng đối tượng toàn cục: window trong trình duyệt. 'Xin chào, $ {this.who}!' đánh giá là Xin chào, $ {windows.who}! , cuối cùng là 'Xin chào, không xác định! '.

Tôi thích các chức năng mũi tên. Nhưng chúng không hoạt động như các phương pháp.

6. Tóm tắt

Phương thức là một hàm thuộc về một đối tượng. Ngữ cảnh của một phương thức (giá trị this ) bằng đối tượng mà phương thức đó thuộc về.

Bạn cũng có thể xác định các phương thức trên các lớp. this bên trong một phương thức của một lớp bằng với phiên bản.

Điều cụ thể đối với JavaScript là nó không đủ để xác định một phương pháp. Bạn cũng cần đảm bảo sử dụng một lệnh gọi phương thức. Thông thường, lệnh gọi phương thức có cú pháp sau:

 

javascript

// Gọi phương thức

myObject

.

myMethod

(

'Arg 1' < / p>

,

'Phần 2'

);

Điều thú vị là trong JavaScript, bạn có thể xác định một hàm thông thường, không thuộc về một đối tượng, nhưng sau đó gọi hàm đó như một phương thức trên một đối tượng Arbitrar. Bạn có thể làm như vậy bằng cách sử dụng một lệnh gọi hàm gián tiếp hoặc liên kết một hàm với một ngữ cảnh cụ thể:

 

javascript

// Gọi hàm gián tiếp

myRegularFunc

.

gọi

(

myObject

,

'Arg 1'

,

'Arg 2'

);

myRegularFunc

.

áp dụng

(

myObject

,

'Arg 1'

,

'Arg 2'

);

// Hàm liên kết

< p class = "line">

const

myBoundFunc

=

myRegularFunc

.

ràng buộc

(

myObject

);

< p> myBoundFunc

(

'Arg 1'

,

'Arg 2'

);

Lệnh gọi gián tiếp và giới hạn mô phỏng lệnh gọi phương thức.

Để đọc về tất cả các cách bạn có thể xác định các hàm trong JavaScript, hãy làm theo bài đăng của tôi 6 Cách khai báo các hàm trong JavaScript .

Bạn bối rối về cách this hoạt động trong JavaScript? Sau đó, tôi khuyên bạn nên đọc hướng dẫn chuyên sâu của mình Giải thích nhẹ nhàng về “cái này” bằng JavaScript
.

Quizzzzz: một phương thức trong JavaScript có thể là một hàm không đồng bộ không?


Xem thêm những thông tin liên quan đến chủ đề một phương thức trong javascript là gì

#23 Function vs Method – Phân Biệt Hàm và Phương Thức | JavaScript Cơ Bản Từ A đến Z Cho Beginners

  • Tác giả: Hỏi Dân IT
  • Ngày đăng: 2021-08-29
  • Đánh giá: 4 ⭐ ( 6654 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Function và Method là những công cụ dùng để tái sử dụng code và giúp chúng ta thực hiện mục tiêu viết một lần, sử dụng ở nhiều nơi. Vậy functions và method có gì khác nhau, hay đơn giản nó chỉ là ‘hàm’ gọi trong thế giới của javascript ?
    Trong video này, chúng ta sẽ cùng nhau đi làm rõ những khái niệm dễ nhầm lẫn này.
    Chi tiết và cụ thể, các bạn cùng theo dõi video này nhé ❤

    🎁 Tài liệu tham khảo sử dụng trong video:
    👉 Nội dung khóa học: https://docs.google.com/document/d/1nQkgzHjpkIf6yjDf1mosCCrrWoJNJfvKZtORMAAakQw/edit?usp=sharing
    👉 Source code video này: https://github.com/haryphamdev/javascript-basic-hoi-dan-it/tree/video19
    👉 Phân biệt Functions vs Methods: https://stackoverflow.com/questions/155609/whats-the-difference-between-a-method-and-a-function
    👉 Review top các ngôn ngữ lập trình ‘hot’ nhất hiện này:
    https://www.youtube.com/watch?v=lNVKVcM6_yg&list=PLncHg6Kn2JT4ZcAud44vEfobsTLdY0YVC&index=8

    —–
    🌹Bạn nào muốn donate hay mua cho mình cốc cà phê để có thêm động lực làm nhiều video chất lượng, thì các bạn có thể liên hệ qua: 🤩🤩🤩
    1. Patreon của mình : https://www.patreon.com/haryphamdev
    2. Fanpage Facebook Tiếng Việt: https://www.facebook.com/askITwithERIC
    3. Fanpage Facebook Tiếng Anh: https://www.facebook.com/haryphamdev

    😁Mình có 1 channel khác (Tiếng Anh, tên là haryphamdev), nên là có 2 Fanpage Facebook: Link channel Tiếng Anh: https://www.youtube.com/channel/UCHqJxLo7mKam9GKqqwr2wfA

    ———————————— IMPORTANT —————————–
    🚀 Learn by doing : Hiện tại, mình đang làm 1 series miễn phí, học và thực hành để trở thành 1 fullstack web developer từ A đến Z. Và để thực hiện được mục tiêu này, khóa học này chính là thứ rất cần thiết dành cho các bạn beginners – Javscript Basic. (Javascript cơ bản từ A đến Z)

    1️⃣ Các bạn nhận được gì khi kết thúc khóa học?

    ✔ Các bạn có thể làm chủ công nghệ, cũng như học được, biết được những kiến thức thực tế được sử dụng với ngôn ngữ Javascript.

    ✔ Các bạn hiểu được Javascript có thể làm những gì, chú trọng vào những kiến thức cơ bản nhưng cốt lõi nhất.
    Phương châm của mình luôn là “chỉ nên học những cái mà các công ty cần”, không nên học tràn lan, tỏ ra ta đây cái gì cũng biết, cơ mà bản chất lại không biết (hiểu) gì.

    Các bạn nên nhớ rằng, đối với những người mới bắt đầu, nên đi chậm nhưng mà chắc, không cần code siêu, chỉ cần biết cách ‘google search’ là được.

    2️⃣ Nội dung khóa học ?
    ✔Mình dự định sẽ làm 1 series hướng dẫn full từ A đến Z những kiến thức căn bản(cốt lõi) của ngôn ngữ javascript cho những bạn chưa biết gì, những người mới bắt đầu dấn thân vào học ngôn ngữ javascirpt này.

    ✔Khóa này chính là bước đệm để các bạn có thể chuẩn bị một công cụ cũng như kiến thức cần thiết, từ đó có thể làm những cái to tát hơn, như làm game, app và website thực tế.

    3️⃣ Công nghệ sử dụng ?
    ✔ HTML, CSS và Javascript.

    4️⃣ Lịch trình ra video ?
    Hiện tại, mình đang đi làm fulltime, vì vậy không thể dành 100% thời gian làm video khóa học này được. Tuy nhiên, mình luôn cố gắng để làm video đều đặn và thường xuyên, vì mình nhận được rất nhiều tin nhắn cũng như comment của các bạn, mong muốn được học khóa học này ❤
    👉 Tối thiểu là 1 tuần sẽ có 2 video về khóa học, còn đôi khi mình có nhiều thời gian rảnh thì 1 tuần 7 cái luôn 😁

    👉Các bạn muốn video ra nhanh thì đừng quên Đăng Ký Kênh, Like, Share và Comment bên dưới video để mình có thêm động lực làm video nha. Cảm ơn các bạn nhiều 💕💕💕

    👉 Đây là video thứ tự 23 trong khóa học này

    👉 Các videos này sẽ được cập nhật vào playlist -Tự Học Javascript Cơ Bản Từ A đến Z Cho Người Mới Bắt Đầu với Hỏi Dân IT: https://www.youtube.com/watch?v=2Uthlmwd2bI&list=PLncHg6Kn2JT5dfQqpVtfNYvv3EBVHHVKo

    👉 Các bạn đăng ký kênh, bật thông báo để có thể nhận được những video từ series này một cách sớm nhất nhé ❤

    ———————————— IMPORTANT —————————–

    🧠 Nội dung video:
    0:00 Giới thiệu
    3:15 Arrow function
    5:05 Method
    9:15 Ví dụ với Class
    12:35 Function vs Method

    🌎 Tìm mình tại đây:
    1. Facebook Fanpage (Tiếng việt): https://www.facebook.com/askITwithERIC
    2. Facebook Fanpage (Tiếng anh): https://www.facebook.com/haryphamdev
    3. Group trao đổi học tập Facebook: https://www.facebook.com/groups/hoidanit
    4. Github: https://github.com/haryphamdev
    5. Youtube channel: https://www.youtube.com/channel/UCVkBcokjObNZiXavfAE1-fA
    6. Email: haryphamdev@gmail.com

    ĐỪNG QUÊN NHẤN CHUÔNG 🔔 ĐỂ NHẬN CẬP NHẬT VIDEO MỚI NHẤT CŨNG NHƯ ► ĐĂNG KÝ KÊNH! ► https://bit.ly/31P4KhK

    KhoaHocJavaScirpt javascriptBasic HoiDanIT

Một số phương thức với object trong Javascript

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 9827 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó. Nội dung có…

Gọi hàm với phương thức call() trong JavaScript – Minh Hoàng Blog

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

JavaScript: phương thức getElementById

  • Tác giả: www.daipho.com
  • Đánh giá: 4 ⭐ ( 7330 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phương thức getElementById trả về phần tử có thuộc tính ID là giá trị được chỉ định. Phương thức này là một trong những phương thức phổ biến nhất trong

[Tự học Javascript] Các thuộc tính và phương thức private, protected trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 5 ⭐ ( 2439 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một trong những nguyên tắc quan trọng nhất của lập trình hướng đối tượng – phân định giao diện bên trong với giao diện bên ngoài.

Phương thức (Method) trong JavaScript

  • Tác giả: niithanoi.edu.vn
  • Đánh giá: 4 ⭐ ( 4075 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khái niệm về Method trong Javascript (Phương thức trong Javascript), cách sử dụng và tìm hiểu về một số phương thức được dựng sẵn trong Javascript

Extends trong Javascript – kế thừa và ghi đè phương thức

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 3130 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu cách sử dụng từ khóa extends trong Javascript, qua đó sẽ giúp bạn hiểu được tính kế thừa và cách ghi đè phương thức trong js bằng extends

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  Thành phần React là gì? - thành phần trong reactjs là gì

By ads_php