javascript - 函数调用后的 jQuery 变量作用域？

Question

我有这个功能

function update_prices(product_selector){
    //kind of a hack to account for the sometimes having a professional price and sometimes not
    var price_count = product_selector.find('small.rt').length;
    for (i=0;i<=price_count;i++)
    {
        if(i == 0){
            var standard_selector = product_selector.find('small.rt:eq('+ i +')');
            var standard_price = standard_selector.attr('data');
        }
        if(i == 1){
            var business_selector = product_selector.find('small.rt:eq('+ i +')');
            var business_price = business_selector.attr('data');
        }
        if(i == 2){
            var professional_selector = product_selector.find('small.rt:eq('+ i +')');
            var professional_price = professional_selector.attr('data');
        }
    }
}

我有这段代码调用它

....
....
product_selector.find(".active_selector").removeClass('active_selector');
update_prices(product_selector);
....
....

standard_selector.text("something");
business_selector.text("something else");
professional_selector.text("another thing");

我的问题是如何保持在 update_prices 函数中创建的三个变量 standard_selector business_selector 和 professional_selector 的范围

Answer 1

要在函数声明后保持这些变量持久化，您有以下选择:

1. 它们必须在更高级别的范围内声明，并在您需要它们的期间持续存在。
2. 它们需要是在网页的整个生命周期内持续存在的全局变量。
3. 需要将它们指定为某个对象的属性，并在所需的持续时间内持续存在。这可以通过从函数返回具有这些值的对象或将对象传递到可以设置属性的函数或通过拥有一个放置属性的全局对象来完成。

最简单的解决方案(被认为并不总是最好的)是通过在更高的范围内声明它们并在函数中删除它们前面的 var 来使它们成为全局变量，这样您就可以在全局变量而不是使用局部变量:

// declare global variables in global scope
var standard_selector;
var business_selector;
var profession_selector;

function update_prices(product_selector){
    //kind of a hack to account for the sometimes having a professional price and sometimes not
    var price_count = product_selector.find('small.rt').length;
    for (i=0;i<=price_count;i++)
    {
        if(i == 0){
            standard_selector = product_selector.find('small.rt:eq('+ i +')');
            var standard_price = standard_selector.attr('data');
        }
        if(i == 1){
            business_selector = product_selector.find('small.rt:eq('+ i +')');
            var business_price = business_selector.attr('data');
        }
        if(i == 2){
            professional_selector = product_selector.find('small.rt:eq('+ i +')');
            var professional_price = professional_selector.attr('data');
        }
    }
}

或者，如果您只是想从此函数返回它们，以便您可以在作用域的上一级使用它们，那么您可以在一个对象中返回它们:

function update_prices(product_selector){
    //kind of a hack to account for the sometimes having a professional price and sometimes not
    var sel = {};
    var price_count = product_selector.find('small.rt').length;
    for (i=0;i<=price_count;i++)
    {
        if(i == 0){
            sel.standard_selector = product_selector.find('small.rt:eq('+ i +')');
            var standard_price = standard_selector.attr('data');
        }
        if(i == 1){
            sel.business_selector = product_selector.find('small.rt:eq('+ i +')');
            var business_price = business_selector.attr('data');
        }
        if(i == 2){
            sel.professional_selector = product_selector.find('small.rt:eq('+ i +')');
            var professional_price = professional_selector.attr('data');
        }
    }
    return(sel);
}

var selectors = update_prices(xxx);
// access selectors.standard_selector, selectors.business_selector, selectors.profession_selector here