为什么函数在全局声明变量时有效，但不能使用 var

我想将属性soundFileName声明为var soundFileName = 'audio/60.wav';，这样soundFileName就不会全局定义，但是当我这样做时，我会得到ReferenceError: soundFileName is not defined.

我将soundFileName的值作为参数传递给loop(soundFileName)，我认为'audio/60.wav'的值应该传递得很好。

我怀疑这与范围或嵌套有关，但我不确定如何解决问题。当我使用没有 var 的soundFileName = 'audio/60.wav';时，代码确实有效。

我错过了什么？谢谢！

编辑：代码现在工作和更新！

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/howler.core.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="timeprobabilities.js"></script>
<script>
///////////////////////////////////////////////////////////////
// MASTER START ///////////////////////////////////////////////
///////////////////////////////////////////////////////////////
// initiates fist call to all clocks to each will start and can then be called again
(function masterStart() {
setTimeout(function() {
//// LOOP SOUNDS \\
A();
}, 0);
}());
///////////////////////////////////////////////////////////////
// LOOPS SHARED OPTIONS ///////////////////////////////////////
///////////////////////////////////////////////////////////////
var options = {
numberOfSounds: 0,
maxNumberOfSounds: 4
};
function logNumberOfSounds() { // passing options into this before is what broke code
options.numberOfSounds++;
//console.log('Number of sounds is: ' + options.numberOfSounds + '########');
}
///////////////////////////////////////////////////////////////
// LOOP A  ////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////
function A() {
var optionsA = {
playDurationMin: 0,
playDurationMax: 60000,
// start time minimum and maximum
startMinA: 0,
startMaxA: 8000,
maxVolumeA: 1,
//
startMinB: 0,
startMaxB: 30000,
maxVolumeB: 1,
//
startMinC: 0,
startMaxC: 30000,
maxVolumeC: 1,
//
startMinD: 0,
startMaxD: 30000,
maxVolumeD: 1,
//
startMinE: 0,
startMaxE: 30000,
maxVolumeE: 1,
//
startMinF: 0,
startMaxF: 30000,
maxVolumeF: 1,
//
startMinG: 0,
startMaxG: 30000,
maxVolumeG: 1,
//
startMinH: 0,
startMaxH: 30000,
maxVolumeH: 1,
//
startMinI: 0,
startMaxI: 30000,
maxVolumeI: 1,
//
startMinJ: 0,
startMaxJ: 30000,
maxVolumeJ: 1,
//
startMinK: 0,
startMaxK: 30000,
maxVolumeK: 1
};
masterClock();
function masterClock() {
setTimeout(function() {
soundA(options, optionsA);
}, 10); // these need to be called with delay so they don't use the other functions' paramaters
}
function soundA() {
var soundFileName = 'audio/60.wav';
fadeIn = 8000;
fadeOut = 8000;
console.log('soundFileName in A: ' + soundFileName);
calculateStartDelay(optionsA.startMinA, optionsA.startMaxA);
function calculateStartDelay(startMin, startMax) {
startDelay = Math.floor(Math.random() * startMax) + startMin;
}
function calculatePlayDuration(playDurationMin, playDurationMax) {
playDuration = Math.floor((Math.random() * playDurationMax) + playDurationMin);
}
function executePlayTools() {
calculatePlayDuration(optionsA.playDurationMin, optionsA.playDurationMax);
loop(options, playDuration, soundFileName, fadeIn, fadeOut);
console.log('A: ////////////////////////////////// ');
masterClock();
}
setTimeout(function() {
if (probabilityValue < probabilityPointA) {
maxVolume = optionsA.maxVolumeA;
executePlayTools();
} else if (probabilityValue < probabilityPointB) {
maxVolume = optionsA.maxVolumeB;
executePlayTools();
} else if (probabilityValue < probabilityPointC) {
maxVolume = optionsA.maxVolumeC;
executePlayTools();
} else if (probabilityValue < probabilityPointD) {
maxVolume = optionsA.maxVolumeD;
executePlayTools();
} else if (probabilityValue < probabilityPointE) {
maxVolume = optionsA.maxVolumeE;
executePlayTools();
} else if (probabilityValue < probabilityPointF) {
maxVolume = optionsA.maxVolumeF;
executePlayTools();
} else if (probabilityValue < probabilityPointG) {
maxVolume = optionsA.maxVolumeG;
executePlayTools();
} else if (probabilityValue < probabilityPointH) {
maxVolume = optionsA.maxVolumeH;
executePlayTools();
} else if (probabilityValue < probabilityPointI) {
maxVolume = optionsA.maxVolumeI;
executePlayTools();
} else if (probabilityValue < probabilityPointJ) {
maxVolume = optionsA.maxVolumeJ;
executePlayTools();
} else {
maxVolume = optionsA.maxVolumeK;
console.log('Probability Else');
}
console.log('startDelay: ' + startDelay)
}, startDelay);
}
}
///////////////////////////////////////////////////////////////
// SHARED LOOP  ///////////////////////////////////////////////
///////////////////////////////////////////////////////////////
function loop(options, playDuration, soundFileName, fadeIn, fadeOut) {
console.log('soundFileName in loop: ' + soundFileName);
if (options.numberOfSounds < options.maxNumberOfSounds) { //Don't create more than the max number of sounds.
var sound = getSound(soundFileName);
var id2 = sound.play();
logNumberOfSounds();
sound.volume(0); // don't think I need this since it's declared above and in getSound(), but it stops blips?
sound.fade(0, maxVolume, fadeIn, id2); // FADE IN
setTimeout(function() {
sound.fade(maxVolume, 0, fadeOut, id2); // FADE OUT
options.numberOfSounds--;
// Attempt to clean up the sound object
setTimeout(function() {
sound.stop();
sound.unload();
}, fadeOut + 1000);
}, playDuration);
}
}
// PLAYER FOR MAIN SOUND FUNCTION /////////////////////////////
function getSound(soundFileName) {
return new Howl({
src: [soundFileName],
autoplay: true,
loop: true,
volume: 0,
fade: 0 // removes the blip
});
}
</script>
<script src="js/howler.core.js"></script>
<script src="js/siriwave.js"></script>
<script src="js/player.js"></script>
</body>
</html>

每个函数都有自己的作用域，在函数中声明的变量只存在于该函数的范围内。

在这种情况下，soundFileName被声明为soundA内的var，因此它只存在于soundA范围内。

你把soundFileName作为参数传递给loop，然后从那里传递给getSound，但是你的函数定义loop和getSound不包含任何命名参数。

您需要更改loop和getSound的函数定义以包含预期的参数：

function loop(options, playDuration, soundFileName, fadeIn, fadeOut) {
...
// soundFileName is now availabie in this scope
...
}

function getSound(soundFileName) {
...
// soundFileName is now availabie in this scope
...
}

请注意，在JavaScript中的每个函数(不包括箭头函数)中都有一个特殊的arguments对象，其中包含调用该函数的参数，因此由于您传递了soundFileName作为第三个参数来loop传递的值也将在loop中作为arguments[2]可用，并且由于它是作为第一个参数传递到getSound，因此它也将在getSound内作为arguments[0].

您没有正确使用变量的值。它的值在soundA()函数中定义，然后传递给函数loop()该函数没有任何方法知道哪个变量是哪个变量。

此问题有两种解决方案。可以像这样设置预定义的参数名称function loop(options, options, playDuration, soundFileName, fadeIn, fadeOut){...}然后在函数体中使用这些名称，也可以使用arguments函数对象。arguments对象是使用每个函数(不包括箭头函数)创建的类似数组的对象，其中包含其所有传递的参数，通过这些参数，您可以轻松使用传递给它的变量。请参阅以下示例：

loop(options, playDuration, soundFileName, fadeIn, fadeOut);
function loop() {
console.log('soundFileName in loop: ' + arguments[2]); //The arguments object will contain all five parameters passed to the function call. 
}

话虽如此，有些人认为对函数使用未知数量的参数是不好的做法，因为与使用预定义参数相比，它可能导致更多的错误和陷阱。尽管如此，arguments对象随时可供您使用，您可以根据需要构建应用程序。请记住，其他人可能会阅读代码并在此过程中感到困惑。

此外，在解决此问题后，我遇到了另一个问题，即您在声明实际函数之前的单独脚本标签中使用函数，从而导致undefined错误。

另外，请将此答案标记为帮助其他路人的解决方案。

编辑#1：从ES6+开始，您可以指定默认参数值，以防您希望始终保持函数的行为，即使值未正确传递。

EDIT#2：正如注释中@nikolairiedel提到的，函数getSound()超出了该变量的声明范围，因此无法获取其值。您可以为该函数设置参数和/或指定默认参数值，以确保它始终有效，如上文 edit#1 中所述。

也许尝试更改它

function loop() {

自：

function loop(param1,param2.....){

在您的情况下：

function loop(soundFileName,playDuration, ...){

相关内容

最新更新

热门标签：