Question

我的课程作业要求我对我引用的脚本使用defer标记，但由于js中的执行顺序，导致图像naturalWidth未定义文件。

我的HTML头脑中有这一行（作业要我把它放在<head>中，但使用defer="defer"） <script src="scripts/script.js" defer="defer"></script>

我的js：

var catImageWidth = document.getElementById("cat-image").naturalWidth;
var birdImage = document.getElementById("bird-image");
birdImage.width = catImageWidth;

所以我尝试了这个：

var catImage = document.getElementById("cat-image");
var birdImage = document.getElementById("bird-image");
var catImageWidth;

catImage.onload = function() {
    catImageWidth = this.naturalWidth;
    console.log(catImageWidth) //logs 600
}

birdImage.width = catImageWidth; //logs `undefined`

我认为birdImage.width的赋值未定义，因为这行代码在catImage.onload实际发生之前运行。这是否意味着我是birdImage.width在function范围内分配catImage.onload的奴隶？

P.S。我尝试了catImage.onload = () => { //block of code }的ES6，但这似乎没有效果。

Answer 1

这是否意味着我是在birdImage.width函数范围内分配catImage.onload的奴隶？

似乎是这样，这是最好的方法。

您可以使用箭头功能，但不能使用this关键字来引用图像。

不起作用：

catImage.onload = () => {
    catImageWidth = this.naturalWidth; //undefined
    console.log(catImageWidth)
}

因为在箭头函数中this对象没有绑定到图像引用，所以它引用了外部作用域的this。

有效吗

catImage.onload = function() {
    catImageWidth = this.naturalWidth;
    console.log(catImageWidth) //logs 600
}

或

catImage.onload = function() { catImageWidth = catImage.naturalWidth; console.log(catImageWidth) //logs 600 }

Answer 2

问题是您正在尝试访问超出范围的变量。

请试一试：

<img id="cat-image" src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg">
<img id="bird-image" src="http://animalia-life.club/data_images/bird/bird3.jpg">

<script>
var catImage = document.getElementById("cat-image");
var birdImage = document.getElementById("bird-image");
var catImageWidth;

catImage.onload = function() {
    catImageWidth = this.naturalWidth;
    birdImage.width = catImageWidth;
}

console.log(birdImage.width);
</script>

为什么naturalHeight或naturalWidth返回`undefined`？

2 个答案: