У цьому посібнику ви дізнаєтесь про JavaScript-ключове слово за допомогою прикладів.
У JavaScript thisключове слово відноситься до об’єкта, де воно викликається.
1. це Внутрішній глобальний обсяг
Коли thisвикористовується окремо, thisпосилається на глобальний об'єкт ( windowоб'єкт у браузерах). Наприклад,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Тут this.nameте саме, що window.name.
2. ця внутрішня функція
Коли thisвикористовується у функції, thisпосилається на глобальний об'єкт ( windowоб'єкт у браузерах). Наприклад,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. ця функція конструктора всередині
У JavaScript функції конструктора використовуються для створення об'єктів. Коли функція використовується як функція конструктора, thisпосилається на об'єкт, всередині якого вона використовується. Наприклад,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Вихідні дані
Людина (ім'я: "Джек") Джек
Тут thisпосилається на об'єкт person1. Ось чому, person1.nameдає нам Джек.
Примітка : Коли thisвикористовується з класами ES6, він посилається на об'єкт, всередині якого він використовується (подібно до функцій конструктора).
4. цей метод Inside Object
Коли thisвикористовується всередині методу об'єкта, thisпосилається на об'єкт, в якому він знаходиться. Наприклад,
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();
Вихідні дані
(ім'я: "Джек", вік: 25, привітання: ƒ) Джек
У наведеному прикладі thisпосилається на personоб'єкт.
5. ця внутрішня внутрішня функція
Коли ви отримуєте доступ thisвсередині внутрішньої функції (усередині методу), thisпосилається на глобальний об'єкт. Наприклад,
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();
Вихідні дані
(ім'я: "Джек", вік: 25, привітання: ƒ) 25 Вікно (…) не визначено
Тут thisвсередині innerFunc()посилається на глобальний об'єкт, оскільки innerFunc()знаходиться всередині методу.
Однак this.ageзовні innerFunc()відноситься до personоб'єкта.
6. ця функція Inside Arrow
Усередині функції стрілки, thisпосилається на батьківську область. Наприклад,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Функції стрілок не мають своїх this. Коли ви використовуєте thisвсередині функції стрілки, thisпосилається на її батьківський об'єкт області. Наприклад,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Тут this.nameусередині hi()функція посилається на greetоб'єкт.
Ви також можете використовувати функцію стрілки, щоб вирішити проблему наявності undefinedпри використанні функції всередині методу (як показано в прикладі 5). Наприклад,
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();
Вихідні дані
(ім'я: "Джек", вік: 25, вітати: ƒ) 25 (ім'я: "Джек", вік: 25, вітати: ƒ) 25
Тут innerFunc()визначається за допомогою функції стрілки. Це береться thisз батьківського обсягу. Отже, this.ageдає 25 .
Коли функція стрілки використовується з this, вона відноситься до зовнішньої області дії.
7. ця внутрішня функція зі строгим режимом
Коли thisвикористовується у функції зі строгим режимом, thisє undefined. Наприклад,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Примітка : При використанні thisвсередині функції зі строгим режимом ви можете використовувати виклик функції JavaScript ().
Наприклад,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Коли ви проходите thisз call()функцією, greet()розглядаються як метод в thisоб'єкті (глобальний об'єкт в даному випадку).
