JavaScript: “cái này” là gì?

Dec 13 2022

Xin chào , Trong bài viết này, chúng tôi sẽ cố gắng giải thích các giá trị khác nhau có thể có của từ khóa này tùy thuộc vào ngữ cảnh mà nó được sử dụng trong JavaScript. Phạm vi toàn cầu Trong phạm vi toàn cầu, điều này đề cập đến đối tượng toàn cầu (cửa sổ trên web và toàn cầu trong Node.

Xin chào ,

Trong bài viết này, chúng tôi sẽ cố gắng giải thích các giá trị có thể khác nhau của thistừ khóa tùy thuộc vào ngữ cảnh mà nó được sử dụng trong JavaScript.

Phạm vi toàn cầu

Trong phạm vi toàn cầu, thisđề cập đến đối tượng toàn cầu ( windowtrên web và globaltrong Node.js).

globalThiscũng có thể được sử dụng như một cách độc lập với nền tảng để tiếp cận đối tượng toàn cầu.

// global scope (web)

console.log(this === window); // true
console.log(this === globalThis); // true

Bên trong một hàm không phải mũi tên, giá trị của thiswill phụ thuộc vào cách hàm được gọi.

Được gọi là một chức năng độc lập

Ở chế độ không nghiêm ngặt , đề cập đến đối tượng toàn cầu: this

function getThis() {
  return this;
}

console.log(getThis() === globalThis); // true

"use strict"

function getThis() {
  return this;
}

console.log(getThis() === undefined); // true

const bar = {
  getThis: function() {
    return this;
  }
};

console.log(bar.getThis() === bar); // true

const baz = {};
baz.getThis = bar.getThis;

console.log(baz.getThis() === baz); // true

// Called as a standalone function
const getThis = bar.getThis;
console.log(getThis() === globalThis); // true (`false` in strict mode)

Các phương thức của lớp hoạt động theo cùng một cách so với các phương thức trong nghĩa đen của đối tượng.

chức năng mũi tên

Bên trong một hàm mũi tên, giá trị của this bằng với một trong các ngữ cảnh từ vựng kèm theo .

Nói cách khác, khi đánh giá một arrow function, công cụ JS không tạo một thisliên kết mới mà sử dụng liên kết có sẵn trong phạm vi xung quanh :

// (1) `this` equals to `globalThis` here

const foo = {
  getThis: () => this
};

console.log(foo.getThis() === foo); // false
console.log(foo.getThis() === globalThis); // true (1)
// (1) `this` equals to `globalThis` here

const bar = {
  getArrowFn: function() {
    // (2) `this` equals to `bar` or `baz` here 
    // depending on how the function is called below
    
    return () => this;
  }
};

console.log(bar.getArrowFn()() === bar); // true (2)
console.log(bar.getArrowFn()() === globalThis); // false (1)

const baz = {};
baz.getArrowFn = bar.getArrowFn;

console.log(baz.getArrowFn()() === baz); // true (2)
console.log(baz.getArrowFn()() === globalThis); // false (1)

Hàm tạo chức năng

Bên trong một hàm được sử dụng làm hàm tạo (với newtừ khóa), thisđược liên kết với đối tượng mới đang được tạo, bất kể hàm đó được truy cập bằng cách nào:

function Bar() {
  this.baz = 42;
}

let a = new Bar();
console.log(a.baz); // 42
const bar = {
  baz: function() {
    this.foo = 42;
  }
};

let a = new bar.baz();
console.log(a.foo); // 42
console.log(bar.foo); // undefined

function Bar() {
  this.baz = 42;
  return { baz: 44 };
}

let a = new Bar();
console.log(a.baz); // 44 (not 42)

áp dụng(), gọi()

Các phương thức call()và có thể được sử dụng để đặt rõ ràng giá trị của các hàm không phải mũi tên:apply()this

function getThis() {
  return this;
}

const bar = {
  getThis: function() {
    return this;
  }
};

console.log(getThis() === globalThis); // true
console.log(bar.getThis() === bar); // true

const myThis = {};

console.log(getThis.call(myThis) === myThis); // true
console.log(getThis.apply(myThis) === myThis); // true

console.log(bar.getThis.call(myThis) === myThis); // true
console.log(bar.getThis.apply(myThis) === myThis); // true

Khi được sử dụng trên một hàm mũi tên, thistham số sẽ bị bỏ qua (tuy nhiên, bạn vẫn có thể truyền các đối số của hàm bằng các phương thức này):