为什么我的变量是未定义的？

Question

我是javascript的初学者，我不知道为什么我的变量没有定义。

这是我的代码：

function createBlockMap(data) {
//console.log(data.X + " " + data.Y + " " + data.food);

    var makeOverOut = function (mesh) {
        mesh.actionManager = new BABYLON.ActionManager(scene);
        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh.material, "diffuseTexture", mesh.material.diffuseTexture = new BABYLON.Texture("../assets/GrassLight.jpg", scene)));
        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh.material, "diffuseTexture", mesh.material.diffuseTexture = new BABYLON.Texture("../assets/Grass.jpg", scene)));
        mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh, "scaling", new BABYLON.Vector3(1, 1, 1), 150));
        mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh, "scaling", new BABYLON.Vector3(1.1, 1.1, 1.1), 150));
        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, button2Rect, "levelVisible", true))
        .then(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, button2Rect, "levelVisible", false));
    }

    var blockInfo = function (data) {
        box = new BABYLON.Mesh.CreateBox("crate", 1, scene);
        box.material = new BABYLON.StandardMaterial("Mat", scene);
        box.material.diffuseTexture = new BABYLON.Texture("../assets/Grass.jpg", scene);
        box.position.z = data.Y;
        box.position.x = data.X;
        box.position.y = 3;
        ownfood = data.food;
        console.log(this.ownfood);
        console.log(data.food);
        Linemate = data.Linemate;
        Deraumere = data.Deraumere;
        Sibur = data.Sibur;
        Mendiane = data.Mendiane;
        Phiras = data.Phiras;
        Thystame = data.Thystame;
        makeOverOut(box);
    }

    var button2Rect = new BABYLON.Rectangle2D(
        {   parent: canvas, id: "buttonClickRes", x: 250, y: 250, width: 100, height: 40, fill: "#4040C0FF",
        roundRadius: 10, isVisible: false,
        children:
        [
            new BABYLON.Text2D("Food: " + blockInfo.ownfood, { id: "clickmeRes", marginAlignment: "h:center, v:center" })
        ]
    });

    if (map[data.Y] == null)
    {
        map[data.Y] = new Array();
    }
    map[data.Y][data.X] = blockInfo(data);}

为什么blockInfo.ownfood对"button2Rect“没有定义，即使我在blockInfo函数上指定了"data.food”，以及如何解决这个问题。

谢谢

Answer 1

第一期

当您在函数作用域中定义变量时，该变量是一个局部变量，您可以在该作用域中使用该变量，但不能在此范围之外访问该变量，这仅仅是因为

function hello(){
  var greeting = 'hi';
}

并不意味着以后可以访问greeting，例如通过

hello.greeting 

第二期

在Javascript中，只要您可以创建函数的实例，函数就类似于类。blockInfo是一个函数，而不是一个函数的实例。如果要创建函数的实例，可以执行以下操作：

myBlockInfo = new blockInfo(data)

如果你就这么做

myBlockInfo = blockInfo(data)

如果没有new关键字，就不会创建该函数的实例(而且，由于函数blockInfo不返回任何内容，因此myBlockInfo的值将是未定义的)。

Javascript中有一个特殊的变量：this。当您计划使用new关键字实例化一个函数时，您可以在函数中使用特殊变量this。它是“对象的当前实例”的占位符。所以，如果你做了

function blockInfo(data){
  this.ownfood = data.food 
}

您要做的是将data.food分配给您可能创建的函数的任何实例。因此，当您实例化该函数时，您将创建一个具有属性ownfood的函数实例，您可以通过该实例访问该实例：

myBlockInfo = new blockInfo(data)
console.log(myBlockInfo.ownfood)
// logs the value of data.food