Hoisting sa JavaScript

Ang pagitatago (Hoisting) ay ang default na pagkilos ng JavaScript na inililipat ang mga pagdeklara sa itaas.

Ang mga pagdeklara ng JavaScript ay itinatago

Sa JavaScript, maaaring idedeklara ang variable pagkatapos itong gamitin.

Sa ibang salita, maaaring gamitin ito bago ang pagdeklara ng variable.

Halimbawa 1 AtHalimbawa 2 ang resulta ay magkapareho:

Halimbawa 1

x = 5; // Ilagay ang 5 sa x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // Ipakita ang x sa elemento
var x; // Pagdeklara ng x

亲自试一试

Halimbawa 2

var x; // Pagdeklara ng x
x = 5; // Ilagay ang 5 sa x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // Ipakita ang x sa elemento

亲自试一试

Para maunawaan ito, dapat mong maunawaan ang termino na "hoisting".

Ang Hoisting ay ang default na pagkilos ng JavaScript na inililipat ang lahat ng mga pagdeklara sa itaas ng kasalukuyang sakop (inaasang sa itaas ng kasalukuyang script o kasalukuyang function).

Mga keyword na let at const

Gamit let O const Ang mga variable at constant na idiniklarang ito ay hindi itinatago!

Mangyaring magpasok sa JS Let / Const Basa dito para sa karagdagang kaalaman tungkol sa let at const.

Ang paginilagay ng halaga ng JavaScript ay hindi itinatago

Ang JavaScript ay itinatago lamang ang pagdeklara, hindi ang paginilagay ng halaga.

Halimbawa 1 AtHalimbawa 2 ang resulta ay hindi magkapareho:

Halimbawa 1

var x = 5; // 初始化 x
var y = 7; // Paginilagay ng halaga sa y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

亲自试一试

Halimbawa 2

var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y
var y = 7; // Paginilagay ng halaga sa y

亲自试一试

Maaring maipaliwanag ang y sa huling halimbawa na hindi pa tinatayang walang kahulugan?

Ito ay dahil lamang ang pagdeklara (var y) ang itinatago sa itaas, hindi ang paginilagay ng halaga (=7).

由于 hoisting，y 在其被使用前已经被声明，但是由于未对初始化进行提升，y 的值仍是未定义。

例子 2 也一样：

实例

var x = 5; // 初始化 x
var y;     // 声明 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y
y = 7;    // 把 7 赋值给 y

亲自试一试

在顶部声明您的变量！

Hoisting（对很多开发者来说）是 JavaScript 的一种未知的或被忽视的行为。

如果开发者不理解 hoisting，程序也许会包含 bug（错误）。

为了避免 bug，请始终在每个作用域的开头声明所有变量。

由于这就是 JavaScript 解释代码的方式，请保持这个好习惯。

严格模式中的 JavaScript 不允许在未被声明的情况下使用变量。

请在下一章学习“use strict。