В этом руководстве вы узнаете о ключевом слове this в JavaScript с помощью примеров.
В JavaScript thisключевое слово относится к объекту, из которого оно вызвано.
1. этот Inside Global Scope
Когда 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. Этот метод внутреннего объекта
Когда 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 Окно (…) undefined
Здесь thisinside innerFunc()относится к глобальному объекту, поскольку innerFunc()находится внутри метода.
Однако this.ageснаружи innerFunc()относится к personобъекту.
6. Эта функция внутренней стрелки
Внутри стрелочной функции 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объекта (в данном случае глобальный объект).
