Question

我有这个功能：

function createElement() {
    var element1 = document.createElement("div");
    element1.id = "el1";
    //...
}

问题在于，当我创建另一个函数时，假设editElement()，我无法从新函数中访问element1，因为它超出了范围。

我可以在这些函数之外声明element1，但问题是element1始终被声明。但是我可能只需要在案例的一小部分中创建元素，只有当用户按下按钮并调用creadeElement()时才需要。我想保存系统资源并仅在我真正需要时调用document.createElement("div")，但我还需要从多个函数中访问它。有办法吗？

Answer 1

相反，做这样的事情：

var element1 = null;
function createElement() {
    element1 = document.createElement("div");
    element1.id = "el1";
    //...
}

function useElement() {
    if(!element1)createElement()
    //...
}

这将使元素在createElement函数之外可用，但在需要之前不会创建元素。

Answer 2

您可以使用对象：

var elementHandler = {
    createElement: function() {
        this.element1 = document.createElement("div");
        this.element1.id = "el1";
        // ...
    },
    editElement: function() {
        // Use this.element1 here...
    }
};

您可以像这样致电createElement和editElement：

elementHandler.createElement();
elementHandler.editElement();

（或者您可以称他们为create和edit，因为无需在整个地方重复“元素”一词......）

如果将它们挂钩到某个活动，请务必致电他们，使elementHandler在通话中this：

// Using an anonymous function
someElement.addEventListener("click", function() {
    elementHandler.createElement();
}, false);

// Or using ES5's `bind`
someElement.addEventListener("click", elementHandler.createElement.bind(elementHandler), false);

// *NOT* like this:
someElement.addEventListener("click", elementHandler.createElement, false);

Answer 3

您可以简单地将新元素分配给窗口，使其在全局范围内可用

function createElement() {
    window.element1 = document.createElement("div"); //Meke new element global.
    element1.id = "el1";
}

function useElement() {
    //now you can use element1 directly. as it is inside the global scope.
}

声明对象超出范围

3 个答案: