Question

我正在学习使用JavaScript的教程，允许网页用户在所有客户端拖放图像。

在本教程中，创建了一个新的FileReader对象并定义了onload属性：

var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.

var reader = new FileReader();
//confusing line below:
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);

我注意到阅读器的onload属性设置为函数和对象，如下所示：

object.property = (someFunction)(someObject);

我不明白这种语法。当onload事件触发时，someObject是否传递给someFunction？我也不明白为什么函数返回另一个函数，当它发生时会发生什么？

Relevant section of tutorial

Answer 1

reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);

在上面的代码中，它是一个带有一个参数aImg的IIFE，并且在函数体中，它返回另一个函数，其中src的{{1}}设置为{{1 }}和aImg是图片上传触发的e.target.result，e是图片，并被分配到event事件。

现在是最后的e.target.result。它是先前创建的onload标记，它作为参数传递以执行函数。

FileReader onload属性，包含一个返回另一个函数的函数

1 个答案: