嵌套函数上的"this"关键字应用程序

我有这个代码：

<!DOCTYPE html>
<html>
<head>
<title>Drag-Drop tests</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var body = document.body;

var cursor = document.createElement("div");
cursor.innerText = "Contenus des fichiers :n";

cursor.ondragover = e => e.preventDefault();
cursor.ondrop = function(e) {
e.preventDefault();

if (e.dataTransfer.items) {
for (var i = 0; i < e.dataTransfer.items.length; i++) {
if (e.dataTransfer.items[i].kind === "file") {
var file = e.dataTransfer.items[i].getAsFile();

file.cursor = document.createElement("p");
body.appendChild(file.cursor);

file.cursor.innerText = file.name + " contient :";

file.text().then(function(value) {
file.cursor.innerText += " " + value;
});
}
}
}
else {
for(var i = 0; i < e.dataTransfer.files.length; i++) {
var file = e.dataTransfer.files[i];

file.cursor = document.createElement("p");
body.appendChild(file.cursor);

file.cursor.innerText = file.name + " contient :";

file.text().then(function(value) {
file.cursor.innerText += " " + value;
});
}
}
};

body.appendChild(cursor);
</script>
</body>
</html>

照原样，如果我在div元素上放下两个文件，我会得到以下输出：

Contenus des fichiers :
File1.txt contient :
File2.txt contient : Content of file 1 Content of file 2

在文件.text((.then函数中；文件"；引用声明的最后一个文件引用。

如果我更换file.cursor.innerText+=依据this.cursor.inerText+=我得到这个输出：

Contenus des fichiers :
Content of file 1 Content of file 2
File1.txt contient :
File2.txt contient :

在文件.text((.then函数中；这个"；指的是第一个调用者，也就是div本身。

有什么方法可以得到这个吗：

Contenus des fichiers :
File1.txt contient : Content of file 1
File2.txt contient : Content of file 2

保持匿名嵌套函数作为调用方的参数。

我知道在我定义它的回调时不会发生这种情况。我想知道是否可以附上一些数据并在回调执行中检索它。

提前Thx。

在file.text((.then函数中，"文件"；引用声明的最后一个文件引用。

您来自C背景。在JSvar中，s是函数范围的，并被提升。对于块范围的变量，最好使用更新的关键字let和const。

使用"let"one_answers"var"有什么区别？

在file.text((.then函数中；这个"；指的是第一个调用者，也就是div本身。

JS中的this臭名昭著；尤其是对于那些已经对它应该如何表现抱有期望的人来说。在JS中，this是上下文敏感的，并且取决于如何调用函数/方法。

"this"关键字是如何工作的？

旁注：我看到你写了两次代码，看看迭代程序和生成器。我用它们来"；归一化"；将dataTransfer中可用的任何内容转换成Files的序列。

var body = document.body;
var cursor = document.createElement("div");
cursor.innerText = "Contenus des fichiers :n";
// https://mdn.io/Generator
function* getFiles(dataTransfer) {
if (dataTransfer.items) {
// https://mdn.io/for...of
for (let item of dataTransfer.items) {
if (item.kind === "file") {
// https://mdn.io/yield
yield item.getAsFile();
}
}
} else {
// https://mdn.io/yield*
yield* dataTransfer.files;
}
}
cursor.ondragover = e => e.preventDefault();
cursor.ondrop = function(e) {
e.preventDefault();
for (const file of getFiles(e.dataTransfer)) {
const fileCursor = document.createElement("p");
fileCursor.innerText = file.name + " contient :";
body.appendChild(fileCursor);
file.text().then(text => fileCursor.append(text));
}
};
body.appendChild(cursor);

编辑：

我甚至没有看到任何let、const、函数*、yeld和yeld*。

2020/21年，这基本上是一场失败。const和let是在ES2015(Javascript版本(中引入的，并且多年来基本上在每个浏览器中实现。

你会如何命名这样一个在"；foction"；或"；yeld"；关键字？

一般主题是迭代程序和生成器。我在上面的代码片段中为不同的关键字添加了一些特定的URL。

.text()是异步的。所有的CCD_ 12都发生在整个CCD_。非常经典的异步循环操作问题。您只需要使用await，而不需要使用(老派(.then()语法。

cursor.ondrop = async function(e) {
// ...
for(...) {
const value = await file.text();
file.cursor.innerText += " " + value;
}
}

JSFiddle：https://jsfiddle.net/7q9Lphjf/1/

您得到这个结果是因为+= " " + value发生在promise执行之后。换句话说，在您的示例代码中，会发生以下步骤：

添加"；文件1连续"；到div
开始读取文件1
添加"；File2 contient"；到div
开始读取文件2

[…]几分钟后

file1读取完成，因此promise被解析，file1的内容被附加到div

file2读取完成，因此promise被解析，file2的内容被附加到div

在这种特殊情况下，它还与在for循环中更改的file变量的范围有关，因此在解析promise1时，file已经引用了第二段，因此file.cursor.innerText引用了第三段的内容。

代替：

file.cursor = document.createElement("p");
body.appendChild(file.cursor);
file.cursor.innerText = file.name + " contient :";

file.text().then(function(value) {
file.cursor.innerText += " " + value;
});

用途：

file.text().then(function(value) {
file.cursor = document.createElement("p");
body.appendChild(file.cursor);
file.cursor.innerText = file.name + " contient :";
file.cursor.innerText += " " + value;
});

然而，此解决方案不会保证任何特定的订单。每当一个文件的promise被解析(文件读取完成(时，只有这样该文件的内容才会被添加到div中

如果您绝对需要一个特定的内容附加顺序，那么也有许多可能的解决方案来实现这一点，例如promise chaining。

然而，我不确定这是否是一个要求，所以我不会让这个答案比现在更长：(

好的，

另一个回答指出；var"；作用域是函数而不是块。

替换"；var"；通过"；设"；anywhere使关键字"；这个"；在file.text((中。然后回调由于执行流而不指向任何内容。

不管怎样；设"；使"；文件"；迭代独立的每个。

因此，我有这个代码工作：

<!DOCTYPE html>
<html>
<head>
<title>Drag-Drop tests</title>
<meta charset="UTF-8">
</head>
<body>
<script>
let body = document.body;

let cursor = document.createElement("div");
cursor.innerText = "Contenus des fichiers :n";

cursor.ondragover = e => e.preventDefault();
cursor.ondrop = e => {
e.preventDefault();

let fileLoad = file => {
file.cursor = document.createElement("p");
body.appendChild(file.cursor);

file.cursor.innerText = file.name + " contient :";
file.text().then(value => file.cursor.innerText += " " + value);
}

if(e.dataTransfer.items)
for(let item of e.dataTransfer.items)
if(item.kind === "file") fileLoad(item.getAsFile());
else
for(let file of e.dataTransfer.files)
fileLoad(file);
};

body.appendChild(cursor);
</script>
</body>
</html>

最后，我并不真正关心代码优化(对于行代码的数量(。

我将用一些C代码生成它。

相关内容

最新更新

热门标签：