var self = це?

Використання методів екземплярів як зворотних викликів для обробників подій змінює область дії thisз "Мій екземпляр" на "Що б тільки не викликали зворотний виклик" . Тож мій код виглядає приблизно так

function MyObject() {
  this.doSomething = function() {
    ...
  }

  var self = this
  $('#foobar').bind('click', function(){
    self.doSomethng()
    // this.doSomething() would not work here
  })
}

Це працює, але це найкращий спосіб зробити це? Мені це дивно виглядає.

Це питання не стосується jQuery, але загалом стосується JavaScript. Основна проблема полягає в тому, як "каналізувати" змінну у вбудованих функціях. Це приклад:

var abc = 1; // we want to use this variable in embedded functions

function xyz(){
  console.log(abc); // it is available here!
  function qwe(){
    console.log(abc); // it is available here too!
  }
  ...
};

Ця методика спирається на використання замикання. Але це не працює, thisтому що thisце псевдо-змінна, яка може динамічно змінюватися від області до області:

// we want to use "this" variable in embedded functions

function xyz(){
  // "this" is different here!
  console.log(this); // not what we wanted!
  function qwe(){
    // "this" is different here too!
    console.log(this); // not what we wanted!
  }
  ...
};

Що ми можемо зробити? Призначте її до якоїсь змінної та використовуйте її через псевдонім:

var abc = this; // we want to use this variable in embedded functions

function xyz(){
  // "this" is different here! --- but we don't care!
  console.log(abc); // now it is the right object!
  function qwe(){
    // "this" is different here too! --- but we don't care!
    console.log(abc); // it is the right object here too!
  }
  ...
};

thisне є унікальним у цьому відношенні: чи argumentsє інша псевдозмінна, до якої слід ставитися так само - шляхом зведення.

Так, це здається загальним стандартом. Деякі кодери використовують самості, інші використовують мене. Він використовується як посилання на "реальний" об'єкт на відміну від події.

Це щось, що мені зайняло трохи часу, щоб реально дістатись, спочатку це виглядає дивно.

Зазвичай я роблю це прямо у верхній частині свого об'єкта (вибачте, мій демо-код - це більш концептуально, ніж усе інше і не є уроком з відмінної техніки кодування):

function MyObject(){
  var me = this;

  //Events
  Click = onClick; //Allows user to override onClick event with their own

  //Event Handlers
  onClick = function(args){
    me.MyProperty = args; //Reference me, referencing this refers to onClick
    ...
    //Do other stuff
  }
}

var functionX = function() {
  var self = this;
  var functionY = function(y) {
    // If we call "this" in here, we get a reference to functionY,
    // but if we call "self" (defined earlier), we get a reference to function X.
  }
}

редагувати: незважаючи на вкладені функції всередині об'єкта, переймає глобальний об'єкт вікна, а не навколишній об'єкт.

Якщо ви робите ES2015 або робите скрипт типу та ES5, то ви можете використовувати функції стрілок у своєму коді, і ви не стикаєтесь з цією помилкою, і це стосується бажаного обсягу у вашому випадку.

this.name = 'test'
myObject.doSomething(data => {
  console.log(this.name)  // this should print out 'test'
});

Одне рішення для цього - прив’язати весь зворотний виклик до вашого об'єкта bindметодом javascript .

Це можна зробити за допомогою названого методу,

function MyNamedMethod() {
  // You can now call methods on "this" here 
}

doCallBack(MyNamedMethod.bind(this)); 

Або з анонімним зворотним дзвоном

doCallBack(function () {
  // You can now call methods on "this" here
}.bind(this));

Виконуючи це, замість того, щоб вдаватися до var self = thisпоказів, ви розумієте, як прив'язка thisповодиться в JavaScript і не покладається на посилання на закриття.

Крім того, оператор зі стрілкою жиру в ES6 в основному є тим самим викликом .bind(this)анонімної функції:

doCallback( () => {
  // You can reference "this" here now
});

Я не використовував jQuery, але в такій бібліотеці, як прототип, ви можете прив'язувати функції до певної області. Отже, маючи на увазі, ваш код виглядатиме так:

 $('#foobar').ready('click', this.doSomething.bind(this));

Метод прив'язки повертає нову функцію, яка викликає вихідний метод із заданим вами областю.

Просто додавши до цього, що в ES6 через функції стрілок вам цього не потрібно робити, оскільки вони фіксують thisзначення.

Я думаю, що насправді залежить від того, що ти збираєшся робити у межах своєї doSomethingфункції. Якщо ви збираєтеся отримати доступ до MyObjectресурсів за допомогою цього ключового слова, вам доведеться ним скористатися. Але я думаю, що наступний фрагмент коду також буде працювати, якщо ви не робите особливих речей, використовуючи object(MyObject)властивості.

function doSomething(){
  .........
}

$("#foobar").ready('click', function(){

});