ինչ է Hoisting ը JavaScript-ում

այսպիսով javascript engine ը ունի առաջին հայացքից մի փոքր տարօրինակ բայց հետաքրքիր վարքագիծ այն փոփոխակաները class-ները function-ները բարձրացնում է տվիալ scop-ի ամենավերևը դա տեղի է ունենում compilation ի փուլում և կոչվում է hoisting այն օգտակար է բայց եթե չգիտես ինչպես է աշխատում կարող խնդիրներ առաջացնել

Function Hoisting

function printHello() {
  console.log("hello")
}

printHello()
// hello

Այստեղ մենք հայտարարում ենք printHello ֆունկցիան և անմիջապես հետո կանչում այդ ֆունկցիան: Սխալներ չկան ամեն ինչ աշխատում է!

Այժմ նայեք այս օրինակին.

printHello()
// hello

function printHello() {
  console.log("hello")
}

հմմ Այստեղ մենք կանչում ենք printHello ֆունկցիան նախքան այն հայտարարելը: Եվ ամեն ինչ դեռ աշխատում է առանց սխալների: Ի՞նչ է տեղի ունեցել այստեղ։ hoisting .

Նախքան interpreter-ը կկատարի կոդը, այն նախ բարձրացնում է հայտարարված ֆունկցիաները scop-ի ամենավերևը(այն scop-ի որում ֆունկցիան հայտարարված է)։ hoistion-ի միջոցով ֆունկցիան հասանելի է դառնում նույնիսկ նախքան հայտարարելը։

Տեսնենք մեկ այլ օրինակ.

printHello()
// hello

printWorld()
// ReferenceError: printWorld is not defined

function printHello() {
  console.log('hello')

  function printWorld() {
    console.log("world")
  }
}

Ինչպես տեսնում եք այստեղ, մենք հայտարարում ենք printHello ֆունկցիան. որը տպում է 'hello' այնուհետև հայտարարում ենք մեկ այլ ֆունկցիա, որը կոչվում է printWorld, որը տպում է 'world' , երբ կանչվում է:

Նախքան printHello ֆուկցիան հայտարարելը, մենք փորձում ենք կանչել այն՝ printHello(). և Այն հասանելի է (ի շնորհիվ hoisting ի այն բարձրացել է global scop ի ամենավերևը), ուստի մենք «hello» ենք տեսնում console-ում:

Բայց հետո մենք կանչում ենք printWorld-ը, և ստանում ենք ReferenceError. printWorld-ը սահմանված չէ : Արդյո՞ք hoisting ը տեղի չի ունենում printWorld ի դեպքում:

hoisting ը աշխատում է, բայց այն "բարձրացնում է" միայն այն scop ի վերին մաս, որտեղ հայտարարվել է ֆունկցիան տվիալ դեպքում printHello ֆունկցիայի սքոփի վերևը: Հետևաբար, այն հասանելի կլինի միայն այդ ֆունկցիայում: Եկեք թարմացնենք մեր կոդը.

printHello()
// hello

function printHello() {
  printWorld()
  // world

  console.log('hello')

  function printWorld() {
    console.log("world")
  }
}

Այժմ մենք կանչում ենք printWorld ֆունկցիան printHello ֆունկցիայի վերևում, բայց նախքան printWorld ը հայտարարելը և այն աշխատում է Քանի որ hoisting ը ֆունկցիան բարձրացնում է local scop ի վերևը, և մենք կարող ենք մուտք գործել այն նախքան հայտարարելը

hoisting-ը այս ամենը հնարավոր է դարձնում function declaration-ների համար: Բայց, հարկ է նաև նշել, որ այն չի աշխատի function expression-ների դեպքում: դրա մասին կգրեմ մեկ այլ անգամ

Հիմա եկեք նայենք փոփոխականների hoisting ը:

Variable Hoisting

Դուք կարող եք փոփոխականներ հայտարարել JavaScript-ում var, let, և const keyword-ներով: Եվ այս փոփոխականները կենթարկվեն hoisting-ի, բայց այլ կերպ: Սկսենք var-ից.

var

Նայեք այս օրինակին.

console.log(name)
// undefined

var name = "Dav"

Այստեղ մենք հայտարարում ենք name անունով փոփոխական, որի արժեքը «dav» է: Բայց երբ մենք փորձում ենք մուտք գործել փոփոխական նախքան այն հայտարարելը ոչ մի սխալ չենք ստանում: hoisting է տեղի ունեցել. name փոփոխականը "բարձրացվել է" ուստի թարգմանիչը «գիտի», որ կա փոփոխական, որը կոչվում է name: Եթե ​​թարգմանիչը չիմանար, դուք կստանաք անունը սահմանված չէ : Եկեք փորձենք.

console.log(name)
// ReferenceError: name is not defined

var myName = "Dav"

Մենք ունենք փոփոխական, որը կոչվում է, myName (ոչ թե name): և ստանում ենք «անունը սահմանված չէ» սխալ, երբ փորձում ենք
վերցնել name-ի արժեքը: Թարգմանիչը «չգիտի» այս փոփոխականի մասին։

Վերադառնալով վերը նշված մեր օրինակին.

console.log(name)
// undefined

var name = "Dav"

Թեև hoisting ը տեղի է ունեցել այստեղ, բայց nameո ի արժեքը որոշված ​​չէ, երբ մենք մուտք ենք գործում այն ​​նախքան հայտարարելը: եթե փոփոխականը հայտարարված է var ով հայտարարությունը բարձրացվում է, բայց իր default արժեքով` undefined: Փաստացի արժեքը փոխվում է, երբ հայտարարման տողը կատարվում է և այդ տողից հետո փոփոխականին մուտք գործելով՝ մենք ստանում ենք իրական արժեքը.

`
console.log(name)
// undefined

var name = "Dav"

console.log(name)
// Dav
`

Ենթադրենք, name ը հայտարարել ենք ֆունկցիայի մեջ.

`
print()

console.log(name)
// ReferenceError: name is not defined

function print() {
var name = "Dav"
}
`

Այստեղ մենք ստանում ենք ReferenceError. անունը սահմանված չէ : Հիշեք, որ փոփոխականները բարձրացվում են, բայց միայն այն scop ի վերին մաս որտեղ նրանք հայտարարվել են: Այս դեպքում, name-ը հայտարարված է print ֆունկցիայում, այնպես որ այն կբարձրացվի այդ local scop-ի վերև: Փորձենք մուտք գործել այն ֆունկցիայում.

`
print()

function print() {
console.log(name)
// undefined

var name = "dav"
}
`

Փորձելով մուտք գործել name ֆունկցիայում, թեև այն գտնվում է հայտարարման տողից վեր, մենք սխալ չենք ստանում: Դա պայմանավորված է նրանով որ name ը բարձրացված է(hoisting), բայց մի մոռացեք, որ իր default արժեքով` undefined:

let

Թեև let փոփոխականները նույնպես ենթարկվում են hoisting ի, նրանք ունեն այլ վարքագիծ: Տեսնենք մի օրինակ.

console.log(name)
// ReferenceError: Cannot access 'name' before initialization

let name = "Dav"

Այստեղ մենք ստանում ենք ReferenceError. Հնարավոր չէ մուտք գործել «name» նախքան հայտարարելը : Նկատո՞ւմ եք, որ սխալն ասում է, որ name ը սահմանված չէ : Դա պայմանավորված է նրանով, որ թարգմանիչը «տեղյակ է» name փոփոխականի մասին, քանի որ փոփոխականը ենթարկվել է hoisting ի:

«Cannot access 'name' before initialization» տեղի է ունենում, քանի որ հայտարարված let փոփոխականները չունեն default արժեք, երբ ենթարկվում է hoisting-ի(բարձրացվում է): Ինչպես տեսանք var, փոփոխականներն ունեն default արժեք՝ undefined մինչդեռ let, փոփոխականները չեն 'սկզբնավորվում':

Փոփոխականները բարձրացվում են այն scop ի վերին մաս, որտեղ նրանք հայտարարված են (local կամ glbal), բայց հասանելի չեն, քանի որ չեն սկզբնավորվել: Այդ հատվածը կոչվում է Temporal Dead Zone(ժամանակավոր մեռյալ գոտի):

Դրանք կարող են հասանելի լինել միայն հայտարարման տողից հետո.

_const _

const ի դեպքում ամեն ինչ նույն է ինչ let ի դեպքում

console.log(name)
// ReferenceError: Cannot access 'name' before initialization

const name = "Dav"

Class

JavaScript-ի class-ները նույնպես բարձրացվում են(hoisting): Տեսնենք մի օրինակ.

const Dog = new Animal("jeko")
// ReferenceError: Cannot access 'Animal' before initialization

class Animal {
  constructor(name) {
    this.name = name
  }
}

Այստեղ մենք հայտարարում ենք class, որը կոչվում է Animal. Մենք փորձում ենք մուտք գործել այս class (ստեղծելով Dog օբյեկտ) նախքան այն հայտարարելը: Մենք ստանում . ReferenceError հնարավոր չէ մուտք գործել «Animal» նախքան սկզբնավորումը : Ի՞նչ է ձեզ հիշեցնում այս սխալը:

Ճիշտ այնպես, ինչպես let և constփոփոխականների դեպքում, class ները բարձրացվում են այն scop ի վերևում, որտեղ նրանք սահմանվել են, բայց անհասանելի են այնքան ժամանակ, քանի դեռ չեն սկզբնավորվել:

Եկեք թարմացնենք կոդը.

class Animal {
  constructor(name) {
    this.name = name
  }
}

const Dog = new Animal("jeko")

console.log(Dog)
// { name: 'jeko' }

Animal ը հայտարարելուց հետո այն դառնում է հասանելի, այնպես որ մենք կարող ենք ստեղծել Dog առանց սխալների:

և այսպես երբեմն կտեսնեք այսպիսի կոդ

՝՝՝
function1()
function2()
function3()

// lines of code
// lines of code

function function1() {...}
function function2() {...}
function function3() {...}
՝՝՝

այստեղ ֆունկցաները իրենց տրամաբանությամբ հայտարարված են ներգևում բայց օգտագործվում կոդի մեջ ավելի վերև այն աշխատում է ի շնորհիվ hoisting ի իսկ փոփոխականների և class ների դեպքում ամեն ինչ այլ է