Кайталануучу жебе функциялары

Кайталануучу жебе функциялары

 

Келгиле, жебе функцияларына кайрылалы.

Жебе функциялары азыраак жазуу үчүн жөн гана "кыска жол" эмес. Алар башка бир катар пайдалуу өзгөчөлүктөргө ээ.

JavaScript кодун жазып жатканда, биз башка жерде аткарыла турган кичинекей функцияны жазышыбыз керек болгон жагдайлар көп болот.

Мисалы:

  • arr.forEach(func)- массивдин ар бир элементи үчүн funcаткарылат .forEach
  • setTimeout(func)– funcорнотулган пландоочу тарабынан аткарылат.
  • …жана башка.

Функцияны түзүү жана аны бир жерге өткөрүү JavaScriptтин рухуна абдан туура келет.

Жана мындай функцияларда биз адатта учурдагы контекстти калтыргыбыз келбейт. Бул жерде жебе функциялары жардамга келет.

Жебе функцияларында "this" жок

Объекттик методдор бөлүмүндө эсибизде тургандай , "бул" , жебе функциялары жок this. га чакыруу болсо this, анын мааниси сырттан алынат.

Мисалы, биз муну объект ыкмасынын ичинде кайталоо үчүн колдоно алабыз:

@A@let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();@A@

Бул жерде жебе функциясы ички түрдө колдонулат forEach, андыктан ал : this.titleметодундагыдай эле мааниге ээ болот .showListgroup.title

Эгерде биз "кадимки" функцияны колдоно турган болсок, анда ката болот:

@A@let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(function(student) {
      // Error: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();@A@

Ката, forEachдемейки боюнча ал thisбарабар функцияларды аткаргандыктан келип чыгат undefinedжана натыйжада биз кирүүгө аракет кылып жатабыз undefined.title.

Бул жебе функцияларына таасирин тийгизбейт, анткени аларда жөн эле жок this.

Жебе функцияларын колдонууга болбойтnew

Жоктук thisтабигый түрдө дагы бир чектөөгө алып келет: жебе функцияларын конструктор катары колдонууга болбойт. Алар менен чакыруу мүмкүн эмес new.

Жебе функциялары VS байланыш

=>Жебе функциясы менен кадимки функциянын ортосунда тымызын айырма бар .bind(this):

  • .bind(this)функциянын "байланышкан версиясын" түзөт.
  • Жебе =>эч нерсени байлабайт. Функцияда жөн эле жок this. Маани алынганда thisал кадимки өзгөрмө сыяктуу тышкы лексикалык чөйрөдөн алынат.

Жебе функцияларында "аргументтер" жок

Жебе функцияларында да өзгөрмө жок arguments.

Бул декораторлор үчүн эң сонун, биз чалууларды учурдагы thisжана arguments.

Мисалы, defer(f, ms)ал функцияны алат жана анын үстүнө орогучту кайтарат, бул чалууларды миллисекунддорго кечиктирет ms:

@A@function defer(f, ms) {
  return function() {
    setTimeout(() => f.apply(this, arguments), ms)
  };
}

function sayHi(who) {
  alert('Hello, ' + who);
}

let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("John"); // выводит "Hello, John" через 2 секунды

Жебе функциясы жок эле ушундай болот:

function defer(f, ms) {
  return function(...args) {
    let ctx = this;
    setTimeout(function() {
      return f.apply(ctx, args);
    }, ms);
  };
}@A@

Бул жерде биз кошумча өзгөрмөлөрдү түзүүгө аргасыз болдук argsжана ctxичиндеги функция setTimeoutаларды ала алат.

Бардыгы

Жебе функциялары:

  • Аларда жок this.
  • Аларда жок arguments.
  • менен чалуу мүмкүн эмес new.
  • (Аларда да жок , бирок биз бул тууралуу сүйлөшкөн жокпуз. Бул тууралуу Класстардын мурастооsuper бөлүмүндө сүйлөшөбүз ).

Мунун баары, анткени алар учурдагыда аткарылуучу өзүнүн "контексти" жок кичинекей коддор үчүн арналган. Жана алар муну эң сонун аткарышат!