Cổng Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : việc sử dụng từ khóa này trong javascript là gì

Từ khóa this trong JavaScript thường là nguồn của nhiều nhầm lẫn cho người mới bắt đầu với ngôn ngữ. Một số nhầm lẫn này bắt nguồn từ thực tế là điều này trong JavaScript được xử lý khác so với trong các ngôn ngữ khác như trong Java hoặc tự trong Python.
Hiểu điều này là hoàn toàn bắt buộc để hiểu các khái niệm nâng cao hơn trong JavaScript hoặc để đọc và viết mã JavaScript, đó là lý do tại sao chúng tôi dành bài viết này để cố gắng làm rõ điều này thực sự có nghĩa là gì trong JavaScript.
Chúng tôi sẽ dành phần lớn bài viết để tìm hiểu về this có tham chiếu đến các hàm trong JavaScript, đó là lý do tại sao trước tiên chúng ta sẽ xem xét sự thật về các hàm JavaScript sẽ giúp chúng ta thực hiện điều này tốt hơn.

this và Functions

Các hàm, trong JavaScript, về cơ bản là các đối tượng. Giống như các đối tượng, chúng có thể được gán cho các biến, được truyền cho các hàm khác và trả về từ các hàm. Và cũng giống như các đối tượng, chúng có các thuộc tính riêng của chúng. Một trong những thuộc tính này là this .
Giá trị mà this lưu trữ là ngữ cảnh thực thi hiện tại của chương trình JavaScript. Do đó, khi được sử dụng bên trong một hàm Giá trị của this sẽ thay đổi tùy thuộc vào cách hàm đó được xác định, cách nó được gọi và ngữ cảnh thực thi mặc định.
Lưu ý: this luôn giữ tham chiếu đến một đối tượng đơn xác định ngữ cảnh thực thi dòng mã hiện tại.
Trước khi chúng ta tìm hiểu sâu hơn về cách nó hoạt động trong các hàm, chúng ta hãy xem nó hoạt động như thế nào bên ngoài chúng:
Global Context:
Một dòng mã được viết bên ngoài một hàm được cho là thuộc về ngữ cảnh toàn cục và giá trị của hàm này trong ngữ cảnh chung này giống với đối tượng toàn cục.
Ví dụ: nếu bạn mở bảng điều khiển trình duyệt của mình và nhập các dòng sau vào nó và nhấn return / enter:
console.log (this)
Bạn sẽ thấy đối tượng Window được đăng nhập vào bảng điều khiển. Điều này là do đối tượng toàn cục, trong thời gian chạy của trình duyệt chẳng hạn như thời gian chạy của Chrome, là đối tượng Cửa sổ.
Tuy nhiên, bên trong một hàm, ngữ cảnh chung có thể không còn nữa và hàm có thể có ngữ cảnh được xác định riêng và do đó, một giá trị khác của nó. Để hiểu điều đó, chúng ta hãy chuyển sự chú ý của mình trở lại các hàm:
Các hàm, trong JavaScript có thể được gọi theo nhiều cách:
1. Gọi hàm
2. Gọi hàm
3. Lệnh gọi hàm tạo

điều này với lệnh gọi hàm:

Lệnh gọi hàm đề cập đến quá trình gọi một hàm bằng cách sử dụng tên của nó hoặc một biểu thức đánh giá đối tượng hàm theo sau bởi một tập hợp các dấu ngoặc mở và đóng đầu tiên (việc bao gồm các dấu ngoặc vuông cho thấy rằng chúng tôi đang yêu cầu công cụ JavaScript thực thi hàm ngay lập tức).
Ví dụ:

JavaScript

< / p>

& lt;! DOCTYPE html & gt;

& lt; h tml & gt;

& lt; body & gt;

& lt; script & gt;

function doSomething () {

< / code>

}

doSomething ();

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

  
 

cái này bên trong hàm doSomething, nếu nó được gọi thông qua lệnh gọi hàm như trên, có giá trị của đối tượng toàn cục, là đối tượng window trong môi trường trình duyệt:
< / p>

JavaScript

& lt;! DOCTYPE html & gt; < / p>

& lt; html & gt;

& lt; body & gt;

& lt; script & gt;

function doSomething (a, b) {

this . propone = " test value " ;

}

< p class = "line number10 index9 alt1">

doSomething ();

document.write (window.propone);

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

 
  

Đầu ra:

 giá trị thử nghiệm 

Tuy nhiên, điều này không phải lúc nào cũng đúng. Nếu hàm doSomething () đang chạy ở chế độ nghiêm ngặt , nó sẽ ghi nhật ký không xác định thay vì đối tượng cửa sổ chung. Điều này là do, ở chế độ nghiêm ngặt (được biểu thị bằng dòng: 'use precision'; ), giá trị mặc định của giá trị này, đối với bất kỳ đối tượng hàm nào được đặt thành không xác định thay vì đối tượng toàn cục.
Ví dụ:

JavaScript

< p>

& lt ;! DOCTYPE html & gt;

& lt; html & gt;

function doSomething () {

'sử dụng nghiêm ngặt' ;

document.write ( this + '& lt; br & gt;' )

function innerFunction () {

document.write ( this )

< p class = "line number15 index14 alt2"> }

internalFunction ();

}

< / p>

doSomething ();

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

 
  

Đầu ra:

 không xác định
undefined 

điều này với lệnh gọi phương thức:

Các hàm, khi được định nghĩa là trường hoặc thuộc tính của đối tượng, được gọi là phương thức.

JavaScript

< / p>

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; body & gt;

& lt; script & gt;

let person = {

name: " John " ,

age: 31,

logInfo: function () {

document.write (< / code> this . name + "is" + this . age + "years old" < / code> );

}

} < / p>

person.logInfo ( )

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

 
  

Đầu ra:

 John 31 tuổi 

Trong ví dụ mã trên, logInfo () là một phương thức của đối tượng người và chúng tôi đã gọi nó bằng cách sử dụng mẫu gọi đối tượng.
Nghĩa là, chúng tôi đã sử dụng trình truy cập thuộc tính để truy cập phương thức là một phần của đối tượng.
Yêu cầu như vậy việc sử dụng một biểu thức đánh giá đối tượng mà phương thức của chúng tôi là một phần của nó và một trình truy cập thuộc tính (Ví dụ: person.logInfo () ) theo sau bởi một tập hợp các dấu ngoặc đơn mở và đóng.
Cần phải hiểu cách gọi hàm và lệnh gọi phương thức khác nhau như thế nào.
Điều này sẽ giúp chúng tôi hiểu ngữ cảnh this có thể là gì trong bất kỳ hàm nhất định nào, bởi vì trong mỗi lệnh gọi này, giá trị của this là khác nhau.
Bên trong một phương thức như vậy, đã được gọi bằng cách sử dụng trình truy cập thuộc tính, this sẽ có giá trị của đối tượng đang gọi, tức là this sẽ trỏ đến đối tượng được sử dụng cùng với trình truy cập thuộc tính để thực hiện cuộc gọi.
Ví dụ:

JavaScript

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; body & gt;

& lt; script & gt;

let add = {

num: 0,

calc: function () {

< / p>

document.write ( cái này + '' )

this . num

+ = 1;

< code class = "undefined space"> return this . num; < / code>

}

};

document.write (add.calc () + '& lt; br & gt;' );

document.write (add.calc ( ));

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

  
 

Đầu ra:

 [object Object] 1
[object Object] 2 

Trong ví dụ trên, calc () là một phương thức của đối tượng thêm và do đó được gọi bằng cách sử dụng các quy tắc gọi phương thức ở dòng 9 và 10.
Và chúng ta biết, khi các mẫu gọi phương thức được sử dụng, giá trị của this được đặt thành đối tượng đang gọi.
Bên trong phương thức calc () này, giá trị của giá trị này được đặt thành đối tượng đang gọi, trong đó trường hợp được thêm vào. và do đó chúng tôi có thể truy cập thành công thuộc tính num của add.
Tuy nhiên, hãy cho chúng tôi biết một điểm nhầm lẫn chính:
Điều gì xảy ra với this trong một hàm được lồng bên trong một phương thức của một đối tượng?

JavaScript

< / p>

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; body & gt;

& lt; script & gt;

let add = {

num: 0,

calc: function () {

< p class = "line number10 index9 alt1"> document.write ( this + '' )

function innerfunc () {

this . Num + = 1;

document.write ( this + '' );

return this . num

} return innerfunc ();

}

};

document.write (add.calc () + '& lt; br & gt;' );

document.write (add.calc ());

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

 
  

Đầu ra:

 [object Object] [object Window] NaN
[object Object] [object Window] NaN 

Hãy cố gắng hiểu điều gì vừa xảy ra.
Khi chúng ta gọi calc () ở dòng 14 và 15, chúng ta đang sử dụng lệnh gọi phương thức đặt this để thêm vào calc (). Điều này có thể được xác minh bằng cách sử dụng câu lệnh log ở dòng 4.
Tuy nhiên, innerfunc () được gọi từ bên trong phương thức calc () bằng cách sử dụng một lệnh gọi hàm đơn giản (dòng 11). Điều này có nghĩa là, bên trong innerfunc (), đối tượng này được đặt thành đối tượng toàn cục, đối tượng này không có thuộc tính num và do đó thu được các kết quả đầu ra NaN.
Chúng ta giải quyết vấn đề này như thế nào? Làm cách nào để giữ nguyên giá trị của đối tượng này từ phương thức bên ngoài bên trong hàm lồng nhau?
Một giải pháp là gán giá trị this từ hàm bên ngoài cho một biến sẽ được sử dụng trong hàm lồng nhau như sau:

< h2 class = "tabtitle"> JavaScript

& lt;! DOCTYPE html & gt;

< p class = "line number2 index1 alt1"> & lt; html & gt;

& lt ; body & gt;

& lt; script & gt;

let add = {

num: 0,

calc: function () {

document.write ( this + '' )

thisreference = this ;

function innerfunc ()

{

thisreference.num + = 1;

document.write ( thisreference + '' );

< code class = "undefined space"> return thisreference.num;

}

return innerfunc ();

}

};

tài liệu. write (add.calc () + '& lt; br & gt;' );

document.write (add.calc ());

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

 
  

Đầu ra:

 [object Object] [object Object] 1
[object Object] [object Object] 2 

Các giải pháp khác cho vấn đề này liên quan đến việc sử dụng bind (), call () hoặc apply () mà chúng tôi sẽ sớm xem xét.

điều này với lệnh gọi hàm tạo:

Lệnh gọi hàm tạo được thực hiện khi từ khóa mới được theo sau bởi tên hàm và tập hợp các dấu ngoặc đơn mở và đóng (có hoặc không có đối số).
Ví dụ: : let person1 = new People ('John', 21);
Ở đây, person1 là đối tượng mới được tạo và People là hàm khởi tạo được sử dụng để tạo đối tượng này.
Lệnh gọi hàm tạo là một trong nhiều cách tạo đối tượng trong JavaScript.
Chính xác thì điều gì sẽ xảy ra khi chúng ta sử dụng từ khóa mới được kết hợp với tên hàm?
Về cơ bản, có năm bước liên quan đến việc tạo một đối tượng thông qua phương pháp này. Hãy sử dụng nghiên cứu chúng với ví dụ sau:

JavaScript

< / p>

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; body & gt;

& lt; script & gt;

let people = function (tên, tuổi) {

this . name = name;

this . age = age ;

this . displayInfo = function () {

document.write ( this . name + " is " + this . age + " old ");

}

}

để người1 < / code>

= mới người ( 'John' , 21);

< p class = "line number18 index17 alt1"> person1.displayInfo ();

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

 
  

Đầu ra:

 John 21 tuổi 
  • Đầu tiên, một đối tượng trống được tạo là một phiên bản của hàm tên được sử dụng với mới (tức là: người (tên, tuổi)). Nói cách khác, nó đặt thuộc tính hàm tạo của đối tượng với hàm được sử dụng trong lệnh gọi (người (tên, tuổi)).
  • Sau đó, nó liên kết nguyên mẫu của hàm tạo ( people) đối với đối tượng mới được tạo, do đó đảm bảo rằng đối tượng này có thể kế thừa tất cả các thuộc tính và phương thức của hàm khởi tạo
  • Sau đó, hàm tạo được gọi trên đối tượng mới được tạo này. lệnh gọi phương thức, chúng ta sẽ thấy điều đó tương tự. Do đó, bên trong hàm khởi tạo, this nhận giá trị của đối tượng mới được tạo được sử dụng trong lệnh gọi.
  • Cuối cùng, đối tượng đã tạo, với tất cả các thuộc tính và phương thức đã đặt, được trả lại cho person1

Trình duyệt được hỗ trợ:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari < / li>

Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề việc sử dụng từ khóa này trong javascript là gì

[Javascript căn bản] | Bài 12: Sử dụng hàm - function trong javascript | Nodemy

  • Tác giả: Nodemy
  • Ngày đăng: 2020-05-17
  • Đánh giá: 4 ⭐ ( 7491 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ✪ Nội dung bài học:
    1. Định nghĩa hàm (hay còn gọi là khai báo hằm, hoặc lệnh hàm) bao gồm từ khóa function, theo sau nó là:
    • Tên của hàm.
    • Danh sách các tham số truyền vào hàm, được đặt trong ngoặc đơn và cách nhau bởi dấu phẩy.
    • Các câu lệnh của JavaScript để tạo ra một hàm, được đặt trong ngoặc nhọn {...}.

    👇 LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course MIỄN PHÍ 👇:
    • HTML: http://bit.ly/3olTbrL​
    • CSS: http://bit.ly/3sWvABq​
    • JS: http://bit.ly/2MtUI1u​
    • NodeJS: http://bit.ly/3iOeiC3​
    • ExpressJS: http://bit.ly/2NGoUYd​
    • ReactJS: http://bit.ly/3ok67yf​

    Ngoài ra nếu bạn muốn học hiệu quả hơn, có kinh nghiệm đi làm ngay thì nên học tập tại:

    • Học OFF (2 - 4 tháng): https://Nodemy.vn​
    Được đưa vào làm dự án, giảng viên hỗ trợ 1-1, trực tiếp hướng dẫn làm task. Đầu ra cam kết việc làm có lương ngay.

    • Học ONLINE: https://class.nodemy.vn/​
    Video call, giải đáp trực tiếp, hỗ trợ 1-1, teamview review sửa code. Hướng dẫn code dự án thực tế.

    ❓Tại sao mình nói học OFF hoặc ONLINE qua https://class.nodemy.vn/​ lại hiệu quả hơn ?
    Vì khi bạn tham gia các chương trình đào tạo trên, bạn sẽ được giảng viên hỗ trợ trực tiếp. Đó là cách bạn lên kinh nghiệm nhanh nhất, học từ người đi trước.
    Có người hướng dẫn bạn sẽ học tập trung kiến thức trọng tâm, kiến thức chuyên sâu, tránh sai lầm khi code. Những điều đó thôi cũng giúp bạn rút ngắn gần 1 năm so với tự học lập trình.

    ✪ Để học tập ONLINE qua youtube hiệu quả :
    ⚠️⚠️ ⚠️ Các bạn không nên quá phụ thuộc vào video. Video chỉ giúp các bạn hiểu kiến thức, để vận dụng thành thạo các bạn cần luyện tập nhiều và làm dự án thực tế, cần 1 người đi trước chỉ dẫn.
    ⭐ Nên tự code lại kiến thức đã học (tắt video đi code lại),
    ⭐ Làm bài tập cần pause video, tự nghĩ và làm bài tập trước, rồi mới xem đáp án
    ⭐ Xem hiểu hết video không có nghĩa là bạn đã biết code. Vì vậy các bạn đừng vội xem nhanh và nhiều video trong 1 ngày. Các bạn có thể thực hiện theo công thức bên dưới:
    1. Xem video, khoảng 5 - 10 phút thì dừng lại để luyện tập
    2. Tóm tắt những kiến thức trong 5-10 phút vừa xem theo cách bạn dễ nhớ
    3. Tắt video, code lại những gì đã học trong video (không được mở video tham khảo, chỉ nhìn vào bản tóm tắt để làm, nếu không nhớ thì google search)
    4. Tự lấy thêm ví dụ để kiểm chứng xem mình đã hiểu đúng về kiến thức chưa.
    5. Nếu tự code được bằng chính khả năng của mình thì tiếp tục xem tiếp video.

    ☝️CHÚ Ý: Thường các video có dài hơn 30 phút đến 1 tiếng thì vẫn phải áp dụng 5 bước trên, mỗi lần xem video chỉ 10 phút rồi phải thực hành lại ngay.
    ❓ Nếu có bất kì thắc mắc nào về bài giảng có thể để lại comment, mình sẽ trả lời sớm nhất cho các bạn. Mọi người có thể cùng nhau học lập trình, tham gia group bên dưới:

    Nodemy là một startup trường học công nghệ đào tạo chuyên sâu về Nodejs - Javascript, được nhóm admin NodeJs Việt Nam - cộng đồng Js lớn nhất Việt Nam thành lập.

    ✪ Follow Me :
    • Fanpage: https://www.facebook.com/nodemy.vn​
    • Website: https://www.edmforyou95.com​
    •Group học tập: https://www.facebook.com/groups/nodemy​
    •Website: https://nodemy.vn​

    ✪ Cộng đồng:
    • Nodejs Việt Nam: https://www.facebook.com/groups/congd...​
    • Diễn đàn: http://nodejs.vn​
    • Fanpage Nodejs Việt Nam: https://www.facebook.com/nodejs.vn​

    ✪ Các bạn có thể liên hệ trực tiếp với mình qua:
    📞 08 666 33 805
    🙋‍♂: https://www.facebook.com/nam.nodemy​

    Nodemy javascript javascript_căn_bản

JavaScript forEach là cái quái gì?

  • Tác giả: completejavascript.com
  • Đánh giá: 4 ⭐ ( 9058 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong JavaScript, để duyệt array thì forEach là một hàm rất hay. Vậy hàm forEach trong JavaScript là như thế nào và cách sử dụng forEach JavaScript ra sao?

Từ khóa Void trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 5331 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Từ khóa Void 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.

Javascript là gì? Những điều cơ bản nhất về Javascript

  • Tác giả: arena.fpt.edu.vn
  • Đánh giá: 4 ⭐ ( 9276 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn chưa biết thì Javascript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Hãy cùng FPT Arena tìm hiểu chi tiết về Javascript nhé

Từ khoá “this” trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 2809 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đây không phải một chủ đề xa lạ gì trong lập trình hướng đối tượng, tuy nhiên việc có thể sử dụng mượt mà this không phải là việc dễ dàng với những bạn

Từ Khóa this Trong JavaScript

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 4786 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong định nghĩa của một hàm, **this** chỉ tới “**chủ**” của hàm đó.

Sử dụng từ khóa let trong Javascript

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 6183 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng từ khóa cho phép JavaScript để khai báo các biến trong phạm vi khối.

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  Nút HTML onclick - Hướng dẫn Sự kiện Nhấp chuột JavaScript - thêm trình xử lý nhấp chuột vào nút javascript

By ads_php