не может понять объем переменной в этом коде

Question

В этом коде vid инициализируется внутри функции, поэтому как его можно использовать вне функции (т.е. как vid.play() может знать, что vid инициализируется с помощью vid = document.querySelector("#myPlayer")).

window.onload = init;

let vid;
function init() {
  console.log('page loaded, DOM is ready');
  vid = document.querySelector('#myPlayer');
  vid.ontimeupdate = displayTimeWhileVideoIsPlaying();
}

function playVideo() {
  vid.play();
}

Answer 1

Вы правильно определили, что это вопрос «объема переменной». Я добавил несколько комментариев к вашему коду в надежде, что он прояснит ситуацию.

Предлагаю вам изучить: https://www.digitalocean.com/community/tutorials/understanding-variables-scope-hoisting-in-javascript

// This variable is defined globally. It does not yet have a value, but it is available to everyone at this root level or deeper. All share a reference to the same variable.
let vid;

function init() {
    console.log("Page loaded, DOM is ready!"); 

    // This function must run FIRST so we assign the value found here
    // but we store it in a variable defined at the root/global scope
    // so we are changing a variable that is defined outside this function
    vid = document.querySelector("#myPlayer");

    vid.ontimeupdate = displayTimeWhileVideoIsPlaying;
}

function playVideo() {
    // This will throw an error if the above function does not run first
    // Until that runs vid is `undefined`.
    // But since the variable that is defined is at the global scope this
    // function is able to read the same value that the above function writes.
    vid.play();
}

Answer 2

Не может, он просто посмотрит на переменную let vid;. У вас есть 2 возможных сценария.

1. init() вызывается до playVideo():

Во время вызова vid.play() ваша переменная vid содержит ваше видео как init инициализировало его.

---

playVideo() вызывается перед init():

Во время вызова vid.play() ваша переменная vid будет undefined и, таким образом, выдаст ошибку.

Answer 3

Вы должны различать guish объявления переменных и изменения переменных (или инициализацию для использования ваших слов). Иногда оба действия выполняются одновременно (let vid = 'value';), но это не обязательно.

В Javascript переменную можно использовать до тех пор, пока она была объявлена. Тогда его значение будет undefined.

Что касается области видимости вашей переменной, она может быть видна обеими вашими функциями, потому что она объявлена ​​вне ее, посмотрите на второй фрагмент, если бы он был объявленный внутри функции init, он будет доступен только для нее и не будет виден за ее пределами.

let vid;

function test(){
    console.log(vid); //declared and not initialized
}

function test2(){
    console.log(vid2); //not declared (and not initialized)
}

test(); //undefined value (no error)
test2(); //error: not declared

function init(){
    let vid;
}
function test3(){
    init();
    console.log(vid); //declared in another scope
}

test3(); //error: not declared

Answer 4

Проверьте значение vid вот так

if (vid) {
 vid.play();
} else {
  alert('Video not initialized')
}