สวัสดี

ในบทความนี้ เราจะพยายามอธิบายถึงค่าต่างๆ ที่เป็นไปได้ของthisคำหลัก โดยขึ้นอยู่กับบริบทที่ใช้ใน JavaScript

ขอบเขตทั่วโลก

ในขอบเขตส่วนกลางthisอ้างอิงถึงวัตถุส่วนกลาง ( windowบนเว็บและglobalใน Node.js)

globalThisนอกจากนี้ยังสามารถใช้เป็นแพลตฟอร์มที่เป็นอิสระในการเข้าถึงวัตถุส่วนกลาง

// global scope (web)

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

ภายในฟังก์ชันที่ไม่ใช่ลูกศร ค่าของthisจะขึ้นอยู่กับวิธีการเรียกฟังก์ชันนั้น

เรียกว่าเป็นฟังก์ชันแบบสแตนด์อโลน

• ในโหมด ไม่เข้มงวดอ้างถึงวัตถุส่วนกลาง: 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)

เมธอดของคลาสทำงานในลักษณะเดียวกับเมธอดในอ็อบเจกต์ลิเทอรัล

ฟังก์ชั่นลูกศร

ภายในฟังก์ชันลูกศร ค่าของthis เท่ากับหนึ่งในบริบทคำศัพท์ที่ล้อมรอบ

กล่าวอีกนัยหนึ่ง เมื่อประเมินฟังก์ชันลูกศร เอ็นจิ้น JS จะไม่สร้างการthisเชื่อมโยงใหม่ แต่ใช้การเชื่อมโยงที่มีอยู่ในขอบเขตโดยรอบ :

// (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)

ตัวสร้างฟังก์ชัน

ภายในฟังก์ชันที่ใช้เป็นตัวสร้าง (ด้วยnewคีย์เวิร์ด) thisจะถูกผูกไว้กับออบเจกต์ใหม่ที่กำลังสร้าง ไม่ว่าจะเข้าถึงฟังก์ชันด้วยวิธีใด:

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)

สมัคร (), โทร ()

สามารถ ใช้เมธอด call()and 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

เมื่อใช้กับฟังก์ชันลูกศรthisพารามิเตอร์จะถูกละเว้น (คุณยังคงสามารถส่งอาร์กิวเมนต์ของฟังก์ชันได้โดยใช้วิธีเหล่านี้):

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

const getThis = () => this;

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

const myThis = {};

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

ฟังก์ชันbind()นี้ใช้เพื่อสร้างฟังก์ชันใหม่ที่เชื่อมโยงกับวัตถุที่กำหนด

ซึ่งหมายความว่าเมื่อมีการเรียกใช้ฟังก์ชันใหม่thisคำหลักจะอ้างถึงออบเจกต์ที่เชื่อมโยงกับ:

function getThis() {
  return this;
}

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

const myThis = {};
const getMyThis = getThis.bind(myThis);

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

เมื่อใช้กับฟังก์ชันลูกศรthisพารามิเตอร์จะถูกละเว้น (คุณยังคงสามารถส่งอาร์กิวเมนต์ของฟังก์ชันได้โดยใช้วิธีเหล่านี้):

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

const getThis = () => this;

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

const myThis = {};
const getMyThis = getThis.bind(myThis);

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