将新FileReader赋值给命名空间对象时onload事件不触发的原因

嘿，这个问题其实很常见——核心问题出在你对命名空间对象的初始化逻辑理解有偏差。咱们一步步拆解：

先看单独的代码：

var reader = new FileReader(); 
reader.onload = function(event) { alert("work"); };

这里reader是你在当前作用域直接声明的变量，JS会自动帮你创建这个变量，所以后续绑定onload完全没问题。

但放到命名空间里时：

nameSpace.cropper.reader = new FileReader(); 
nameSpace.cropper.reader.onload = function(event) { alert("work"); };

这里有个隐形前提：nameSpace和nameSpace.cropper必须已经是存在的对象，否则JS会直接抛出Cannot set properties of undefined的错误——你总不能给一个不存在的东西的属性赋值吧？

• 误解1：默认认为嵌套命名空间的每一层都自动存在
  JS不会自动帮你创建嵌套的对象层级。如果nameSpace还没定义，或者nameSpace.cropper是undefined，那nameSpace.cropper.reader这行代码直接就挂了，后面的onload绑定根本没机会执行。

• 误解2：忽略了代码执行顺序的影响
  可能你定义nameSpace.cropper的代码是在赋值reader之后执行的——比如你先写了上面那两行，后面才声明var nameSpace = { cropper: {} }，这时候前面的代码早就报错终止了，自然不会触发onload。

解决方法很简单，先确保每一层命名空间都被初始化：

方法1：逐层兜底初始化 #

// 先确保nameSpace存在，不存在就创建空对象
var nameSpace = nameSpace || {};
// 再确保cropper存在
nameSpace.cropper = nameSpace.cropper || {};

// 现在再赋值reader就没问题了
nameSpace.cropper.reader = new FileReader();
nameSpace.cropper.reader.onload = function(event) { alert("work"); };

方法2：用对象字面量一次性创建完整结构 #

// 直接创建包含cropper的nameSpace对象
var nameSpace = {
  cropper: {}
};

nameSpace.cropper.reader = new FileReader();
nameSpace.cropper.reader.onload = function(event) { alert("work"); };

遇到这种问题，第一件事就是打开浏览器的开发者控制台（按F12），看有没有报错信息——如果是命名空间未初始化的问题，控制台会明确告诉你"无法设置undefined的属性'reader'"，一眼就能定位问题。

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