Javascript 为什么naturalHeight或naturalWidth返回'undefined'？

我的类赋值要求我对引用的脚本使用

defer

标记，但这会导致图像的

naturalWidth

未定义，因为在我的js文件中执行的顺序不同

我的HTML的标题中有这一行（作业要求我将其放在

中，但使用

defer=“defer”

）

我的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

实际发生之前运行。这是否意味着我必须在

catImage.onload

的

功能范围内分配
birdImage.width

另外，我尝试了
catImage.onload=（）=>{//code块}
的ES6，但这似乎不起作用

这是否意味着我必须在
catImage.onload
的功能范围内分配
birdImage.width

看来是这样，这是最好的办法

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

不起作用：

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

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

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

因为在arrow函数中，
this
对象没有绑定到图像引用，所以它引用外部范围的
this

有效：

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

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

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

或：

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

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

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

问题是您试图访问范围之外的变量

请尝试一下：

<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>


var catImage=document.getElementById（“cat图像”）；
var birdImage=document.getElementById（“bird image”）；
可变宽度；
catImage.onload=函数（）{
catImageWidth=此.naturalWidth；
birdImage.width=catImageWidth；
}
控制台。原木（鸟笼。宽度）；
这就是我所拥有的，如我的问题中所示。所以我不确定为什么它实际上没有推迟。请仔细看看我的解决方案。你会看到区别是什么。此外，我鼓励您尝试我的代码，这样您就可以理解其中的差异。你可以复制粘贴代码并运行它。干杯，这是我最初做的，因为我有
birdImage.width=catImageWidth在函数中。我相信延迟不会等待图像资产，however@simmonson令人惊叹的！我很高兴能帮上忙。你会选择这个作为你最好的答案吗？也请随意投票。