Ключевое слово this и метод bind() в JavaScript

Привет мир! Это Нао!
Я вхожу в группу, готовящуюся к погружению в Code Chrysalis в октябре 2019 года. Это единственный в Токио учебный курс по программированию в стиле Силиконовой долины! Ху!

У меня нет технического образования, но каким-то образом к счастью появилась эта замечательная возможность. Возбужденный, взволнованный, нервный, НО взволнованный!

Я постараюсь записать здесь то, что я узнаю. Это будут маленькие шаги, и я мог бы использовать запрограммированный английский. Пожалуйста, потерпите меня! ;) Любые советы будут оценены!

Хорошо, приступим.

Используйте это ключевое слово

this — это специальное ключевое слово в JavaScript. Вскоре он проверяет объект, в котором он существует, включая глобальный объект. (Это зависит от строгого/нестрогого режима. Для простоты я сейчас пропущу объяснение этого.)

Например…

У нас есть объект с именем harry.

const harry = {
 name: “Harry Potter”,
 house: “Gryffindor”,
 pet: “Hedwig”,
 patronus: “Stag”,
 greeting:function(){
 console.log(“Hello! My name is “ + this.name + “!” );
 }
}

Давайте заставим Гарри сказать привет!

harry.greeting(); // “Hello! My name is Harry Potter!”

Ура! Это довольно простой пример.
Теперь this проверяет объект harry. Так что он может получить доступ к harry.name ;)

Затем, что, если у нас есть больше объектов. Я хочу пригласить Рона и Гермиону!

const ron = {
 name: “Ronald Weasley”,
 house: “Gryffindor”,
 pet: “Scabbers”,
 patronus: “Jack Russell terrier”, 
 greeting:function(){ 
 console.log(“Hello! My name is “ + this.name + “!” );
 }
}
const hermione = {
 name: “Hermione Granger”,
 house: “Gryffindor”,
 pet: “Crookshanks”,
 patronus: “Otter”,
 greeting:function(){
 console.log(“Hello! My name is “ + this.name + “!” );
 }
}

Теперь у меня есть их объект здесь. Заставим их поздороваться!

ron.greeting(); // “Hello! My name is Ronald Weasley!”
hermione.greeting(); // “Hello! My name is Hermione Granger!”

Ура!

Но ждать. Я что-то упустил?

Да.

Старайтесь не повторять

Вы когда-нибудь слышали о «Не повторяйся» раньше?
Согласно Википедии, это принцип разработки программного обеспечения.

Как стажер инженера-программиста, я должен следовать этому;)

Теперь я повторяюсь, используя функцию приветствия во всех объектах, Гарри, Роне и объекте Гермионы. Три раза.

Давайте сделаем мой код лучше. Извлеките функцию и выполните ее!

const harry = {
 name: “Harry Potter”,
 house: “Gryffindor”,
 pet: “Hedwig”,
 patronus: “Stag”
}
const ron = {
 name: “Ronald Weasley”,
 house: “Gryffindor”,
 pet: “Scabbers”,
 patronus: “Jack Russell terrier”
}
const hermione = {
 name: “Hermione Granger”,
 house: “Gryffindor”,
 pet: “Crookshanks”,
 patronus: “Otter”
}
const greeting = function(){
 console.log(“Hello! My name is “ + this.name + “!” );
}

Что я получу?

harry.greeting(); // ??
ron.greeting(); // ??
hermione.greeting(); // ??

Ой! У меня есть ошибки!

Uncaught TypeError: harry.greeting is not a function
Uncaught TypeError: ron.greeting is not a function
Uncaught TypeError: hermione.greeting is not a function

это чувствительно к тому, где оно существует

Приветствие — это функция. Но это не работает.
Давайте еще раз посмотрим на приветствие.

const greeting = function(){
 console.log(“Hello! My name is “ + this.name + “!” );
}

Возможно, вы уже знали. Но позвольте мне уточнить это.

Причина, по которой я получаю эти ошибки, заключается в ключевом слове this.
Как я уже писал ранее, оно проверяет объект там, где он существует.

Теперь, где он существует?

В глобальном объекте, правильно. Поэтому он не может получить доступ к каждому свойству объекта.

Например,

<<OLD CODE>>
const hermione = {
 name: “Hermione Granger”,
 house: “Gryffindor”,
 pet: “Crookshanks”,
 patronus: “Otter”,
 greeting:function(){
  console.log(“Hello! My name is “ + this.name + “!” );
 }
}

В этом случае объект hermione имеет приветствие в качестве своего метода. Таким образом, ключевое слово this может видеть свое свойство. Не проблема его выполнить.

<<PRESENT CODE>>
const hermione = {
 name: “Hermione Granger”,
 house: “Gryffindor”,
 pet: “Crookshanks”,
 patronus: “Otter”
}
const greeting = function(){
 console.log(“Hello! My name is “ + this.name + “!” );
}
hermione.greeting is not a function anymore!!

После удаления метода у каждого объекта больше нет никакого метода. Итак, я получил ошибки.

Хорошо, теперь мы знаем причину. Но я все равно хочу, чтобы они поздоровались!

Время попробовать bind()!

Согласно MDN, bind() — это…

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

из MDN

Звучит немного сложно…

Попробуем связать объект all с функцией приветствия.

const boundedHarry = greeting.bind(harry);
const boundedRon = greeting.bind(ron);
const boundedHermione = greeting.bind(hermione);
boundedHarry(); // “Hello! My name is Harry Potter!”
boundedRon(); // “Hello! My name is Ronald Weasley!”
boundedHermione(); // “Hello! My name is Hermione Granger!”

Ура!
В данном случае не повторяюсь, а успеваю поприветствовать! Ву!

Итак, здесь bind() привязывает функцию приветствия к трем объектам при ее вызове. А в приветствии есть ключевое слово this. Итак, при каждом выполнении this идет и видит каждый объект. Поскольку он привязан к Гарри, он может пойти и увидеть объект Гарри;)

Другой пример

Прежде чем я закончу, я предполагаю, что есть еще один пример метода bind(). Позвольте мне попробовать это.

Когда я использовал bind() в предыдущем примере, я смог связать контекст аргумента с функцией приветствия. Я связал их, чтобы использовать функцию в контексте каждого объекта.

Функция приветствия смогла получить harry.name.
Функция приветствия смогла получить ron.name.
Функция приветствия смогла получить hermione.name.

Тогда что, если приветствие НЕ является глобальной функцией. Я ожидаю, что смогу привязать функцию к другим объектам.

Давайте проверим это!

<<This is the very first code that I wrote at the top of this article>>
const harry = {
 name: “Harry Potter”,
 house: “Gryffindor”,
 pet: “Hedwig”,
 patronus: “Stag”,
 greeting:function(){
  console.log(“Hello! My name is “ + this.name + “!” );
 }
}

И что мне нужно, так это связать их… Итак,

const ron = {
 name: “Ronald Weasley”,
 house: “Gryffindor”,
 pet: “Scabbers”,
 patronus: “Jack Russell terrier”
}
const hermione = {
 name: “Hermione Granger”,
 house: “Gryffindor”,
 pet: “Crookshanks”,
 patronus: “Otter”
}
const boundedRon = harry.greeting.bind(ron);
const boundedHermione = harry.greeting.bind(hermione);

Выполним их!

boundedRon(); // “Hello! My name is Ronald Weasley!”
boundedHermione(); // “Hello! My name is Hermione Granger!”

Ключевое слово this внутри функции приветствия проверяет контекст объекта ron, когда он связан с ним. Он проверяет Гермиону, когда она связана с Гермионой.