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

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() {
        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 2

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

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 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 是函数作用域，而不是块作用域，并且在两个方法都可以访问的父作用域中声明变量意味着它们都将对同一个变量进行操作。此外，该变量对范围的上下文仍然是私有的，因此不能从外部访问和修改。这种模式有助于管理可以相互共存而不会发生冲突的任意模块。