Hướng dẫn explain this keyword in javascript - giải thích từ khóa này bằng javascript

Thử nó

Cú pháp

Giá trị

Một thuộc tính của bối cảnh thực thi (toàn cầu, chức năng hoặc eval), trong chế độ không đóng cửa, luôn luôn là một tham chiếu đến một đối tượng và trong chế độ nghiêm ngặt có thể là bất kỳ giá trị nào.

Sự mô tả

Bối cảnh toàn cầu

Trong bối cảnh thực thi toàn cầu (ngoài bất kỳ chức năng nào),

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

// In web browsers, the window object is also the global object:
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

Lưu ý: Bạn luôn có thể dễ dàng nhận được đối tượng toàn cầu bằng cách sử dụng thuộc tính toàn cầu ____29, bất kể bối cảnh hiện tại mà mã của bạn đang chạy. You can always easily get the global object using the global

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Chức năng bối cảnh

Bên trong một hàm, giá trị của

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Vì mã sau không ở chế độ nghiêm ngặt và vì giá trị của

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Tuy nhiên, trong chế độ nghiêm ngặt, nếu giá trị của

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Lưu ý: Trong ví dụ thứ hai,

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

Để đặt giá trị của

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return {a: 5};
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return {a: 5};
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError

Bối cảnh lớp

Hành vi của

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Trong một hàm tạo lớp,

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

Lưu ý: Phương pháp tĩnh không phải là thuộc tính của

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Các lớp học có nguồn gốc

Không giống như các hàm tạo lớp cơ sở, các hàm tạo dẫn xuất không có liên kết

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return {a: 5};
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Cảnh báo: Tham khảo

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return {a: 5};
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return {a: 5};
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError

Các lớp dẫn xuất không được quay lại trước khi gọi

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return {a: 5};
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError

// An object can be passed as the first argument to call
// or apply and this will be bound to it.
const obj = { a: 'Custom' };

// Variables declared with var become properties of the global object.
var a = 'Global';

function whatsThis() {
  return this.a;  // The value of this is dependent on how the function is called
}

whatsThis();          // 'Global' as this in the function isn't set, so it defaults to the global/window object in non–strict mode
whatsThis.call(obj);  // 'Custom' as this in the function is set to obj
whatsThis.apply(obj); // 'Custom' as this in the function is set to obj

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return {a: 5};
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError

Ví dụ

Điều này trong bối cảnh chức năng

// An object can be passed as the first argument to call
// or apply and this will be bound to it.
const obj = { a: 'Custom' };

// Variables declared with var become properties of the global object.
var a = 'Global';

function whatsThis() {
  return this.a;  // The value of this is dependent on how the function is called
}

whatsThis();          // 'Global' as this in the function isn't set, so it defaults to the global/window object in non–strict mode
whatsThis.call(obj);  // 'Custom' as this in the function is set to obj
whatsThis.apply(obj); // 'Custom' as this in the function is set to obj

Điều này và chuyển đổi đối tượng

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

Lưu ý rằng trong chế độ không đóng cửa, với

// An object can be passed as the first argument to call
// or apply and this will be bound to it.
const obj = { a: 'Custom' };

// Variables declared with var become properties of the global object.
var a = 'Global';

function whatsThis() {
  return this.a;  // The value of this is dependent on how the function is called
}

whatsThis();          // 'Global' as this in the function isn't set, so it defaults to the global/window object in non–strict mode
whatsThis.call(obj);  // 'Custom' as this in the function is set to obj
whatsThis.apply(obj); // 'Custom' as this in the function is set to obj

// An object can be passed as the first argument to call
// or apply and this will be bound to it.
const obj = { a: 'Custom' };

// Variables declared with var become properties of the global object.
var a = 'Global';

function whatsThis() {
  return this.a;  // The value of this is dependent on how the function is called
}

whatsThis();          // 'Global' as this in the function isn't set, so it defaults to the global/window object in non–strict mode
whatsThis.call(obj);  // 'Custom' as this in the function is set to obj
whatsThis.apply(obj); // 'Custom' as this in the function is set to obj

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

// An object can be passed as the first argument to call
// or apply and this will be bound to it.
const obj = { a: 'Custom' };

// Variables declared with var become properties of the global object.
var a = 'Global';

function whatsThis() {
  return this.a;  // The value of this is dependent on how the function is called
}

whatsThis();          // 'Global' as this in the function isn't set, so it defaults to the global/window object in non–strict mode
whatsThis.call(obj);  // 'Custom' as this in the function is set to obj
whatsThis.apply(obj); // 'Custom' as this in the function is set to obj

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call('foo'); // [object String]
bar.call(undefined); // [object global]

Phương thức BIND ()

Ecmascript 5 đã giới thiệu

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call('foo'); // [object String]
bar.call(undefined); // [object global]

function f() {
  return this.a;
}

const g = f.bind({ a: 'azerty' });
console.log(g()); // azerty

const h = g.bind({ a: 'yoo' }); // bind only works once!
console.log(h()); // azerty

const o = { a: 37, f, g, h };
console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty

Hàm mũi tên

Trong các hàm mũi tên,

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

const globalObject = this;
const foo = (() => this);
console.log(foo() === globalObject); // true

Lưu ý: Nếu

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

// An object can be passed as the first argument to call
// or apply and this will be bound to it.
const obj = { a: 'Custom' };

// Variables declared with var become properties of the global object.
var a = 'Global';

function whatsThis() {
  return this.a;  // The value of this is dependent on how the function is called
}

whatsThis();          // 'Global' as this in the function isn't set, so it defaults to the global/window object in non–strict mode
whatsThis.call(obj);  // 'Custom' as this in the function is set to obj
whatsThis.apply(obj); // 'Custom' as this in the function is set to obj

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call('foo'); // [object String]
bar.call(undefined); // [object global]

// An object can be passed as the first argument to call
// or apply and this will be bound to it.
const obj = { a: 'Custom' };

// Variables declared with var become properties of the global object.
var a = 'Global';

function whatsThis() {
  return this.a;  // The value of this is dependent on how the function is called
}

whatsThis();          // 'Global' as this in the function isn't set, so it defaults to the global/window object in non–strict mode
whatsThis.call(obj);  // 'Custom' as this in the function is set to obj
whatsThis.apply(obj); // 'Custom' as this in the function is set to obj

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call('foo'); // [object String]
bar.call(undefined); // [object global]

// An object can be passed as the first argument to call
// or apply and this will be bound to it.
const obj = { a: 'Custom' };

// Variables declared with var become properties of the global object.
var a = 'Global';

function whatsThis() {
  return this.a;  // The value of this is dependent on how the function is called
}

whatsThis();          // 'Global' as this in the function isn't set, so it defaults to the global/window object in non–strict mode
whatsThis.call(obj);  // 'Custom' as this in the function is set to obj
whatsThis.apply(obj); // 'Custom' as this in the function is set to obj

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

// An object can be passed as the first argument to call
// or apply and this will be bound to it.
const obj = { a: 'Custom' };

// Variables declared with var become properties of the global object.
var a = 'Global';

function whatsThis() {
  return this.a;  // The value of this is dependent on how the function is called
}

whatsThis();          // 'Global' as this in the function isn't set, so it defaults to the global/window object in non–strict mode
whatsThis.call(obj);  // 'Custom' as this in the function is set to obj
whatsThis.apply(obj); // 'Custom' as this in the function is set to obj

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call('foo'); // [object String]
bar.call(undefined); // [object global]

// An object can be passed as the first argument to call
// or apply and this will be bound to it.
const obj = { a: 'Custom' };

// Variables declared with var become properties of the global object.
var a = 'Global';

function whatsThis() {
  return this.a;  // The value of this is dependent on how the function is called
}

whatsThis();          // 'Global' as this in the function isn't set, so it defaults to the global/window object in non–strict mode
whatsThis.call(obj);  // 'Custom' as this in the function is set to obj
whatsThis.apply(obj); // 'Custom' as this in the function is set to obj

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call('foo'); // [object String]
bar.call(undefined); // [object global]

// An object can be passed as the first argument to call
// or apply and this will be bound to it.
const obj = { a: 'Custom' };

// Variables declared with var become properties of the global object.
var a = 'Global';

function whatsThis() {
  return this.a;  // The value of this is dependent on how the function is called
}

whatsThis();          // 'Global' as this in the function isn't set, so it defaults to the global/window object in non–strict mode
whatsThis.call(obj);  // 'Custom' as this in the function is set to obj
whatsThis.apply(obj); // 'Custom' as this in the function is set to obj

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Không có vấn đề gì, ____ 79

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Ở trên, hàm (gọi nó là hàm ẩn danh a) được gán cho

function f() {
  return this.a;
}

const g = f.bind({ a: 'azerty' });
console.log(g()); // azerty

const h = g.bind({ a: 'yoo' }); // bind only works once!
console.log(h()); // azerty

const o = { a: 37, f, g, h };
console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f() {
  return this.a;
}

const g = f.bind({ a: 'azerty' });
console.log(g()); // azerty

const h = g.bind({ a: 'yoo' }); // bind only works once!
console.log(h()); // azerty

const o = { a: 37, f, g, h };
console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f() {
  return this.a;
}

const g = f.bind({ a: 'azerty' });
console.log(g()); // azerty

const h = g.bind({ a: 'yoo' }); // bind only works once!
console.log(h()); // azerty

const o = { a: 37, f, g, h };
console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty

function f() {
  return this.a;
}

const g = f.bind({ a: 'azerty' });
console.log(g()); // azerty

const h = g.bind({ a: 'yoo' }); // bind only works once!
console.log(h()); // azerty

const o = { a: 37, f, g, h };
console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

Như một phương thức đối tượng

Khi một hàm được gọi là phương thức của một đối tượng,

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Trong ví dụ sau, khi

const globalObject = this;
const foo = (() => this);
console.log(foo() === globalObject); // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

const globalObject = this;
const foo = (() => this);
console.log(foo() === globalObject); // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Lưu ý rằng hành vi này hoàn toàn không bị ảnh hưởng bởi cách xác định hoặc ở đâu chức năng. Trong ví dụ trước, chúng tôi đã xác định chức năng nội tuyến là thành viên

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

const globalObject = this;
const foo = (() => this);
console.log(foo() === globalObject); // true

const globalObject = this;
const foo = (() => this);
console.log(foo() === globalObject); // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Điều này chứng tỏ rằng chỉ có vấn đề là chức năng được gọi từ thành viên

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

const globalObject = this;
const foo = (() => this);
console.log(foo() === globalObject); // true

Tương tự, ràng buộc

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

const globalObject = this;
const foo = (() => this);
console.log(foo() === globalObject); // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Điều này trên chuỗi nguyên mẫu của đối tượng

Khái niệm tương tự cũng đúng với các phương thức được xác định ở đâu đó trên chuỗi nguyên mẫu của đối tượng. Nếu phương thức nằm trên chuỗi nguyên mẫu của một đối tượng,

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Trong ví dụ này, đối tượng được gán cho biến

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

const globalObject = this;
const foo = (() => this);
console.log(foo() === globalObject); // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

cái này với một getter hoặc setter

Một lần nữa, khái niệm tương tự cũng đúng khi một hàm được gọi từ một getter hoặc một setter. Một hàm được sử dụng như getter hoặc setter có

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Là một nhà xây dựng

Khi một hàm được sử dụng làm hàm tạo (với từ khóa

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Lưu ý: Mặc dù mặc định cho hàm tạo là trả về đối tượng được tham chiếu bởi

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Trong ví dụ cuối cùng (

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Là một người xử lý sự kiện DOM

Khi một hàm được sử dụng làm trình xử lý sự kiện,

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Trong một người xử lý sự kiện nội tuyến

Khi mã được gọi từ một trình xử lý trực tuyến nội tuyến,

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Cảnh báo trên cho thấy

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Trong trường hợp này,

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Điều này trong các lớp học

Giống như với các chức năng thông thường, giá trị của

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Lưu ý: Các lớp luôn là mã chế độ nghiêm ngặt.Các phương thức gọi với

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Xem thêm