В този урок ще научите за 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. този метод за вътрешен обект
Когато 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();
Изход
(име: "Jack", възраст: 25, поздрав: ƒ) 25 прозорец (…) недефиниран
Тук thisотвътре се 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обекта (в този случай глобален обект).
