如何从函数中获取值并赋值给变量？代码返回undefined问题

首先看你的代码问题所在：

function etr() { 
  var img = new Image(); 
  img.onload = paramsImg; 
  img.src = picFile.result; 
  function paramsImg() { 
    return img.height; 
  }; 
}; 
var vvvr = etr(); 
alert(vvvr);

问题根源 #

1. 函数无返回值：etr()本身没有任何return语句，所以执行后默认返回undefined。
2. 异步逻辑误解：图片加载是异步操作，img.onload里的paramsImg函数要等图片完全加载完成后才会执行，但etr()在设置完img.src后就直接执行完毕了——你在paramsImg里的return只是把值返回给了onload回调的调用者，根本传不到etr()的外部。

解决方案 #

针对异步操作的结果获取，有几种常用的处理方式：

方式1：使用回调函数

给etr()添加一个回调参数，当图片加载完成后调用回调传递高度值：

function etr(callback) { 
  var img = new Image(); 
  // 加载成功时调用回调传递高度
  img.onload = function() { 
    callback(img.height); 
  };
  // 加上错误处理，避免图片加载失败无响应
  img.onerror = function() {
    callback(null, new Error('图片加载失败'));
  };
  img.src = picFile.result; 
}; 

// 调用时传入回调函数处理结果
etr(function(height, err) {
  if (err) {
    console.error(err);
    return;
  }
  var vvvr = height;
  alert(vvvr); // 这里就能拿到正确的图片高度了
});

方式2：使用Promise封装（更现代的写法）

把异步加载逻辑封装成Promise，这样可以用.then()或者async/await来更优雅地处理结果：

function etr() { 
  return new Promise((resolve, reject) => {
    var img = new Image(); 
    img.onload = function() { 
      resolve(img.height); // 加载成功时返回高度
    };
    img.onerror = function() {
      reject(new Error('图片加载失败')); // 加载失败时抛出错误
    };
    img.src = picFile.result; 
  });
}; 

// 用.then()链式处理结果
etr().then(height => {
  var vvvr = height;
  alert(vvvr);
}).catch(err => {
  console.error(err);
});

// 或者用async/await（需要在异步函数中使用）
async function getImageHeight() {
  try {
    var vvvr = await etr();
    alert(vvvr);
  } catch (err) {
    console.error(err);
  }
}
getImageHeight();

内容的提问来源于stack exchange，提问作者Vadim