Từ khóa `this` trong JavaScript: Làm chủ Sức mạnh của Phạm vi

Trong JavaScript, từ khóa this tham chiếu đến đối tượng nơi nó được gọi.

1. this Trong Phạm vi Toàn cục

Khi sử dụng this một mình, this tham chiếu đến đối tượng toàn cục (đối tượng window trong trình duyệt). Ví dụ,

let a = this;
console.log(a);  // Window {}

this.name = 'Sarah';
console.log(window.name); // Sarah

Run Code

Ở đây, this.name tương tự như window.name.

2. this Trong Hàm

Khi sử dụng this trong một hàm, this tham chiếu đến đối tượng toàn cục (đối tượng window trong trình duyệt). Ví dụ,

function greet() {

    // this inside function
    // this refers to the global object
    console.log(this);
}

greet(); // Window {}

Run Code

3. this Trong Hàm Khởi tạo (Constructor)

Trong JavaScript, hàm khởi tạo (constructor) được sử dụng để tạo đối tượng. Khi một hàm được sử dụng như một hàm khởi tạo, this tham chiếu đến đối tượng mà nó được sử dụng bên trong. Ví dụ,

function Person() {

    this.name = 'Jack';
    console.log(this);

}

let person1 = new Person();
console.log(person1.name);

Run Code

Kết quả

Person {name: "Jack"}
Jack

Ở đây, this tham chiếu đến đối tượng person1. Đó là lý do tại sao, person1.name cho chúng ta kết quả là Jack.

Lưu ý : Khi this được sử dụng với các lớp ES6, nó tham chiếu đến đối tượng mà nó được sử dụng bên trong (tương tự như hàm khởi tạo).

4. this Trong Phương thức Đối tượng

Khi this được sử dụng bên trong phương thức của một đối tượng, this tham chiếu đến đối tượng mà nó nằm trong. Ví dụ,

const person = {
    name : 'Jack',
    age: 25,

    // this inside method
    // this refers to the object itself
    greet() {
        console.log(this);
        console.log(this.name);
    }
}

person.greet();

Run Code

Kết quả

{name: "Jack", age: 25, greet: ƒ}
Jack

Trong ví dụ trên, this tham chiếu đến đối tượng person.

5. this Trong Hàm Nội bộ (Inner Function)

Khi bạn truy cập this bên trong một hàm nội bộ (bên trong một phương thức), this tham chiếu đến đối tượng toàn cục. Ví dụ,

const person = {
    name : 'Jack',
    age: 25,

    // this inside method
    // this refers to the object itself
    greet() {
        console.log(this);        // {name: "Jack", age ...}
        console.log(this.age);  // 25

        // inner function
        function innerFunc() {

            // this refers to the global object
            console.log(this);       // Window { ... }
            console.log(this.age);    // undefined

        }

        innerFunc();

    }
}

person.greet();

Run Code

Kết quả

{name: "Jack", age: 25, greet: ƒ}
25
Window { …}
undefined

Tại đây, this bên trong innerFunc() tham chiếu đến đối tượng toàn cầu vì innerFunc() nằm bên trong một phương thức.

Tuy nhiên, this.age bên ngoài innerFunc() tham chiếu đến đối tượng person.

6. this Trong Arrow Function

Bên trong hàm mũi tên (arrow function), this tham chiếu đến phạm vi cha. Ví dụ,

const greet = () => {
    console.log(this);
}
greet(); // Window {...}

Run Code

Arrow functions không có this riêng của họ. Khi bạn sử dụng this bên trong hàm mũi tên, this tham chiếu đến đối tượng phạm vi cha của nó. Ví dụ,

const greet = {
    name: 'Jack',

    // method
    sayHi () {
        let hi = () => console.log(this.name);
        hi();
    }
}

greet.sayHi(); // Jack

Run Code

Tại đây, this.name bên trong hàm hi() tham chiếu đến đối tượng greet.

Bạn cũng có thể sử dụng hàm mũi tên để giải quyết vấn đề của việc có giá trị undefined khi sử dụng hàm bên trong một phương thức (như đã thấy trong Ví dụ 5). Ví dụ,

const person = {
    name : 'Jack',
    age: 25,

    // this inside method
    // this refers to the object itself
    greet() {
        console.log(this);
        console.log(this.age);

        // inner function
        let innerFunc = () => {

            // this refers to the global object
            console.log(this);
            console.log(this.age);

        }

        innerFunc();

    }
}

person.greet();

Run Code

Kết quả

{name: "Jack", age: 25, greet: ƒ}
25
{name: "Jack", age: 25, greet: ƒ}
25

Tại đây, innerFunc() được định nghĩa bằng hàm mũi tên. Nó lấy this từ phạm vi cha của nó. Do đó, this.age trả về 25.

Khi sử dụng hàm mũi tên với this, nó tham chiếu đến phạm vi bên ngoài.

7. this Trong Hàm với Chế Độ Nghiêm Ngặt

Khi sử dụng this trong một hàm với chế độ nghiêm ngặt, this là undefined. Ví dụ,

'use strict';
this.name = 'Jack';
function greet() {

    // this refers to undefined
    console.log(this);
}
greet(); // undefined

Run Code

Ghi chú: Khi sử dụng this bên trong một hàm với chế độ nghiêm ngặt, bạn có thể sử dụng hàm JavaScript call().

Ví dụ,

'use strict';
this.name = 'Jack';

function greet() {
    console.log(this.name);
}

greet.call(this); // Jack

Run Code

Khi bạn truyền this với hàm call(), greet() được xem như là phương thức của đối tượng this (trong trường hợp này là đối tượng toàn cầu).

• Bài viết trên blog này ban đầu được xuất bản tại:https://www.programiz.com/