Использование «это» из обработчика событий в JQuery

Question

Я следующий Javascript код найден также в этой скрипкой: http://jsfiddle.net/periklis/k4u4c/

<button id = "element_id" class = "myclass">Click me</button> 
<script> 
    $(document).ready(function() { 
     this.myfunc = function() { 
      console.log('Hello world'); 
     } 
     this.myfunc(); 
     $('#element_id').select('.myclass').bind('click', function() { 
      this.myfunc(); //Obviously this doesn't work 
     }); 
    }); 
</script>​ 

Как я могу назвать this.myfunc(), когда элемент щелкнул? Я не хочу определять myfunc() в глобальном пространстве.

Спасибо, как всегда

Answer 1

Создать локальный переменная, ссылающаяся на функцию, таким образом, она доступна из анонимной функции, и вы не получаете myfunc в глобальном пространстве имен.

<button id = "element_id" class = "myclass">Click me</button> 
<script> 
    $(document).ready(function() { 
     var myfunc = function() { 
      console.log('Hello world'); 
     } 
     myfunc(); 
     $('#element_id').select('.myclass').bind('click', function() { 
      myfunc(); // works! 
     }); 
    }); 
</script>​ 

Если, с другой стороны, назначить var that = this;, то ваш метод myfunc будет храниться на объекте HTMLDocument (от $(document)), который, возможно, не то, что вы хотите. Но если это то, что вы хотите, тогда вы это сделаете (как и другие предложили, я мог бы добавить).

<button id = "element_id" class = "myclass">Click me</button> 
<script> 
    $(document).ready(function() { 
     // storing reference to $(document) in local variable 
     var that = this; 
     // adding myfunc on to the document object 
     that.myfunc = function() { 
      console.log('Hello world'); 
     } 
     that.myfunc(); 
     $('#element_id').select('.myclass').bind('click', function() { 
      that.myfunc(); // works! 
     }); 
    }); 
</script>​ 

// Симон

Answer 2

Наиболее распространенный способ сделать это состоит в кэшthis в другой переменной, а позже в обработчике относятся к этой переменной, как вы могли бы сделать с this. http://jsfiddle.net/k4u4c/3/

<button id = "element_id" class = "myclass">Click me</button> 
<script> 
    $(document).ready(function() { 
     this.myfunc = function() { 
      console.log('Hello world'); 
     } 
     this.myfunc(); 
      var that = this; 
     $('#element_id').select('.myclass').bind('click', function() { 
      that.myfunc(); //Obviously this DOES work :) 
     }); 
    }); 
</script>​ 

Answer 3

Вы могли бы сделать

$(document).ready(function() { 
    var that = this; 
    that.myfunc = function() { 
     console.log('Hello world'); 
    } 
    that.myfunc(); 
    $('#element_id').select('.myclass').bind('click', function() { 
     that.myfunc(); 
    }); 
}); 

В этом случае вы кэшировать переменную this с чем-то, что вы можете повторно использовать в обработчиках событий, где this указывает на текущий элемент

Answer 4

Альтернатива кэширования контекста, если вам необходимо использовать внешний контекст внутри функций связанного приложения, является использование метода proxy() (документы here), чтобы изменить область внутренняя функция, как это:

$('#element_id').select('.myclass').bind('click', $.proxy(function() { 
    this.myfunc(); 
}, this)); 

Таким образом, я заставляю фактическую this (контекст, когда я использую метод связывания), чтобы быть такой же внутри функции связанного приложения (что обычно имеет свой собственный контекст)

http://jsfiddle.net/k4u4c/2/

---

FYI - тот же метод можно найти в библиотеке Dojo (в Додзе это широко используется), и это называется hitch

Answer 5

Вы можете быть немного запутался, что вы с вызовом this.myfunc.

В этом контексте this имеет в виде document, который означает, что вы глобально определение этой функции и ее можно ссылаться в любое время document.myfunc();

Если вы просто хотите поставить функцию в переменном временно, то следующей код должен помочь:

$(document).ready(function() { 
     this.myfunc = function() { 
      alert('Hello world'); 
     }; 
    var otherfunc = function() { 
      alert('Hi world'); 
     }; 
    $('.cv1').click(document.myfunc); 
    $('.cv2').click(otherfunc); 
}); 

JSFiddle: http://jsfiddle.net/LKmuX/

Это свидетельствует о том, как то, что вы делаете в плане приложить используя функцию для документирования, а также просто вставляя ее в переменную.