Доступ к переопределенным переменным из родительской функции

Question

Мне интересно, есть ли более простое решение для моего текущего решения?

Пример Javascript:

var data= {
  'key1':'value1'
};

$.each(data,function foo() {
  alert(this); //alerts 'value1'
  $('#element').click(function()) {
    alert(this); //alerts something else
  }
});

Способ исправить это будет:

var data= {
  'key1':'value1'
};


$.each(data,function foo() {
  alert(this); //alerts 'value1'

  var this_original=this;

  $('#element').click(function()) {
    alert(this_original); //alerts 'value1'
  }
});

Это решает проблему, но не очень чисто.Мне было интересно, есть ли хороший метод Javascript / jQuery, чтобы получить значение оригинала this внутри дочерней функции.Что-то вроде: parentFunction.this

Answer 1

Не используйте this, используйте аргументы вместо:

var data= {
  'key1':'value1'
};

$.each(data,function foo(idx,val) {
  alert(val); //alerts 'value1'
  $('#element').click(function() {
    alert(val); //alerts 'value1'
  });
});

Answer 2

Пожалуйста, используйте ответ от Мартина Йесперсена. Однако ...

Использование функции jQuery .proxy () согласно запросу:

var data = {
    "key1": "value1"
};

$.each(data, function(i, obj) {
    alert(this); //alerts 'value1'
    this.onClick = function() {
        alert(this);
    }

    $('#element').click($.proxy(this, "onClick"));
});

Вот пример скрипки .

Пожалуйста, имейте в виду, что вы, вероятно, захотите иметь способ изменить селектор, для которого вы привязываете событие click, я уверен.

Answer 3

Использовать jQuery.proxy . Вы можете использовать следующий код:

 var data= {
  'key1':'value1'
};

$.each(data,function foo() {
  alert(this); //alerts 'value1'
  $('#element').click($.proxy(function() {
    alert(this); }, this);
});