THÔNG DỤNG
OOP
ES6
ES(X)
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Hiểu rõ về this trong Javascript qua các ví dụ thực hành

Trong bài này chúng ta sẽ tìm hiểu về đối tượng this trong Javascript, qua đó sẽ giúp bạn hiểu rõ this trong js là gì và cách dùng this như thế nào.

Khi làm việc với Javascript Object thì bạn sẽ gặp rất nhiều đoạn code có sử dụng từ khóa this. Nếu bạn đã từng học lập trình hướng đối tượng thì không còn xa lạ gì với từ khóa này. This được hiểu là đối tượng hiện tại, nơi mà phạm vi của dòng code đó đang đứng.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Nói thì khó hiểu, vì vậy hãy bắt đầu tìm hiểu thông qua những ví dụ và các trường hợp cụ thể nhé.

1. This trong Javascript là gì?

Trong lập trình hướng đối tượng thì this là một từ khóa dùng để trỏ đến đối tượng hiện tại, qua đó ta có thể truy cập đến những phương thức và thuộc tính trong đối tượng đó. Điều kiện là bạn sẽ phải đặt this trong phạm vi chương trình của đối tượng.

Nhưng this trong javascript thì khác, bạn có thể đặt this ngay cấp ngoài cùng của chương trình, vì cấp bật của BOM thì đối tượng cao nhất chính là đối tượng Windows.

Ví dụ: Các bạn hãy mở trình duyệt lên và chạy đoạn code sau:

console.log(this);

Kết quả trả về chính là đối tượng windows trong Javascript.

windows javascript JPG

Nói cách khác, khi bạn sử dụng this ở cấp ngoài cùng của chương trình thì nó chính là đối tượng window, vì vậy bạn có thể sử dụng nó thay thế cho windows object. Ví dụ như hai đoạn code dưới đây là tương đương.

https://freetuts.net/editor.html?id=1567
this.location.href;
window.location.href

Đây chỉ là một trường hợp đơn giản. Bây giờ chúng ta sẽ tìm hiểu một số trường hợp khác nhé.

2. Sử dụng this trong javascript function

Theo quy tắc thì từ khóa this khi đặt trong một function thì nó phải trỏ đến function đó. Tuy nhiên, thực tế thì lại có hai trường hợp xảy ra như sau:

Trường hợp 1: Nếu không bật chế độ strict mode thì javascript sẽ hiểu this là một biến toàn cục, và cấp cao nhất như mình đã nói ở phần 1 chính là đối tượng window.

function test(){
    console.log(this);
}

test(); // In ra windows object

Chính vì vậy bạn dễ dàng bổ sung các thuộc tính cho đối tượng window:

function test(){
    this.author = "Cường Freetuts.net";
}

test();

console.log(window.author); // Cường Freetuts.net

Trường hợp 2: Nếu bật chế độ strict mode thì từ khóa this trong hàm là một biến chưa được định nghĩa, nên giá trị của nó là undefined.

function test(){
    console.log(this); 
}

test(); // undefined

Vì vậy nếu bạn bạn cố gắng thêm thuộc tính cho this thì sẽ bị lỗi ngay, vì this không phải là một object.

'use strict';
function test(){
    this.author = "Cường Freetuts"; 
}

test(); // Lỗi

Lưu ý: Khi bạn sử dụng hàm như một constructor thì đối tượng this chính là các thể hiện (instance) của hàm.

Ví dụ
function test(){
    console.log(this);
}

let test1 = new test(); // test object
let test2 = new test(); // test object

Chi tiết thì bạn có thể xem ở bài constructor trong javascript.

3. This trong các sự kiện javascript

Khi gán hành động cho các sự kiện javascript thì this chính là đối tượng html đang được gán sự kiện đó.

Ví dụ 1: Khi bạn gán một hành động cho sự kiện click, nếu trong hành động đó có sử dụng từ khóa this thì lúc này this chính là đối tượng html dom mà người dùng đã click.

Demo RUN
// Lấy đối tượng
var button = document.getElementById('btn');

// Gán sự kiện
button.addEventListener("click", function(){
// Lấy thuộc tính type của đối tượng đang xử lý
// chính là button có id="btn"
    alert(this.type);
});

Như vậy, trong ví dụ này this chính là thẻ HTML mà chúng ta đang xử lý, và đó chính là thẻ HTML có id="btn".

Ví dụ 2: Truyền đối tượng this khi gọi sự kiện trong thuộc tính của thẻ html
Demo RUN
<script language="javascript">
    function show_type(obj)
    {
        alert(obj.type);
    }
</script>
<input type="button" onclick="show_type(this)" value="Check" />

Trong ví dụ này chúng ta truyền this ở dạng một tham số nên ở hàm xử lý show_type() tuy ta đặt tên tham số là obj nhưng bản chất nó chính là đối tượng this.

4. Từ khóa this trong javascript object

Javascript object là một tính năng rất quan trọng trong lập trình javascript. Nếu bạn đã từng sử dụng qua các thư viện như Angular, ReactJS thì sẽ thấy hầu như khi làm việc với js chúng ta đều phải thông qua các object.

Ví dụ dưới đây mình đã tạo một object Persion, hai thuộc tính là name age, và hai phương thức tên là showInforsetInfor.

var Person = {
    name : "",
    age : "",
    setInfor : function(){

    },
    showInfor : function(){

    }
};

Trong các phương thức setInforshowInfor mình sẽ sử dụng từ khóa this để lấy các thuộc tính.

var Person = {
    name : "",
    age : "",
    setInfor : function(name, age){
        this.name = name;
        this.age = age;
    },
    showInfor : function(){
        console.log(this.name);
        console.log(this.age);
    }
};

5. Từ khóa this trong class javascript

Giống như object, từ khóa this trong javascript cũng có thể được sử dụng trong các class (ES6). Lúc này thì this chính là instance mà bạn đã tạo ra từ class đó.

Ví dụ
class Person {
    constructor(name) {
        this.name = name;
    }
 
    // Adding a method to the constructor
    showName() {
        console.log(this.name);
    }
}
 
let person1 = new Person("Kinh");
person1.showName(); // Kinh

6. Từ khóa this trong arrow function

Không giống như function bình thường. Arrow function không tồn tại đối tượng this, bởi vậy khi bạn sử dụng thì nó sẽ lấy đối tượng global window.

var showUser = () => {
    console.log(this);
};

showUser();

Kết quả:

this arrow function JPG

Lời kết: Như vậy là mình đã giới thiệu xong một số cách sử dụng từ khóa this trong Javsscript. Qua bài này hy vọng bạn hiểu rõ từ khóa this trong javascript là gì, cũng như cách sử dụng this trong từng trường hợp cụ thể như trên.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top