javascript回调函数的作用域
我想知道Javascript中传入回调函数的作用域是什么javascript回调函数的作用域,javascript,function,callback,scope,Javascript,Function,Callback,Scope,我想知道Javascript中传入回调函数的作用域是什么 callback = function() { alert('hello'); } func1 = function() { func2(callback); } func2 = function(callback) { func3(callback); } func3 = function(callback) { callback(); } 当我调用func1（）时。。似乎这个额外的函数层丢失了对
callback = function() {
alert('hello');
}
func1 = function() {
func2(callback);
}
func2 = function(callback) {
func3(callback);
}
func3 = function(callback) {
callback();
}
当我调用func1（）时。。似乎这个额外的函数层丢失了对callback（）的引用。我可以从func2中调用callback（），但不能从func3中调用。有人能给我建议吗 您应该将代码编写为
var callback;
var func1;
var func2;
var func3;
callback = function() {
alert('hello');
}
func1 = function() {
func2(callback);
}
func2 = function(callback) {
func3(callback);
}
func3 = function(callback) {
callback();
}
只有在代码段底部调用func1时，调用func1才会提醒hello。希望我已经在本文中解释了其中的一些内容。查看JS中的注释。这是匆忙完成的，所以请随时更新/评论/提问。如果您想在本地进行测试，代码如下
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="test">
</div>
<script>
// We're going to name our /callback/ something else to help with
// the confusion of using /callback/ wording everywhere.
var showMessage = function(message) {
document.getElementById("test").innerHTML= message;
}
var tellMe = function(message) {
document.getElementById("test").innerHTML = message;
return "Oh yes we did!";
}
// here we'll have one called callback just to show the name callback isn't anything special
var callback = function(message) {
document.getElementById("test").innerHTML= message;
}
// doesn't show anything, because you're not passing in a call back.
// if we wanted this to work we would have a param called callbackTest and
// we's pass in a function to be called back.
func1 = function() {
func2(callbackTest("Hi from func1"));
}
// does show message because you're not calling a callback, you're calling a function directly. Which is what you were doing above, just that there happened to not be a function called callback
// see explination below why we don't see Hi from func2, but Hi from func1_5 instead
func1_5 = function() {
func2(callback("Hi from func1_5"));
}
// here we're actually accepting a callback function named showMessage and using that as our callback by assigning it to the callback parameter variable. (remember, callback is not a fancy statement or call or anything. It's just a commonly named variable for.... callbacks ;) )
func2 = function(callback) {
// what you're doing here is actually passing the result of calling the callback (showMessage) to func3, and not the function. So you're actually executing the callback (showMessage) with the "Hi from func2", which outputs that, but returns nothing. So you're not passing anything at all to func3.
func3(callback("Hi from func2"));
}
// so here we'll show the previous problem, but working to provide insight.
// we're passing in a different /callback/ called tellMe. This function actually returns a string.
func2_5 = function(callback) {
func3(callback("Hi from func2_5"));
}
// here you're actually passing in a function to this as a callback, which is actually the showMessage function we pass in below.
func3 = function(callback) {
// the thing is, the callback variable is now a string and not a function because we got the result of the passed in callback call from above.
// so this will show a string for callback ("Oh yes we did!")
document.getElementById("test").innerHTML = callback;
// and this won't show anything because callback is not a function in this scope
if (typeof(callback) !== "function") {
alert("callback isn't a function");
}else {
callback(("Hi from func3"));
}
}
func4 = function() {
if (typeof(callback) === "undefined" ) {
alert ("the callback variable was never defined")
} else {
callback(("Hi from func4"));
}
}
</script>
<button onclick="func1();">func1</button>
<button onclick="func1_5()">func1_5</button>
<button onclick="func2(showMessage);">func2</button>
<button onclick="func2_5(tellMe);">func2_5</button>
<button onclick="func3();">func3</button>
<button onclick="func4()">func4</button>
</body>
</html>
//我们将命名我们的/callback/其他帮助
//到处使用/回调/措辞的混乱。
var showMessage=函数（消息）{
document.getElementById（“test”）.innerHTML=消息；
}
var tellMe=函数（消息）{
document.getElementById（“test”）.innerHTML=消息；
返回“哦，是的，我们做到了！”；
}
//在这里，我们将有一个名为callback的函数来说明callback这个名字没有什么特别之处
var callback=函数（消息）{
document.getElementById（“test”）.innerHTML=消息；
}
//没有显示任何内容，因为你没有回电话。
//如果我们想让它工作，我们将有一个名为callbackTest和
//我们传入一个要回调的函数。
func1=函数（）{
func2（回调测试（“来自func1的Hi”）；
}
//不会显示消息，因为您不是在调用回调，而是在直接调用函数。这就是您在上面所做的，只是碰巧没有一个名为callback的函数
//请参阅下面的解释，为什么我们没有从func2看到Hi，而是从func1_5看到Hi
func1_5=函数（）{
func2（回拨（“来自func1_5的Hi”）；
}
//这里我们实际上接受了一个名为showMessage的回调函数，并通过将其分配给callback参数变量将其用作回调函数。（请记住，callback不是一个花哨的语句、调用或其他任何东西。它只是一个通常命名为…callbacks；）的变量。）
func2=函数（回调）{
//您在这里所做的实际上是将调用回调（showMessage）的结果传递给func3，而不是函数。因此，您实际上是使用“Hi from func2”执行回调（showMessage），它输出该结果，但不返回任何内容。因此，您根本不向func3传递任何内容。
func3（回调（“来自func2的Hi”）；
}
//因此，这里我们将展示前面的问题，但努力提供见解。
//我们正在传入一个不同的/回调/tellMe。这个函数实际上返回一个字符串。
func2_5=函数（回调）{
func3（回调（“来自func2_5的Hi”）；
}
//在这里，您实际上将一个函数作为回调传递给它，这实际上是我们在下面传递的showMessage函数。
func3=函数（回调）{
//问题是，回调变量现在是字符串而不是函数，因为我们从上面得到了传入回调调用的结果。
//这将显示一个回调字符串（“哦，是的，我们做到了！”）
document.getElementById（“test”）.innerHTML=回调；
//这不会显示任何内容，因为回调函数不在此范围内
if（类型（回调）！=“函数”）{
警报（“回调不是函数”）；
}否则{
回调（“Hi来自func3”）；
}
}
func4=函数（）{
if（typeof（回调）=“未定义”）{
警报（“从未定义回调变量”）
}否则{
回调（“Hi来自func4”）；
}
}
职能1
函数1_5
功能2
函数2_5
职能3
职能4