Параметр this функции JavaScript
У функций есть неявный параметр this. Данный параметр ссылается на объекты, в зависимости от метода определения и
вызова функции.
При вызове функции в документе html
Параметр this ссылается на объект window.
В строгом режиме 'use strict' это будет undefined.
(function(){
console.log(this.document.body)//свойство body объекта window
})()
//присвоение свойству объекта window строки !!!!THIS IS A WINDOW!!!!
window.THW='!!!!THIS IS A WINDOW!!!!'
function jj(){
return this.THW //вернет свойство THW объекта window - window.THW
}
console.log(jj())//выведет !!!!THIS IS A WINDOW!!!!
При вызове функции как метода объекта
В методе объекта, this ссылается на этот объект.
function th() {return this}//TH
let obj = {hello:'hello',//свойство объекта
nh(){return 'this'},//сокращенная запись метода объекта
th:th//присвоение внешней функции th свойству объекта th
}
//внешнее создание метода mf объекта obj
obj.mf=function(){console.log(this.hello, this.nh())}
obj.mf()//hello this
//Вызовы this.hello, this.nh()) ссылаются на объект obj
//если obj равен ссылке на самого себя выведет TRUE
if(obj===obj.th()){console.log('TRUE')}//TRUE
При вызове функции-конструктора
Функция конструктор не отличается от обычной функции, на ее основе создается объект при помощи ключевого слова new, который будет содержать все свойства и методы функции присвоенные параметру this. Если планируется использовать функцию как функцию-конструктор, то её имя принято начинать с прописной буквы.
Функции-конструктору передается пустой объект в параметре this, который принимает свойства и методы этой функции.
Функция-конструктор всегда возвращает объект в качестве значения операции new (не вернет значение return если это значение не объект).
return возвращает любое значение при вызове данной функции как функции.
Все параметры this методов и внутренние (включая нестрелочных) функции этих методов содержат ссылку на экземпляр объекта.
window.s='Объект window'//назначение свойства объекта window
function X(){
this.s='Вызов обычной функции - Объект window' //переназначение свойства объекта window
return this.s
}
console.log(window.s, 'HELLO') //до вызова функции: Объект window
console.log(X())//вызов функции X как функции: Вызов обычной функции - Объект window
console.log(window.s, 'HELLO') //после вызова функции: Вызов обычной функции - Объект window
let j = new X() //Создание пустого объекта, который передается конструктору в качестве параметра this
j.s='Это свойство объекта j'
console.log(j.s)//здесь s уже локальное свойство объекта j: Это свойство объекта j
// j - объект, а не функция, поэтому не может быть вызван как j() и что-то вернуть
При возврате объекта функция-конструктор возвращает данный объект, но не вернет любое другое значение.
let go = {//создан объект go
d:'возвращает объект'
}
function SA(){
//не будет присвоено т к пустой объект замещается глобальным объектом и его свойствами go - this.g = go
this.fff='свойство объекта функции-конструктора'
this.g = go
return this.g
}
let saa = new SA()
console.log(saa.d)//возвращает объект
console.log(saa.fff)// undefined
this и методы функции apply() и call()
Позволяют указывать объект который станет контекстом функции.
Передают два параметра: первый параметр - объект который должен стать контекстом функции,
в случае с apply() второй параметр - массив аргументов,
в случае с apply() второй параметр - список аргументов.
function planets(){
let savePlanets = ''
for(let planet of arguments){
savePlanets+=`${planet} `
}
this.savePlanets=savePlanets //сохранение планет в свойство объекта p1, ставшего контекстом функции
console.log(this.savePlanets)
}
let p1={}//пустой объект hello
let p2={}
planets.apply(p1, ['Mercury','Venus','Earth'])//пустой объект, массив
planets.call(p2, 'Jupiter','Saturn','Uranus','Neptune')//пкстой объект, список
Стрелочная функция и функции-конструктор
Если вызывается метод экземпляра объекта, созданного функцией-конструктором, контекстом параметра this будет этот объект.
function Space(){
this.spaceShip = 'Dragon SpaceX' //Экземпляр объекта Space
this.start=function(){
if(this.spaceShip==='Dragon SpaceX')//Экземпляр объекта Space
{console.log('Dragon SpaceX к запуску готов')}
}
}
new Space().start()
Если метод (содержащий function())> экземпляра объекта функции-конструктора использовать в качестве обработчика события, для объекта HTML элемента,
то параметр this данного метода будет ссылаться на объект HTML элемента, потеряв связь с экземпляром объекта функции-конструктора.
Это происходит потому что this функции (function()) получает аргумент в момент вызова функции.
function Space2(){
this.spaceShip = 'Dragon SpaceX' //this - экземпляр объекта Space
this.start=function(){
if(this.spaceShip==='Dragon SpaceX')//Объект кнопки butStart1
{console.log('Dragon SpaceX стартует в космос')}
else{console.log('Связь отсутствует! Dragon SpaceX не может стартовать в космос!!!')}
}
}
let butStart1 = document.getElementById('b1')//Объект кнопки butStart1
butStart1.addEventListener('click', new Space2().start)//метод .start получает в параметр this объект butStart1 который становится контекстом этого метода
Стрелочная функция наследует значение параметра this от параметра функции this в которой она вызывается.
Стрелочная функция получает значение параметра this в момент создания и ее дальнейшее значение не меняется.
Находясь в литерале объекта this стрелочной функции ссылается на объект window.
function Space3(){
this.spaceShip = 'Dragon SpaceX' //this - экземпляр объекта Space
this.start=()=>{//метод экземпляра объекта - стрелочная функция
if(this.spaceShip==='Dragon SpaceX')//this - экземпляр объекта Space
{console.log('Dragon SpaceX стартует в космос')
document.getElementById('spaceLog').textContent='Dragon SpaceX стартует в космос'
}
else{console.log('Связь отсутствует! Dragon SpaceX не может стартовать в космос!!!')}
}
}
let butStart2 = document.getElementById('b2')//Объект кнопки butStart1
butStart2.addEventListener('click', new Space3().start)//метод .start продолжает хранить в параметре this экземпляр объекта new Space3()