Dans ce code, vid est initialisé à l'intérieur de la fonction, alors comment peut-il être utilisé en dehors de la fonction (c'est-à-dire comment vid.play() pourrait savoir que vid est initialisé en utilisant 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();
}
2
KARAN GUPTA 29 mai 2020 à 10:24

4 réponses

Vous devez faire la distinction entre les déclarations de variables et les affectations de variables (ou l'initialisation pour utiliser vos mots). Parfois, les deux actions sont effectuées en même temps (let vid = 'value';) mais ce n'est pas obligatoire.

En Javascript, une variable peut être utilisée tant qu'elle a été déclarée. Sa valeur sera alors undefined.

Pour la portée de votre variable, elle peut être vue par vos deux fonctions car elle est déclarée à l'extérieur de celle-ci, regardez le deuxième extrait, si elle aurait été déclarée dans la fonction init, elle ne serait accessible que par et non visible à l’extérieur.

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
0
Kaddath 29 mai 2020 à 07:50

Il ne peut pas, il regardera simplement la variable let vid;. Vous avez 2 scénarios possibles ici.

  1. init() est appelé avant playVideo():

Au moment où vid.play() est appelé, votre variable vid contient votre vidéo comme init l'a initialisé.


  1. playVideo() est appelé avant init():

Au moment où vid.play() est appelé, votre variable vid sera undefined et lancera donc une erreur.

1
Luze 29 mai 2020 à 07:28

Vous avez correctement identifié qu'il s'agit d'une question de "portée variable". J'ai ajouté quelques commentaires à votre code dans l'espoir qu'il clarifie les choses.

Je vous suggère de regarder dans: 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();
}
2
Chase 29 mai 2020 à 07:29

Vérifiez la valeur de vid comme ceci

if (vid) {
 vid.play();
} else {
  alert('Video not initialized')
}
0
kiranvj 29 mai 2020 à 07:28