javascript - 允许 JavaScript 闭包从父级作用域继承变量

Question

我能够将变量从父作用域传递到匿名函数，如下所示:

var f = function(myVar) {
    alert(myVar);
}
f('hello');

我不想这样做，而是允许闭包直接访问父级的范围。

PHP 允许我按照http://php.net/manual/en/functions.anonymous.php 的描述这样做。 。例如，通过使用 use ($message) ， parent 的 $message变量在闭包中可用。

Closures may also inherit variables from the parent scope. Any such variables must be passed to the use language construct. ...

Example #3 Inheriting variables from the parent scope

// Inherit $message
$example = function () use ($message) {
    var_dump($message);
};
$example();

如何使用 JavaScript 执行此操作？

我正在努力解决的具体部分是下面脚本的这一部分。

select: function(e, ui) {
    //...
    if (typeof options.autocomplete.select !== "undefined"){
        options.autocomplete.select();
    }
}

select: function() {
    //How can I access editable, elem, and ui.  It shows each as being undefined yet I can access it in the parents scope
}

执行脚本时，它显示它们为未定义，但我看到它们是由我的 console.log 定义的在父范围内。

此外，如果我使用 options.autocomplete.select(editable, ui, elem); 显式传递它们，我可以访问它们。

完整脚本:

xWrap(dialog.find('a.car'),'autocomplete',chartsId, {name:'carId', title:'Car Name', autocomplete: {
    url: "/1.0/cars",
    params: {term:null, fields:['id','name']},
    select: function(editable, elem, ui) {
        console.log('chart-list select','editable',editable,'elem',elem,'this',this,'ui', ui)
        var $td=$(elem).parent()
        var series = $td.closest('table').find('th').eq($td.index()).data('id');
        var category=$td.parent().data('id');
        editable.option('params', {'carId': ui.item.id});
        editable.option('url', '/1.0/cars/'+carId+'/'+series+'/'+category)
    }
}});

$.fn.xEdit = function(type, options) {
    //console.log('xEdit',this,type, options);
    function chk(o, a) {
        for (var i = 0; i < a.length; i++) {
            if (typeof o[a[i]] === "undefined"){
                $.error('Property "' +  a[i] + '" must be provided to jQuery.xEdit');
            }
        }
    }
    var common={
        placement: 'right',
        ajaxOptions: {type: "PUT"},
        send: 'always'
        // pk: null, title: null, params: {name: null}, url: null, //Must be passed
    }
    if (typeof options.name === "undefined"){
        $.error('Property "name" must be provided to jQuery.xEdit');
    }
    options.params={name: options.name};
    delete(options.name);
    switch(type) {
        case 'text':
            options.type='text';
            chk(options,['pk','title','url']);
            this.editable($.extend({}, common, options));
            break;
        case 'select':
            options.type='select';
            chk(options,['pk','title','url', 'source']);
            this.editable($.extend({}, common, {value: null}, options));
            break;
        case 'autocomplete':
            options.type='text';
            chk(options,['pk','title','url','autocomplete']);
            chk(options.autocomplete,['url','params']);
            this.editable($.extend({}, common, {value: null}, options))
            .on('shown', function(e, editable) {
                //console.log('on.show','this',this,'e',e,'editable',editable)
                var elem=this;    //Needed only for rare case 
                var $input=editable.input.$input.val('');
                var $button=$input.parent().next().find('button.editable-submit').css('opacity', 0.3)
                .bind('click.prevent', function() {return false;});
                $input.focus(function() {
                    $button.css('opacity', 0.3).bind('click.prevent', function() {return false;});
                })
                .autocomplete({
                    source: function( request, response ) { //get All Points
                        options.autocomplete.params.term=request.term;
                        $.getJSON( options.autocomplete.url, options.autocomplete.params, function(json) {
                            var data=[];
                            for (var j = 0; j < json.length; j++) {
                                data.push({id:json[j].id,label:json[j].name});
                            }
                            response(data);
                        } );
                    },
                    minLength: 2,
                    position: { my : "left top+20", at: "left bottom" },
                    select: function(e, ui) {
                        console.log('xEdit select','editable',editable,'elem',elem,'this',this,'ui', ui, 'options', options)
                        $input.blur();
                        $button.css('opacity', 1).unbind('click.prevent');
                        if (typeof options.autocomplete.select !== "undefined"){
                            options.autocomplete.select(editable, elem, ui,);
                        }
                    }
                })
                .autocomplete('widget').click(function() {return false;});
            });
            break;
        default: $.error('Type "' +  type + '" is not available for jQuery.xEdit');
    }
};

Answer 1

全局变量

var myVar = "hello";
function f () {
   console.log(myVar);
}

function myMainFn() {
  f();
}

myMainFn();

使用箭头函数

var f = () => {
   console.log(this.myVar);
}

function myMainFn() {
  // The arrow function above has access to window's context
  window.myVar = "hello";
  f();
}

myMainFn();

绑定(bind)this上下文

function f () {
   console.log(this.myVar);
}

function myMainFn() {
  this.myVar = "hello";
  f.bind(this)();
}

myMainFn();

使用对象来保存变量

将在对象上进行闭包，但对内部元素的修改将是可见的。

function f () {
  var myObj = { myVar: "hello" }

  function myMainFn() {
    f();
  }

  myMainFn();
  console.log(myObj.myVar);
}

根据您的代码，替代方法是绑定(bind) this 上下文并设置这些属性:

select: function(e, ui) {
    //...
    if (typeof options.autocomplete.select !== "undefined") {
        this.editable = editable;
        this.elem = elem;
        this.ui = ui;
                                          +--- Bind with the current context 'this'
                                          |
                                          v
        options.autocomplete.select.bind(this)();
    }
}

select: function() {
    //How can I access editable, elem, and ui.  It shows each as being undefined yet I can access it in the parents scope
    console.log(this.editable);
    console.log(this.elem);
    console.log(this.ui);
}