Question

我在同一主题，变量范围上反复疯狂。在这上面创建一个全局变量不起作用，我尝试在一个函数中返回值以使用另一个函数，但总是在控制台中返回“未定义”错误。这是代码的简单标记：

domElement.plugin({
    method1: function() {
        // create variable
        var myvar = 1;
        // other things going on here in this method
    },
    method2: function() {
        // use variable
        console.log(myvar);
    }
});

这是一个jquery插件，我试图在method2中访问method1（并且是变量）中创建的var myvar的值。我在论坛上发现了一些东西，但似乎无法让它们中的任何一个起作用，因此任何帮助都不仅仅是值得赞赏。

Answer 1

你不能，它不再在范围内了。您需要在该范围之外定义变量并在函数内部进行分配。

domElement.plugin({
    myvar:null,
    method1: function() {
        // create variable
        myvar = 1;
        // other things going on here in this method
    },
    method2: function() {
        // use variable
        console.log(myvar);
    }
});

在另一个评论中提到，您可以在一个方法中定义变量，然后将其传递给另一个 - 但这仅在您计划仅使用第一个方法内的第二个方法时才有效。该变量仍然无法从方法外部访问。

Answer 2

您需要使两个方法都可以访问变量范围：

domElement.plugin({
    myvar: null, 
    method1: function() {
        this.myvar = 1;
    },
    method2: function() {
        console.log(this.myvar); // = null or 1 depending on when you call this function
    }
});

或者你可以将它从一种方法传递给另一种方法：

domElement.plugin({
    method1: function() {
        var myvar = 1;
        this.method2(myvar);
    },
    method2: function(v) {
        console.log(v); // = 1
    }
});

我个人会使用第一个例子。

Answer 3

两种最简单的方法：

全球范围：

var myvar;
domElement.plugin({
    method1: function() {
        // create variable
        myvar = 1;
        // other things going on here in this method
    },
    method2: function() {
        // use variable
        console.log(myvar);
    }
});

不要过多地使用全球范围，它有点凌乱;更好地使用对象：

对象属性：

domElement.plugin({
    myVar: 1,
    method1: function() {
        // create variable
        this.myVar = 1;
        // other things going on here in this method
    },
    method2: function() {
        // use variable
        console.log(this.myVar);
    }
});

我鼓励你使用第二种方法。

Answer 4

它可能看起来有点长，但您可以使用立即调用的函数表达式为您的方法创建共享范围...

// create shared scope for methods
var methods = (function() {
    // create variable in shared context
    var myvar;
    // define method1
    function method1() {
        // assign value to variable
        myvar = 1;
        // other things going on here in this method
    }
    // define method2
    function method2() {
        // use variable
        console.log(myvar);
    }
    // return methods
    return {
        method1: method1,
        method2: method2
    }
// execute the scope function immediately...
}());

// assign methods to plugin
domElement.plugin({
    method1: methods.method1,
    method2: methods.method2
});

这是有效的，因为javascript是函数作用域，而不是块作用域，并且在父作用域中声明两个方法都可以访问的变量意味着它们都将对同一个变量进行操作。此外，变量对范围的上下文保持私有，因此无法从外部访问和修改。这种模式有助于管理任意模块，这些模块可以相互并存而不会发生冲突。

在其他方法中的方法中创建的访问变量

4 个答案: